How to create a Contact Form in WordPress
WordPress does not support for a built in Contact Form. However there are super easy way to create a contact form for your WordPress website without no cost. Please follow the tutorial till the end.
Today most of the Websites contains a contact form(s). So, users can reach you via the contact form easily. All of the sites now tend to using contact forms. In this tutorial we are going to create a contact form for you. If you’re bit familiar with HTML and CSS, this is really easy.
You need to follow these steps to get ready with the Contact Form for your WordPress web site.
We are using Contact Form 7 plugin for this tutorial. You need to install Contact Form 7 plugin into your web site. For that logged into your admin dashboard. Then navigate to
Plugins > Add New.
You need to Install and Activate Contact Form 7 plugin by Takayuki Miyoshi. If you do not have any idea regarding the installing and setup plugin you can follow this tutorial on How to install a Plugin in WordPress.
Once you activate the plugin it is showing in Plugins as it has been Activated. As well you can see new admin menu item has been added to the WordPress Admin dashboard which is called Contact.
How do I use Contact Form in WordPress?
Now go and click on
Contact Menu. Once you click on the admin menu you’ll be redirecting you to the Contact Form 7 plugin main page. There is a sample contact form already with this plugin. We can edit this form. Lets select the form.
Here you need to Customize the current for as you wish.
Lets name this form as Contact Us. To apply the changes you need to save the form. Once you save it you can see that Form Short Code been updated.
Lets focus on form body. Form contains four (4) tabs which called Form, Mail, Messages, Additional Settings. Lets go one by one.
Form is the place we prepare our form. Here you can see number of fields such as text, email, tel, text area, etc. Assume you are using a text field. Then click on that. Once you click on text field it will prompt Form Tag Generator for text field. You can customize your text field here. You can add Name, Default Value (This default value you can use as the Placeholder text), Id and class. Once you filled out the fields and click on insert tag, it will insert your text field into the location you selected. Either you can copy the generated text for text field and replace it with form text input field.
Lets start with our form attributes. We have two methods to achieve this. Either edit on form or generate and create form in our editor. So, finally we can update it to the form body.
Now we have created our form fields and complete the form. Now we need to move the created form to the form body. See the screenshot for form body.
Next we will discuss about Mail tab.
We’ll create our mail under our mail tag. Here you can format email body which means how you’re expecting this email should come to you or your mail viewer. If you’re sending respond emails to users’s then how would it be.
You can use HTML designed code for email body. For that you need to add your code and make sure to select HTML Content Type.
You can change the default messages here. Once you go through this tab, you’ll notice that you have many messages and you can freely change those messages to whatever you want.
Additional Settings Tab
Contact Form 7 supports for additional headings. There were such as,
Subscribers Only – If you need to submit forms only by the Logged-in users then you can use this additional header. This will prompt a message to non logged in users to saying that logging is required to submit. The code you need to use is subscribers_only: true
Demo Mode – If you have set this to on, all the mail functioning not going to process and it is only showing the “Success Message”. But actually mail is not functioning. It is like a development mode. The code you need to use is demo_mode: on
Skip Mail – This is same as the demo mode but in this method you will not affected for the process like saving emails, unlike in Demo Mode. Code for use is
Assume existing form code is the our form, then you just need to copy the short code and paste it where you want to show the form. You can use this in code editor or in a custom page. Lets see both examples.
01. Using custom page. Place where the form need to display.
echo do_shortcode('[contact-form-7 id="347" title="Contact Us"]');
02. Use in the editor
That is all from this tutorial regarding create a Contact Form in WordPress. Hope you enjoyed the tutorial. Happy learning ahead. Thanks for reading.
Recommended: Please follow our step by step guide how to create a WordPress Theme from scratch.