A contact form is an important part of a website. It helps readers to contact webmasters for inquiries, feedback, and suggestions. Thus it ensures a smooth connection between both parties.
How can you create a simple, secure contact form in WordPress? While creating a contact page, you should pay attention to the security side. Otherwise, you will get tons of spam comments from bots and criminals who want to inject malicious code on your website.
Upon activation, it will add a new menu in the left sidebar. Tap Contact > Add New to create a new contact page.
A default contact form will be shown there with basic fields including Name, Email, Subject, Message and Submit. Just above the content area, you can find various tools to create a new contact form or customize the existing one.
Know your contact form
Your default contact form will look like this:
<label> Your Name </label>: Label of your field.
(required): Indicates the user must fill this field.
[text* your-name]: Text field where you can enter text.
[number Your-Age]: Number field
[email* your-email]: Field where you can type an email address.
[submit “Send”]: Submit button.
Adding a new field in Contact Form 7
Let’s check how to add a new field in your contact form.
We’re going to insert a Name text field in this example. Tap the Text button from the top. A small window will open like this:
Check the Field type box as required. Check the following box to show your default value as placeholder text. Click Insert Tag button.
|[text* Name placeholder “Type your name”]|
This is the code of your text field. It will generate a black text box without any indication of what kind of box it is. We should add a label to the box to inform the readers that they can type name there. So our code will like this,
|Name: [text* Name placeholder “Type your name”]|
How to set a minimum and maximum length for the fields?
Insert minlength:4 maxlength:10 fields just after the text field name. The number can be customized as per your needs.
This will be your final code,
|Name: [text* Name minlength:4 maxlength:10 placeholder “Type your name”]|
It will generate the following output.
Secure your form with reCAPTCHA
A CAPTCHA box should be added in order to prevent spambot comments. It is a free service and you should obtain reCAPTCHA API keys from Google for integrating with your site.
Open Contact > Integration to configure keys.
Go to google.com/recaptcha and tap Get reCAPTCHA button from the top right side of the screen. Sign in with your Gmail account first, enter a label name to easily identify the site and choose a CAPTCHA type.
Accept terms of service and Register. It will show the site key and secret key now. Copy and paste them into the integration page of the plugin. Save settings.
The reCAPTCHA is ready to use on your site.
Creating a contact form using Contact Form 7
We’re going to insert Email, telephone number, radio button, drop-down, text area and reCAPTCHA boxes in this sample contact form.
This’s the source code of the above form:
[text* Name minlength:4 maxlength:10 placeholder “Type your name”]Email:
[email* Email:]Telephone No:
[tel TelephoneNo:]How do you hear about us?
[radio Radio default:1 “Web” “Advt” “Friends”]Select Browser (required)
[select* SelectYourBrowser “Firefox” “Safari” “Opera” “Chrome”]Message:
[textarea* Message placeholder “Type your message”]
Name and save your form. It will generate a shortcode which can be used to display your form in posts, pages and text widgets.
Go to Contact menu in the left sidebar, open Contact Forms to view, edit and delete your form. Mouse hover the desired form to show the Edit option. In the Edit view, you can personalize other parts of the form including mail and default messages too.
To delete a form, go back to the previous screen where you can see all forms at once. Check the form name that you want to delete and click on the Bulk Actions drop-down box to see the delete option. Choose it and hit Apply.