A few days ago we showed you from Silo Creativo some of the best plugins (in Spanish) that we can find in WordPress to create a contact form in our blog or web. Of all of them, one of our favourites and the one we use in our projects is ContactForm 7. We love it for its flexibility to personalize it, its ease of use and the amount of extensions that it has. Also, if you are starting a personal project and you do not have a big budget to carry it forward, surely the fact that it is freeis also to your liking.
But if this is the first time you are going to create a contact form, you may be overwhelmed by the options offered or you may not be very clear which sections should be included. For all this, we have created this tutorialin which we will review and explain each of its sections, from the installation of the plugin to its publication, so that when you reach the end, you will be able to create your own according to your needs.
Installing Contact Form 7
The installation of the Contact Form 7 plugin will be done by the usual procedure. From the WordPress admin panelwe will add new in the section of Plugins. Once there, in the search box we will write Contact Form 7. Once we get the results, we will install the plugin and activate it.
In any case, if you have any doubts regarding the installation of plugins in WordPress, we recommend that you go through this article, as it can solve any problem you have on this topic.
Creating and configuring a contact form
Once we have the plugin installed, we will notice that a new section called Contact will be added to our WordPress panel. If we enter, we will see that the plugin comes by default with a default contact form.
We can choose to create a new form, edit the existing form or duplicate it and start modifying from there. We will use this third option because that way we will start with something to work with and we will not lose the default contact form that comes with the plugin.
As we can see, a text editor with a code created byHTMLappears. This code will be responsible for creating a standard contact form with the fields we want. As you can see in the image, the default form that comes in Contact Form 7 has some sections with which our users can enter their name, email, subject, message and a button to send their data.
To create a new field in our form simply click on one of the tags at the top. We will open a window that will have different options depending on the purpose of each one. Let’s make a list of the purpose of each one of them and check how much you can customize and add options in your form.
- Text: to enter a text, such as the users’ name, surname or any other information.
- Email: to enter an email.
- URL: to enter a URL or web address.
- Tel: to create a space to add a phone number. It is important to know that if you add any symbol other than a number, such as a hyphen or a parenthesis, an error message will appear to your users.
- Number: to simply add a section with which to enter a number. For example, it may work if we are asking about age.
- Date: to enter an exact date.
- Text area: similar to the Text section, but with a text area field. Useful for text message bodies.
- Drop-down menu: we add a drop-down menu with different options.
- Checkboxes: a checkbox is added, whereby the user chooses several of the available options.
- Radio buttons: like the previous one, but we only let you choose one of the options.
- Acceptance: we create the typical text where our users must accept the conditions of use.
- Quiz: we create a question in which if the user does not give the correct answer, an error message will appear and you will not be able to send the form.
- File: we add a space by which the user can attach a file. In addition, we can mark the maximum size of the attachment.
- Submit: Last, but not least, we create the button by which the form will be sent to you.
There is an option, called reCAPTCHAthat we have voluntarily skipped, as we will discuss in the next section.
Once we have created the form to our liking click on save. This is the resulting code of the form that we created, adding some of the available fields:
Adding and customizing notifications to your email
We go to the next section called Email. If we are editing the default form that came with Contact Form 7 we will have all the sections filled, but we will have to customize them with our data.
In this tab we enter the mail to which the messages will arrive. In addition, we can customize the format of the email that we will receive simply by using the names of the fields of the form. To make things easier, all the sections that we have included in the Form tab are at the top, so we do not have to go from one tab to another.
As you can see in the image, there are five fields to complete:
- To: In this section we will indicate the email or emails where we want to send the messages that will arrive through the contact form.
- From: this will be the name tag of the person who submitted the form. Next to it is the address of the mail server that WordPresswill use to send the mails. This mail server must belong to our domain.
- Subject: It is the label corresponding to the text field that we created for the subject. In addition, the name of our website will also appear at the beginning, which can help us to filter from our mail inbox and take more control of everything that is sent to us.
- Additional Headers: we can indicate the email of the user that fills the form with its corresponding label.
- Message Body: we can customize the message that will reach our email. The usual thing is to put all the data that we have been adding to the form, so that we get all the information completely.
Contact Form 7 reCaptcha
The reCAPTCHA is a way to stop the spam and verify if the person who fills our form is a human or a bot. It is highly recommended to configure reCAPTCHA and it will be critical that our mailing list does not fill us with spam. This tag inserts the Google reCAPTCHA, so we will have to be registered on the reCAPTCHA page to get the corresponding APIs, which we will insert in Contact Form 7.
For this, we will go to the oficial web of reCAPTCHA and we will access with a Google account. We will complete a form in which we have to indicate what the web that we are going to protect will be. When we have all the data entered, we will provide the API keys.
Go to the menu Contact> Integration and paste the two keys in the corresponding fields. Now it will be time to introduce the reCAPTCHA tag so that it is displayed on our form, thus avoiding spam. Once we have created the form to our liking click on save.
OtherContactForm 7 settings
In the Messages tab we can modify all the different messages that Contact Form 7 creates when interacting with the form. The most typical is the error message that will appear to our user when he has not filled in correctly any of the fields. In our case, being working with WordPress in English, all these messages appear in the language of Shakespeare, so we would have to translate them into our language. This gives us the possibility to put messages less typical than the ones that come by default.
Adding a contact page to the menu
Once created, we will only have to insert our form in one of our pages of our blog. To do this, we just have to copy the shortcode that appears next to the list of forms that we have created, within the Contacts section of our WordPress panel.
This shortcode will be pastedin the page of WordPress that we see opportune. You can also copy it to a text widget.
Plugins for Contact Form 7
Finally, it is also important to comment that in addition to all the options that the Contact Form 7 itself brings by default, we can expand them by using different extensions. Here are some of the most interesting:
- CF7 Customizer: to further customize the look of our form.
- ContactForm 7 Success Page Redirects: After sending the form, you will send your user to an external page.
- ContactForm 7 WooCommerce Orders: Our order form can now create orders at WooCommerce.
- ContactForm 7 Mailchimp Extension: Emails will be sent to Mailchimp service.
