Saltar al contenido

Creating Forms with Contact Form 7

febrero 2, 2020

 

forms provide a means for users to enter data on a website, filling or selecting different fields that can be of different types, such as text fields, radio buttons, drop-down lists, etc.

WordPress does not include any specific tool for creation and management of forms , we should create our manually on the page or post where you want to appear, using the corresponding HTML tags for forms and different fields.

Some topics or builders may include basic tools for generating and managing forms, but in general, if we need to have forms with all possible variety of fields, without the hassle of editing HTML or rewrite if we use it on multiple pages, we use a plug forms.

In this regard, the plugin Contact Form 7 offers one of the most versatile and simple solutions to the market.

requires no configuration or additional integration (eg no database) and within a few minutes allows us to design forms all complex or large we need and integrate directly into any position on our pages or posts.

In this article, we will see how you can create forms with Contact Form 7 and how to customize and configure to integrate them into our website.

Table of Contents

  • Main features of Contact Form 7 Operating Scheme Contact Form 7
  • Operating Scheme Contact Form 7
  • Management forms with Contact Form 7 Creating and editing forms Example setting a field in
  • form

  • Creating and editing
  • forms

  • configuration example of a field in the form
  • setting the email
  • Conclusions
  • operating Scheme Contact form 7
  • Creating and editing forms
  • configuration example of a field in the form

Main features of Contact form 7 Contact form 7

with more than 5 million active installations worldwide, it is a or more plugins used on websites with WordPress. There are two reasons for this popularity:

  • Its simplicity of use, which makes is at the fingertips of any user who knows how to use WordPress and administration panel.
  • Its versatility, which allows to create any form you need, both in terms of number and type of fields and to integrate it into the pages. web

Its main features are:

  • Create and manage multiple contact forms.
  • Easy customization of the form fields.
  • Availability of multiple field types: text, number, email, URL, telephone number, date, text area, dropdown, radio buttons, checkboxes, acceptance, question, recaptcha, storage and transmission.
  • Using HTML tags to set the content of the mail.
  • Inserting forms on any page or post via shortcodes.
  • Style customized through CSS.
  • Multiple configuration options e-mail, messages and recipients.
  • Possibility of files incorporate email sent with the data from the form.
  • Compatible with anti-spam plugin Akismet to filter spam comments, sending email with AJAX and CAPCHA control.
  • technology extensions to add additional functionality (for example, a technology editor forms with drag-and-drop).

Operating Scheme Contact Form 7

Before getting to know how to configure and use this plugin, let’s review first how we operate it from the moment we will create a form until the data entered by the user are at our disposal:

Unlike other plugins forms, Contact Form 7 does not store the data entered by the user in a database, but sends it to the email address we have indicated.

Therefore, management and analysis of these data alone we can do from our email client application without possibility of using advanced analysis tools database; for example, for statistical analysis if surveys or to analyze global data users.

Following points this scheme of operation, the following video shows how to install and create our first contact form with Contact Form 7:

Management Forms with Contact Form 7

We have seen in the previous video the entire process of creating, configuring and using a contact form with contact form 7, and the configuration of the email that we would receive the data entered by a user and the use of style sheets for design of the form.

This section will describe in more detail the process of creating and configuring a form that we can use for our reference.

Once installed and activated Contact Form 7 (which is done in the same way as any other plugin), Contact Form 7 creates the following option in the menu of WordPress:

through the options in this menu can:

  • View a list with contact forms they are already created for editing. In this list the name of the form is displayed, as shown on the website where it is placed, the shortcode to be copied on the page or post to insert the form in that position and the author and the last date of modification of this form:

  • Add a new contact form. Through this we will all forms management (creation and modification) of the content of emails with the data entered by the user in the form, and messages interaction Contact Form 7 with the user after pressing the button:

  • Integrate Contact Form 7 two services: Constant Contact email marketing tool to manage user subscriptions through a form; and reCAPTCHA, Google’s free tool to prevent spam on forms:

creating and editing forms

When selecting a form listing form or give the option to create a new one, the following screen is displayed:

Consider the meaning and role of each of the areas identified in the image above:

  • 1. Types of fields of the form. In this bar you can select what information the user must enter in each field. According to the chosen type (such as number, date or telephone), Contact Form 7 will perform the timely validation that the data entered is of that type and is correct (eg date format) .In case of any errors in this validation It displays an error message to the user.
  • Tab 2. Edit the form. This tab will edit and configure the fields and their type (text, number, date, etc.) to be included on the form. Each field will be associated with a label or name so we can reference them when setting up the e-mail.
  • 3. Setting email. Here the content of the message is set to Contact Form 7 will send us email with the data entered by the user in the user, using the labels assigned to each field in the edit tab of the form.
  • 4. Configuring warning messages. Contact Form 7 has a collection of messages to inform the user of any event when you press this button to send or accept data from the form. In this tab you can edit these messages to suit our style of writing.
  • 5. Additional settings. Through this tab you can configure the behavior of Contact Form 7 in certain situations or for testing, so you rarely use. Here are detailed what might be these settings.
  • 6. Area editing the form. In this text area indicate each field in the form, surrounded by
  • 7. Title of the contact form. A short text that allows us to easily identify the form and its mission when displayed in list form. This title is not displayed on the website, but only serves so that we can identify quickly and easily.

The fields are displayed in the order in which the write in the editing area of ​​the form, to insert it, just need click on the type of field you want to insert, making sure the cursor is in the position where we want is displayed.

A Pressing the button field type, a dialog box, similar to all field types shown as follows:

Consider the role and significance of each item in this dialog box:

  • Type field, we must make if we want it mandatory that the user to enter data or select this field to send it.
  • type field, which should make it mandatory if we want the user to enter data or select this field to send it.
  • type field, which should make it mandatory if we want the user to enter data or select this field to send it.
  • name is the label we use to identify and use the content of this field in the email that we send Contact Form 7.
  • name is the label we use to identify and use the content of this field e-mail we send Contact Form 7.
  • name is the label we use to identify and use the content of this field in the email that we send Contact Form 7.
    default

  • to indicate If this field is already displayed with a default value, without having to enter the user, and what will be.
  • default value to indicate if this field is already displayed with a default value, without having to enter the user, and what will be.
  • Default to indicate if this field is already displayed with a default value, without having to enter the user, and what will be.
  • Use this text as a marker of the field, means that this default will act as instructions or warning to the user what to enter.
  • Use this text as a marker of the field, means that this default will act as instructions or warning to the user what to enter.
  • Use this text as a marker of the field, means that this default will act as instructions or warning to the user what to enter.
  • This field requires the name of the author, is used for integration Contact Form 7 with Akismet, the user is identified to edit this field the anti-spam plugin to force.
  • This field requires the name of the author, is used for integration Contact Form 7 with Akismet, the user is identified to edit this field the anti-spam plugin to force.
  • attribute ID and attribute class, use this field to integrate with the design or functionality of our website, indicating an ID or a class name (for design styles).
  • attribute ID and attribute class, use this field to integrate with the design or functionality of our website, indicating an ID or a class name (for design styles).
  • This field requires the name of the author, is used for integration Contact Form 7 with Akismet, the user is identified to edit this field the anti-spam plugin to force.
  • Attribute ID and attribute class, use this field to integrate with the design or functionality of our website, indicating an ID or a class name (for design styles).

Some field types include Additional optional configuration :

  • Date, if we want to have a range of valid dates.
  • Date, if we want to have a range of valid dates.
  • Date, if we want to have a range of valid dates.
  • menu / drop-down list to indicate the items it contains and whether you can make multiple selections.
  • menu / drop-down list to indicate the items it contains and whether you can make multiple selections.
  • menu / drop-down list to indicate the items it contains and whether you can make multiple selections.
  • check boxes and radio buttons, to indicate the various verification options / selection and if they are exclusive.
  • check boxes and radio buttons, to indicate the various verification options / selection and if they are exclusive.
  • check boxes and radio buttons, to indicate the various verification options / selection and if they are exclusive.
  • Questionnaire to indicate the pair question / answer must respond and hit the user.
  • Questionnaire to indicate the pair question / answer must respond and hit the user.
  • file to indicate the maximum size and the types of files that the user can attach to the field.
  • file to indicate the maximum size and the types of files that the user can attach to the field.
  • Questionnaire to indicate the pair question / answer must respond and hit the user.
    File

  • to indicate the maximum size and the types of files that the user can attach to the field.

All forms must have a field (button) on the type «send» , since it allows the user to send the data you entered on the form.

As we selecting and filling these different settings field in the text box below, next to the «Insert» button will generate the text to be inserted into the text area configuration of the form this field.

configuration example of a field in the form

To better understand how to create and edit form fields, see the concrete example for a form. Let’s create a text field type with the following characteristics:

  • type required field.
  • Name: Last Name.
  • default value: «Enter your last name» to be used as a marker field.
  • not integrated with Akismet.
  • With attribute-id and name-class.

The setting for this field would be this:

and the text that should be inserted in the text area configuration form (which is also shown in the image above) would be:

When you press the «insert» button, this text will automatically appear in the location where we had the cursor before selecting the type of field, along with the label that is placed next to the field in the display of the form ( «Your last name (required)») and between the

Now we just have to copy the shortcode assigned to this form on our America’s yellow pages ao post:

And now we enter the browser to verify that the form is displayed correctly on the page:

Setting the email

to set up email, we must remember the identifiers of the fields we have on our formulary. In the example we saw in the previous section, the field identifiers were: Surname, your-email, your-subject, your-message.

These identifiers, enclosed in brackets, the use to the state the content of each area of ​​the email you send us Contact Form 7 in the «Email» tab, as shown in this picture:

Let’s see what information should or can enter in each of the red boxes image:

  • 1. must contain the e-mail address to which Contact form 7 must send the data entered on the form.
  • 2.
    will be the email address sender. You can match the «To» address. 2.
  • will be the email address sender. You can match the «To» address.
  • 2.
    will be the email address sender. You can match the «To» address.
  • 3. Subject will be the text to be displayed in the subject of mail sent and, in this case corresponds to the field with your-subject identifier.
  • 3. Subject will be the text to be displayed in the subject of mail sent and, in this case corresponds to the field with your-subject identifier.
  • 3. Subject will be the text to be displayed in the subject of mail sent and, in this case corresponds to the field with your-subject identifier.
  • 4. Additional headers (cc, bcc, reply-to). Optional field, where we can send if mail is sent with a copy ( «cc»), blind copy ( «Bcc») or an e-mail response ( «reply-to»). Normally will «reply-to [your-email]» if we want to answer directly to the user who has filled out the form.
  • 4. Additional headers (cc, bcc, reply-to). Optional field, where we can send if mail is sent with a copy ( «cc»), blind copy ( «Bcc») or an e-mail response ( «reply-to»). Normally will «reply-to [your-email]» if we want to answer directly to the user who has filled out the form.
  • 4. Additional headers (cc, bcc, reply-to). Optional field, where we can send if mail is sent with a copy ( «cc»), blind copy ( «Bcc») or an e-mail response ( «reply-to»). Normally will «reply-to [your-email]» if we want to answer directly to the user who has filled out the form.
  • 5. Body of the message. In general, in the body of the message we will include the other fields, with additional text for easy reading. In this case, the surnames of the user ([Last Name]), email ([your-email]), the subject ([your-subject]) and message ([your-message]) entered by the user is indicated .
  • 5. Body of the message. In general, in the body of the message we will include the other fields, with additional text for easy reading. In this case, the surnames of the user ([Last Name]), email ([your-email]), the subject ([your-subject]) and message ([your-message]) entered by the user is indicated .
  • 6. Attachments. If we had included a field to attach files, here we would introduce their identifiers.
  • 6. Attachments. If we had included a field to attach files, here we would introduce their identifiers.
  • 5. Body of the message. In general, in the body of the message we will include the other fields, with additional text for easy reading. In this case, the surnames of the user ([Last Name]), email ([your-email]), the subject ([your-subject]) and message ([your-message]) entered by the user is indicated .
  • 6. Attachments. If we had included a field to attach files, here we would introduce their identifiers.

With this configuration, suppose a user enters the following data in the form and click the «Send» button:

the email would receive would be the next, where we see that each identifier fields has been replaced by the data entered on the form:

Conclusions

contact forms provide a mechanism for, first, that the users of our website they can communicate with us and, second, we can ask specific information that interests us about them.

are, for example, the essential tool for a user signs up for a newsletter subscription.

The content manager WordPress does not include any support for forms, beyond the possibility, for ourselves, edit the HTML code of the pages or posts HTML and style tags to insert the form, which is quite cumbersome and difficult to maintain.

The plugin Contact Form 7 facilitates generation and management of forms a website in WordPress, with which you can configure both forms as mail messages sent with the data entered by the user.

In this regard, the plugin does not have the ability to save on database.

Once generated a form and the message data for email, Contact Form 7 can use a shortcode with the identifier of the form to insert it into the page or post you want, and we can set it centrally from the area management Contact Form 7.

Contact Form 7 allows you to create forms with multiple types of fields, but not enough for what we need on our website or if you want some additional feature, has a extensions library that extend the plugin with new features and settings.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

SEO and Digital Marketing