Today we will learn how to create a form using Contact Form 7 in custom theme of WordPress?
When we create a custom theme in WordPress, how will we design the contact form that is there in it, and how will we customize it all by using the contact form 7 plugin?
First you should have the design of the contact page, if not, create a contact form that looks the same in the custom theme, then use contact form 7 in that.
Follow some steps
step1:
Table of Contents
Install Contact Form 7 Plugin
Go to WordPress Dashboard and Install the new Plugin Contact Form 7
step2:
Add new Form
Install Contact Form 7 Plugin Then Click Add New Form and Add New Title
step3:
Go to your Contact Form Page and Cut your Form Code
where you have created contact form design in custom theme contact page go and cut the code of the form
Ctrl+X
step4:
You can edit the form template here. paste the code in for details
Add Input and Input Type
Demo Form Code Before:-
<form id="contact" action="" method="post">
<div class="row">
<div class="col-md-6 col-sm-12">
<fieldset>
<input name="name" type="text" id="name" placeholder="Your name" required="">
</fieldset>
</div>
<div class="col-md-6 col-sm-12">
<fieldset>
<input name="email" type="text" id="email" placeholder="Your email" required="">
</fieldset>
</div>
<div class="col-md-12 col-sm-12">
<fieldset>
<input name="subject" type="text" id="subject" placeholder="Subject">
</fieldset>
</div>
<div class="col-lg-12">
<fieldset>
<textarea name="message" rows="6" id="message" placeholder="Your Message" required=""></textarea>
</fieldset>
</div>
<div class="col-lg-12">
<fieldset>
<button type="submit" id="form-submit" class="main-button">Send Message</button>
</fieldset>
</div>
</div>
</form>Demo Form Code After:-
<form id="contact" action="" method="post">
<div class="row">
<div class="col-md-6 col-sm-12">
<fieldset>
[text* name id:name placeholder "Your name"]
</fieldset>
</div>
<div class="col-md-6 col-sm-12">
<fieldset>
[email* email id:email placeholder "Your email"]
</fieldset>
</div>
<div class="col-md-12 col-sm-12">
<fieldset>
[text* Subject id:subject placeholder "Subject"]
</fieldset>
</div>
<div class="col-lg-12">
<fieldset>
[textarea message id:message placeholder "Your Message"]
</fieldset>
</div>
<div class="col-lg-12">
<fieldset>
[submit id:form-submit class:main-button "Send Message"]
</fieldset>
</div>
</div>
</form>
Add Shortcut to your Contact Page
The contact form must have been created by copying the short code of the contact form 7 where the code of the form was cut and paste it in the contact page.
Check Our Contact Page
By pasting the short code of Contact Form 7, you refresh your contact page, the form of Contact Form 7 will be added to your contact page.
How to Add Short code in WordPress Custom Template
<?php echo do_shortcode(‘Enter Your Short code’); ?>
<?php echo do_shortcode('[contact-form-7 id="57" title="my-contact-form"]'); ?>
