How was the talk "Improve your website: Forms in WordPress, functional and usable"

The numbers

Aimed at the talk: 49 people.
Assistants: 27 people.
It was held last September 17th.

Important: We remind you that we have retaked the tool Slack to organize as a group and to share the management of the meetup, specifically the channel we use is #wpalicante of Slack WordPress Spain. If you want to lend a hand, contribute ideas and become more active part of this community follow the instructions on the following page-> http://wp-es.es/slack/

The talk

Still with the hangover of the Wordcamp Valencia 2018, our colleagues Flavia and Joaquín put us a little to the day of what happened there and bring us their paper in Valencian lands for which we could not attend.

In general, we are told that a Wordcamp is like a large-scale meetup, where interesting presentations are given and topics of concern to everyone are discussed. Remember that WordPress is developed under a GPL license, which means that the software is free and therefore anyone can access and modify it as they wish. There is a large community of people involved who selflessly maintain plugins, themes, and forums. Remember that in the WordPress Spanish Forum You can include any questions or problems that have arisen and you will obtain answer in a short time of expert people who will help you selflessly. All you have to do is register on the page to post in the forum. If you only want to find a problem that has posted another user do not need to be registered.

Going back to the subject that concerns us, we share the Presentation of our Speakers With the summary of everything explained.

Here are some additional notes that may be interesting.

Plugin Overview

Gravity forms is a plugin that was born as a form generator and currently serves many more things, including for sale of Monoproduct (mini online shop) or surveys and exams.
It is paid, although we have to remember that what is paid is the support, not the software itself, which is under the GPL license, like any other software associated with WP.
It is very intuitive because it is formed by a multitude of "boxes" that are used with the simple gesture of clicking and releasing where you are interested in using it (drag & drop).
There are some boxes of input fields that are used to mount a template that another user can fill and from the displayed fields an entry is mounted on the web automatically. This is so that this user can add entries to the web without having to give publisher permissions. The entry would be generated in draft state and then you can accept it and publish it or discard it.
Allows conditional logic that is used to decide whether to display fields or others depending on a condition. For example, depending on the age you put in the corresponding field I show you a text for minors and a different one for the elderly.
It has add-ons, which are small additional packages that you can include in the plugin's base package to improve it. For example, there is one so that the form can be saved in PDF.
You can include actions at the time of confirmation (by clicking the Submit button on the forms). This implies that at that time you can
- Display a message in the form itself.
- Send the user to a new page with a summary or thanks.
- Send the user to another page on the Web.
All forms are stored in your own database, so not only do you have backup of all the generated forms, but being on your own server you can fulfill the GDPR.
The small online shop that can be mounted connects with the main payment gateways on the Market.

Case study

Joaquin and Flavia show us below a case study to see how you can improve a form that we have created with this plugin, based on the following exercise. First Joaquin develops a form for a hotel that asks to be able to make reservations of rooms with date start, date end and type of room allowing also to send to another user a gift ticket with a free night of hotel.

Step 1: Joaquín in action

Joaquin gets to work and prepares the form without taking into account the continent, only the Content. To do this you also need to add some improvements to the original plugin to perform the following actions. In the presentation you have the links to all the elements created as well as the necessary pieces of code:

We want the gift-generated coupon to have a unique identifier. To do this we need a plugin that generates It: GP Unique ID.
We have to add some code in the Functions. php. For this we have two options:
- Write directly to that file, with the consequent risk in case there is an error in the added code, and more if we have added more code previously.
- Use snippets, which are chunks of code that are added to Functions. php through a plugin. This allows you to quickly enable or disable each piece of Code. In addition, we can have collections of snippets that we can include in other instances of WP to our liking, creating a kind of library of interesting Codes. The plugin is code snippet.
Field Calculations. In our case it was necessary to calculate the number of nights between two Dates. This is added with a snippet.
We need to put some fields like ReadOnly, for example the one that saves the number of nights Calculated. If we let it play without changing the dates Calcularíamos then wrong the total price of the Reservation. This uses the Disable Gravity forms fields Plugin.
It is proposed to fill in the form in three steps or sections within the same sheet, one for the personal data, another for the reservation and the last of payment. It is allowed to pass data from one section to the next, for example the name of the user to then put text to the user with a custom comment with his name. This is done with codes that gravity forms assigns to the contents of each field temporarily until you click SEND. So we can use those codes to refer to the data already populated by the user.

Step 2: Flavia prints his personal touch on the project

Once Joaquin has mounted the skeleton of the form, Flavia gives us now a series of usability improvements endorsed by specialists in the field, in the form of vitamins for our form, as:

The user is vague by nature so it is better to remove the fields that are not really necessary or to join in one of those that separately are very complex (or too many in number). Example: we may need different billing data depending on the country of the User. If we put a lot of fields to fill for each country the form may become impracticable. It is better to put a single text-type field where the user writes all the data he needs to appear on the Invoice.
It is more pleasing to view to separate data by semantic groups.
Whether the groups are written on a single page/tab or left in several (one per Page) you have to be as specific as possible about the length of the form so that the user knows at all times how much is left to Fill.
- One option is to add a progress bar with percentage of advance, but that is usually quite abstract.
- It is better to even put steps with one tab per step, with your corresponding step number and clearly marking what step you are in, for example, typing the current step header in bold and the other Agrisados steps.
Humans read from left to right and/or from top to BOTTOM. When we are filling out a form it is more comfortable to use one of the two directions, therefore, as down you will have to go secure, it is better not to put more than one field per row. So let's put all the data one under the Other. We will only use the option of putting some field to the right if we want to draw the attention of the user by some circumstance. For example, the typical email confirmation. We put it to the right so that the user is aware that it is not a typo but we are asking the same field twice on Purpose.
We must direct the intention of the user as much as possible. If we have two buttons and we are interested that you click on one of them, that we will put big and that attracts the attention, and the other small and with format of link instead of button. For example, NEXT and Previous buttons. Which we want to click NEXT, leaving the option "previous" as a secondary button that does not seem even a button, just a link. To do this you can add appropriate CSS (you have it in the presentation).
There was recently a tendency to minimalism in the forms that led to the description of a field appeared within the field, where the user has to write then the data. This made that as soon as the user begins to write the description disappears and therefore can not later confirm if the information we have written is correct because we do not have the detail of what you had to write there.
- You have to re-include each field with a previous header that will make it clear what data to include and not miss.
- Also, you don't have to use the set Value property for a description because that's used for something else. Adding a description as the default value will not know which fields the user populated and which have our description by default.
- It is necessary to fill in the default values that are possible with the intention that is that option, ie, so that all the fields that interest us that have a fair value are not left at the mercy of the user. For example, in room type, we can dial by default with sea view, if it is a Costa hotel. We will not mark SUITE because it can be excessively economically speaking. You have to fill in with reasonable data.
You have to show the width of the field as tight as possible to the size of the text to be entered, so the user has more or less the idea of how much he has to write. This is done by adding CSS (in the presentation).
The required fields are no longer marked with asterisks. Studies have shown that it is more effective for the user to consider everything as obligatory and we expressly indicate which fields are optional by typing the word "optional" next to the appropriate field. This can be done with the "Gravity Forms: Remove required and add optional string to increase form submits" plugin.
Better if the errors are reported at the time of filling the field, to wait to press the SEND button to get all the problems and you have to go looking for the entire form where the field is wrong. This is arranged with the "Real Time validation for gravity forms" plugin.
It is necessary to strive for the integration of people with reduced visibility. To do this:
- Clearly point out the errors, not only with a red field, for example, but also with clear symbology.
- Add the messages as clearly as possible, especially when it comes to indicating failures.
- The width of the form must be between 500 and 700 pixels.

Other plugins and applications emerged during the chat:

Zapier: Automation Web Application. example, suppose a web of tastings, with each entry of form of tastings adds a record in an Excel in drive because we handled better with the Excel.
GP Unique ID— to generate unique identifiers.
Code Snippet: To save a collection of snippets (trozs for functions. php) that can be activated and deactivated quickly.
Disable Gravity forms fields— Disables the editing of fields in gravity forms so that the user cannot modify them.
Gravity forms: Remove required and add optional string to increase form submit: To remove the asterisk from the required fields and add the word "optional" to those who are.
Real Time validation for Gravity forms: Adds validations to each field in real time and solution hint.
Ninja Forms: The free alternative to gravity forms to create forms. It is better to Contact FORM7 because the latter is more difficult to use (through shortcodes) and does not save the forms that are generated.