How to Add and Display the Customized WordPress Contact Form

How to Add and Display the Customized WordPress Contact Form

No matter what kind of WordPress site you set up, a unique and responsive contact form is the critical component. With it, your visitors can easily contact you to talk about your web contents, services and products. In addition, the WordPress contact form does not require you to make your email address public. This way, you can avoid the spam email messages effectively.

At present, there are a large number of WordPress contact form plugins available. With them, you can showcase a customized WordPress contact form easily. This time, we highly recommend you to try the Contact Form 7 plugin. This is the most popular option to help you achieve this goal, which comes with over 1 million downloads.

Get Started with the Contact Form 7 Plugin

To get started with this plugin, you do not need to finish a lot of settings or configurations. Instead, you can click the Contact > Contact Forms button. Here, you can find a default and pre-made contact form that is named as Contact Form 1.

Now, you just need to copy the shortcode and paste into your Contact Us page or any other location within your site as you want.

Default Contact Form Shortcode

Based on your webpage design, the contact form will look like the following. From it, people are required to enter the name, email address, message subject and message details before clicking the Send button.

Default Contact Form

Customize Your Contact Form

If you are not satisfied with the default contact form and are looking for the extra customization, you can edit this form for further adjustment.

Add the Extra Form Components

To begin with, you can add some other components for this contact form. By default, the contact form contains 5 parts. They are Name, Email, Subject, Message and Send button. Besides them, you have the freedom to add some others, such as the telephone number, website URL, checkbox, quiz, file and reCAPTCHA.

Form Components

Here, you simply need to click your target components and finish the related settings. Note that no matter which component you are looking to add, you need to decide two essential parts.

Firstly, you should determine whether to make this field a required one. Secondly, you need to enter the field name properly. The name will be showcased on the front-end of your contact form.

Component Required Settings

Enable the reCAPTCHA Function

This is an effective form component to avoid the unnecessary spam. As the default contact form does not support this feature, you need to enable it manually.

You can get it by adding the reCAPTCHA component from the Form part. Here, you firstly need to install the API key for using it. In this case, you just need to click the Contact > Integration button. After that, you can hit the Google reCAPTCHA link.

Google reCAPTCHA

This way, you can be redirected to the Google reCAPTCHA page. Just click the Get reCAPTCHA button and register for your site. This Google tool will give you the site key as well as the secret key that are exclusively for your site.


Now, you need to go back to the Integration settings page and hit the Configure Keys button. After that, you should enter the correct site key and the secret key you have got from Google reCAPTCHA.

Configure Keys

After saving the settings, you now simply need to add the place-holder into the contact form content by clicking the form component of reCAPTCHA. Note that you can change its theme between the options of Dark and Light, as well as determining the size between the options of Compact and Normal.

Determine the Mail Settings

If people use your contact form to send you some messages, you will be informed by the email. From it, you can know who ask you what. However, it is possible that you may need to receive a long list of email messages each day. In this case, you’d better adjust the mail settings to avoid the missing of any contact information.

Here, you mainly need to enter the right email address to receive the messages and decide the obvious mail subject.

Decide the Email Messages

After people click the Send button, you need to give them the confirmation message. These words can show your appreciation of their words and tell them whether they have contacted you successfully. In addition, in some cases, people may forget to enter some required form fields. This part allows you to determine the warning messages.

Email Messages

Add Some Additional Settings

From the last part, you are allowed to add some special code snippets for the contact form customization.

There are some main types of settings here. For instance, if you want your contact form to pass the step for sending the messages but just showcase the “completed” response message, you can turn on the demo mode.

Also, if you are looking for an alert when the mails are sent or when the Send button is clicked, you can use the special JavaScript code. In the following, we have showcased the sample code.

Additional Settings

Now, you can save the settings for your contact form and use its shortcode once again for the better form display.