How to create contact forms with Contact Form 7

0
48
Contact Form 7

For all professionals and companies that have a WordPress website, creating and adding contact forms is a completely common task and, in fact, our own marketing strategy usually requires it as a tool to capture leads and potential customer data.

Many of the forms that we find in the sites developed in WordPress, a task that requires programming experience and the support of resources such as any  Hostinger tutorial , are not usually part of the template itself, but have been added and customized through the use of a customization plugin such as Contact Form 7, which we will talk about in this article.

What types of contact forms are there for WordPress?

As with almost any graphic or web design element, we have the option of staying with the default or basic look, or going one step further and customizing the styles according to our corporate identity .

Standard contact form

We refer broadly to any of the model forms that our template brings by default or, even, those with a standard design that offers us the starting configuration of the WordPress plugin used to add them to our website.

Custom or personalized contact form

To customize a contact form, it is necessary to have some programming knowledge in CSS code for styles or HTML for editing fields.

Although there are also themes that include specific customizations for the forms included with certain plugins, in this article we are going to refer to the Contact Form 7 plugin, since it is the one that wins for its popularity and, in fact, we use it on our corporate website .

At the personalization level of a contact form, with Contact Form 7 it is possible to:

  • Add fields: Text (or message body), email, phone, URL, number, date, dropdown, checkboxes, acceptance, questionnaire, attachment, reCAPTCHA, radio buttons and submit.
  • Add configuration parameters:  To, for example, limit the data that the user can include in each field or the width of the fields, create columns, etc.
  • Apply styles and colors: One of the drawbacks of the Contact Form 7 plugin is perhaps how easy it is to customize the visual appearance of the forms. Still, it is possible using some CSS code or combining its use with other plugins like CF7 Customizer .

How to create contact forms in WordPress?

After taking a quick look at the options you have for creating and adding a contact form to your WordPress site, as mentioned above, let’s go into a bit more detail.

In particular, we are going to see how to put this action into practice on our website thanks to the Contact Form 7 plugin.

Advantages of creating forms with Contact Form 7

Some of the reasons that make Contact Form 7 such a popular WordPress plugin are:

  • Support information translated into Spanish.
  • Free download.
  • Frequent updates.
  • Combination with other security and customization plugins such as Akismet or CF7 Customizer.
  • Creation of special labels to know the users who send us emails through the form.
  • Creation of various types of fields, including drop-down menus to select different recipients.
  • Support for using shortcodes and CSS.
  • Shipment tracking with Google Analytics.
  • Sending files through form.

Basic features of the Contact Form 7 plugin

To understand a little better how this plugin works with which to create standard and custom contact forms, let’s see the different configuration tabs that make it up:

Form

Once the plugin is installed, the first step would be to add a new form from the add new button. The first thing that appears is an example of a very simple form with the name, email, subject, message body and a submit button.

This form would be practically ready to be incorporated into any page or space where you need it within your website, although for many things something more advanced will be needed and that is where one of the best features of the CF7 plugin comes in, the large number of options and different fields you have.

Also indicate that with this plugin you can create an unlimited number of forms, as many as you want to meet all the needs of your website.

Email

In this tab there are options for both the mail you receive and the acknowledgment of receipt that your visitor receives.

If you are not using an smtp mail, the name of the sender is very likely to appear in the header as WordPress, since it is the default function that the CMS has assigned for emails.

– Additional headers: Another interesting option appears in the “additional headers” field, where you can add copies for different emails, both normal and hidden, adding the header “Cc:Email” for normal ones and “Bcc:Email” for hidden ones. You can create as many as you want as long as there is one address per line.

– Message body : In this tab you configure the message that will arrive, you can use text or html if you prefer. You can also use the following tags that you have previously configured [your-name] [your-email] [your-subject] [your-message], they are the fields that have been used to collect the information in the contact form itself.

– Additional options :

  • Exclude lines with empty email tags in output : Checking this box will not display empty fields in the form.
  • Use HTML-type content : Checking this box will recognize the HTML code if you have used it in the message, keep in mind that sometimes the mail server can interpret it as spam.
  • Attachments : Here you have to include the field tag used to upload the file.
  • Email 2 : To generate an acknowledgment of receipt, the functionality is the same as for email.

Messages

This tab simply has some predefined messages that you can modify for certain events, such as message sent successfully, message not sent, validation error and many other common cases.

Additional settings

In this last section, you can manually add additional settings with a code snippet, which leads to more advanced configuration settings. You can read more about this here .

Contact form customization

The Contact Form 7 plugin is ideal for creating simple forms, although if you want to use all its functions there is no intuitive interface to help you. Most things will have to be done manually and perhaps with some programming.

Sometimes, we need to establish some parameters that facilitate data entry or that provide more security or ease for the user.

Below you can see some examples reviewing the possibilities of Contact Form 7 in terms of customization in fields and configuration parameters:

add fields

The syntax for creating fields would be similar to this example to attach a file to the mail as seen above:

  • Field type: “file” 
  • Required field: “*” 
  • Field name: “file-995” 
  • Maximum file size (in megabytes) : “limit:20”
  • File type: “filetypes:jpg|png” 
  • CSS identifier: “id:file” 

For the rest of the fields, the syntax would be similar and it is normally created by filling in the fields that are requested, although it can also be created manually.

Add configuration parameters

Among the different parameters that come into play in a contact form, here are some examples expressed in characters that we can configure with Contact Form 7:

  • Width of the fields : size:50
  • Number of characters (max and min) : maxlength:80 minlength:5
  • Width and/or height of columns (only for text areas) : 60×30, 60x, x30

Let us now see carefully how we can configure these 3 parameters:

  • Field size and number of characters 

With Contact Form 7 you can limit both the size of the fields and the number of characters that are allowed to be written in the body of the message.

Simply, you have to indicate it in the following way:  [text* size:40 field-name maxlength:80 minlength:5]

This would create a text field with a width of 40 characters and typing limits of a maximum of 80 and a minimum of 5.

Another very interesting function is to add a character counter for messages so that the user can see how much text he has left to write.

According to the previous example, the syntax would be the following:  [text* field-name size:40 maxlength:80 minlength:5]  [count field-name]

Don’t forget to add the name of the field in this case “field-name” for the counter to work.

  • Width and/or height of the columns 

Although many times it cannot be done directly, the form fields support CSS, the IDs and classes are indicated when creating each field.

In this example that we discussed before « [file* file-995 limit:20 filetypes:jpg|png id:file] «, 2l «id» of the field would be «file».

Thanks to this, and with a little knowledge of CSS and HTML, you can create countless different layouts and looks.

Multiple columns with certain parameters can also be created for textarea fields with the following syntax:

  • 60×30 (width and height)
  • 60x (width only)
  • x30 (height only)

One of the following methods would be used:

  1. [textarea field-name 60×30]
  2. [textarea field-name 60x]
  3. [textarea field-name x60]

Many times the WordPress theme itself also has integration with Contact Form 7 (that is, the visual aspect of the form is the default one), which can cause certain parameters such as columns, height or size to not work. In that case, there will be no choice but to modify it in the theme itself.

And finally…

Once you have the contact form configured to your liking, another benefit of using Contact Form 7 is that you can copy the short-code (or abbreviated code) and add it to any of the pages that you want it to be displayed.