A contact form is one of the most important parts of any website. A good looking & easy to use contact form improves your connectivity with your website’s visitor. This document will help you to create a good looking contact form with ‘Shuban’ & ‘Shuban Pro’ WordPress theme.

Contact Form 7:

We have used ‘Contact Form 7‘ plugin for making our contact form work. This is one of the most popular plugins for creating contact forms. It can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on. You can read more about contact form 7 WordPress plugin on https://contactform7.com/.

How to create Contact form?

Follow these steps to create contact form:

1. Login to WordPress admin dashboard.
2. First, we will check if? Contact form 7 plugin?is activated or not. If you have already performed?this step while installing your theme, you must be having ‘Contact form 7’ installed. Make sure that this plugin is activated.
3. If the plugin?is deactivated, we need activate it by going to Plugins > Installed Plugins.
4. Go to ‘Contact’? in the WordPress menu.
5. And create a new contact form. You can also edit existing contact form if you want.
6. Paste following code in the contact form. We have covered all styling required to build your form without worrying about its appearance.

   <div class="shuban-contact-form row mb-4">
   
   ?
   <div class="col-md-6"><label class="w-100"> Your Name: (required) [text* your-name class:form-control] </label></div>
   ?
   <div class="col-md-6"><label class="w-100"> Your Email: (required) [email* your-email class:form-control] </label></div>
   ?
   <div class="col-md-6"><label class="w-100"> Subject: [text your-subject class:form-control] </label></div>
   ?
   <div class="col-md-6"><label class="w-100"> Contact Number: [text contact-number class:form-control] </label></div>
   ?
   <div class="col-md-12"><label class="w-100"> Your Message: [textarea your-message class:form-control] </label></div>
   ?
   <div class="col-md-12 text-center mb-2">[submit class:read-post "Send"]</div>
   ?
   
   </div>

7. Click on save button.
8. Copy the shortcode and paste where you want in page or post.
9. Click on save button on the page.

Check your page. A?well-styled contact form must appear on your page.