Create contact forms in WordPress

In this guide we will show you how to easily create a powerful contact form using the WP Fluent Forms plugin.

There are excellent reasons to use WP Fluent Forms: in addition to satisfying most of the requirements in its version free, it is flexible, easy Y powerful. In this note we will see its strongest points, in addition to We are going to teach you how to create a form in WordPress step by step.

Installing a new plugin in your WordPress

First, please go to Plugins and click Add new as we show you in the screenshot below:

On the next screen, you can use the Plugin Finder to quickly install it. Type 'wp fluent forms' in the field of the Keyword and wait for WordPress to return the correct plugin. click on Install Now.

Once installed, press the button again (it will change from 'Install Now' to 'Activate').

Note: it is not necessary to install the Fluent Form plugin if you have contracted our Managed WordPress hosting service because it includes the full PRO version.

Our first form

Once the plugin is activated we can start creating our new form.

To do this, click on the 'New Form' option in the corresponding section of your WordPress tools menu.

The first pop-up window that we will see allows us to choose a template from the outset (template in English). Although this is useful and allows us to save time, the reason for this guide is precisely to learn how to make a form on our own. Creating a new one from scratch is the way to get familiar with the practice so that we can create as many forms as we need and exactly how we need it..

Therefore, we will click on 'create a blank form' (or create a blank form),

After a success message, we will see the following screen.

The first thing we will do is give our form a name to identify it from others that we may eventually create. It is also the name by which we will invoke it on our site.

Let's click on the link here marked with orange:

After clicking on the indicated area, a pop-up window will allow us to place the name we want. Let's not forget to click on the blue “Rename” button to save the changes.

The indications in green with their arrows are visual instructions that this plugin gives us: it is communicating to us that the way to create a form is by dragging and dropping elements (for those familiar with Elementor, Gutenberg, or the like, this works the same). What elements will we use? Well, those that we mark with an orange rectangle.

The elements marked in orange make up what in Fluent Forms are considered general elements (the most used, or typical of a form). For example: field to enter Name, Email, a Simple Text (for example, a comment that our visitors wish to complete, or a specification). We also see that there are other more advanced options, but let's start at the beginning: we are going to drag and drop our first element, Name Fields (field for Name and Surname).

So:

After dropping, we see that our fields for First Name and Last Name have been added to the (until recently empty) template of our new form.

In addition to that, a window is enabled to better configure our form. For example, it is possible to change the identification of this section, which is currently called 'Name', to 'Name' by rewriting in the field indicated below.

Even more important is translating into Spanish the fields that our visitors will eventually complete. Let's display the corresponding options as we indicate with orange in the lower screenshot.

Once these options are displayed, we can modify the description of the fields that our visitors will see when entering the form to contact us. In the following screenshot we mark the fields and their corresponding influences in our form.

We consider the First Name and Last Name fields to be mandatory. Every time we check an option like 'required' (required), we will prevent the submission of the form when our eventual user does NOT complete said field.

We can decide which fields are required or not simply by checking And it is either No (yes or no) next to the option 'required'.

In the countryside 'ErrorMessage' We can write a personalized message, the same one that the person who intends to send the form will receive without having completed said field. In the example, it is enough for us to inform you that this information is required ('required field').

After this step, let's return to focus on the available tools to continue adding fields. Let's click on the link indicated below:

Do you think we add a field so that our visitors can enter their email address? Of course, that's important. We will do it drag and drop again.

Dropping the 'Emal Address' element below the First Name and Last Name fields will result in the following:

Let's customize the field by clicking here:

Then we will type accordingly:

Repeating these operations is how we can add additional fields and customize them to our liking.

When we are satisfied with our form, having all the fields that we need our users to complete, we will click on the 'Save form' button.

Important note: it can be tempting to make a very complete form to collect as much data as possible about our users/customers. However, there is an indirect relationship between the number of users who complete a form and its length. Namely: the more data we request from our visitors, the greater the probability that they will not complete the information.n. This is called 'bouncing', and it is unwanted. Therefore, we recommend that you really think about what is the real essential data that is needed for a customer database, for a registration or for a mere comment on our site. Less can always be more.

Let's keep going:

All forms created will be assigned with an identification code, and what is called a 'shortcode'. The shortcode (or 'shortcode') is WordPress' way of allowing us to 'invoke' some element anywhere on our site (in this case, the element is the created form).

Let's locate the shortcode of our form:

Clicking on the area indicated in the upper screenshot automatically will copy the shortcode (namely,

) to the clipboard of our operating system.

thanks to that shortcode, we can 'paste' our form wherever we need it (whether inside an HTML element in Gutenberg, Elementor, or on top of the HTML code itself).

If you have any questions, please do not hesitate to write it in the comments. We are here to help you.

Remember that the Fluent Form plugin in its PRO version is included in our Managed WordPress service.

We hope you have enjoyed the guide and learned from it to be able to make your own forms from now on. Thank you for reading.