How to create a Contact Form in WordPress

oday most of the Websites contains a contact form(s). So, the 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. It is because the best free plugin for building up forms is the Contact Form 7 plugin.

You need to follow these steps to get ready with the Contact Form for your WordPress web site.

As we have mentioned 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 which is called Contact.

Lets create the Contact Form.

Now you need to Navigate to Contact Menu. Once you click on the admin menu called Contact it is 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 Tab

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.

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.

Messages Tab

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 skip_mail: on

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 for need to display.

02. Use in the editor

Lets create complex forms. First of all you need to aware about the form fields. Lets see one by one.

Text Field

Text Field is a main field for creating a form. For names such as First Name and Last Name, Subject, Address Fields are most commonly using in forms. This is the dialog box showing up for creating a text field. Lets create a text field for first name.

Field Type: Field Type is a checkbox which can checked if required. If not required keep as it is. Normally First Name is a required field and it should be checked.

Name: Give the name for the text field. Here I am naming it as first-name.

Default Value: This field can use as the Placeholder field. You need to enter the text to show up and if you need this to behave as Placeholder field, you’re required to check the checkbox field.

Akismet: Akismet is a WordPress default plugin which is working against spams. So, it is better to check this check box.

ID attribute: Define the ID attribute for the field.

Class attribute: Define the Class for the field. You can add multiple CSS classes. You just need to keep a space between the classes. Such as first-class second-class third-class

Here is the filled field generator.

Once you filled, it is generating the code and showing in the below. You can either copy and paste the code where you want or just click on the “Insert Tag” to insert the code.

Using this method you can insert all your fields. All are same and there is a small differences. Hope you’ll. Mention anything you want further.

Lets create our form. This is the form we are going to create.

As explained above I have created the Form. Lets see the final form code.

Now we have completed the the form code and we are done. Now we want to show this form in our code. For that you need to remove the HTML form with the form tag because Contact Form 7 adding the form field and it is caring the rest. I am using a custom page template for Contact Us page and here is my final code.

This will showing up the created Contact Form using Contact Form 7 plugin. You can use this code in post editor also. There is no difference between the functionality using both methods.

Hope this’ll helps you a lot. To see how to configure the email see the Mail configuration in Contact Form 7 in WordPress. Hope you’ll found a great article regarding the mail configuration.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *