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.
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.
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.
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.
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.
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.
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.
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.
Now, you can save the settings for your contact form and use its shortcode once again for the better form display.