Author: Yurii Bratchenko

Yura is a better football player than Messi. Yura is a better football player than Messi. Yura is a better football player than Messi. Yura is a better football player than Messi.
Posted on by Yurii Bratchenko

Filling out a significant form can be a tiresome process for users. Some of them don’t even complete the form as it is so time-consuming. 

Optimize the process by creating a multi-step WordPress form with a step indicator using the JetFormBuilder plugin and its features. This multi-step free WordPress plugin allows customizing a form and making it more user-friendly.

Let’s learn some tips on how to make the form more convenient for filling it out.

Upgrade the Form

  • Group fields logically — divide the form fields into coherent sections with the help of Form Break Field. Name these steps accordingly;
  • Use the progress bar — show a step indicator of completing the form to notify the user about the number of steps left until submitting the form;
  • Set visibility conditions — enable certain fields to display under the specified conditions;
  • Optimize the “Next/Submit” buttons — enable the controls to make the form more user-friendly.

As an example, we’ll create two forms that differ in the form break logic. One of them is made with just form breaks, while the other one implies conditional visibility.

Multi-Step WordPress Form

To add a form with the help of our multi-step WordPress form builder, proceed to JetFormBuilder > Add New.

jetformbuilder add new form

Give a title to the form. For instance, we create a Website Feedback form, so its name is the same.

There are three types of fields shown by default: Hidden, Text, and Action Button Fields. Feel free to delete them if they are unnecessary in your case.

We delete the Hidden and Active Button fields and extend a Progress Bar with some more Text Fields. Don’t forget to enable the Is Required option near desired fields to make completing a specific field obligatory.

It is the first logical part of the form, thus divide it with the help of the Form Break Field. 

Set a Field Label that will change the default name of the button. Pay attention that there is also a Label of progress option available, so fill this field in if you want to show the step labels below the progress bar.

Write a Validation message and navigate to the Advanced Settings to enable Prev Page Button and add a CSS Class Name if desired.

the first part of the website feedback form

The first segment of the form is ready. Form Break Field indicates that the part is complete, and the next section will be displayed after completing the first one. 

The second part of the form consists of the Progress Bar, two Action Buttons, a Radio Field, and one more Form Break Field. 

This time, we add Action Buttons that represent Prev and Next buttons and lead the user to the previous/next part of the form when clicked.

button action type dropdown

Also, we switch off the Enable “Next” Button toggle in the Form Break Field settings, as the buttons are already displayed above.

the second part of the website feedback form

After all the customizations, we can add one more part that will be the final before submitting a form. This time, we attach one more Progress Bar, Checkbox, Textarea, and Action Button Fields.

To change the last label of progress, we should add one more Form Break Field. By default, it will be shown as “Last Page.” So if you want to write your custom label, you can do it in the Form Break Field Block settings.

NOTE! If you want to make a step the last, check that you don’t have any other fields after the last Form Break Field.
the third part of the website feedback form

Please note that you can customize the fields with the help of the JetStyleManager plugin. Just click on the “brush” icon in the top right corner of the Gutenberg block editor screen.

jetstylemanager settings

Once you are done with all the customizations, click on the “Publish” button. Let’s add our form to the page and check how it looks.

Go to Pages > Add New or open one of the existing pages. Now we need to use a JetForm block. Choose a form that you have just created and customize its settings.

adding a multi step form to the gutenberg edited page
  • Fields Layout — choose how the label will be related to the bar. It can be either “Column” or “Row” options;
  • Required Mark — type a symbol that will be displayed near the required fields;
  • Submit Type — pick from the “Post Reload” and “AJAX.” The second option will not reload the page after submitting a form, while the first one will;
  • Enable form pages progress — toggle to add a step indicator to the form. It works as the Progress Bar field. However, this step indicator is displayed above all the fields. While the Progress Bar can be placed in any desired part of the form;
  • Additional CSS class(es) — put the supplemental CSS classes if needed.

When you are done with the editing, click on the “Publish” button. Now you can check the form on the front end.

multi step form on the page

The WordPress multi-step form is ready. If you want to make the form even more user-friendly, check the next steps to create a multi-step form with conditional logic.

Multi-Step WordPress Form with Conditional Logic

To build a multi-step form with conditional logic, head to JetFormBuilder > Add New. We show an example, while you can create any other form suitable for your needs.

jetformbuilder add new form

Name the form and delete the default Hidden, Text, and Action Button Fields if you don’t need them.

We delete the default fields and add one Radio Field. In this particular case, options will be filled in manually. Feel free to use other sources in the Fill Options From drop-down menu.

the main part of the multi-step form with conditional logic

Set the values while clicking the “Manage Items” button, as we may need them for implementing the conditional logic.

radio field manual options

This part of the form will be the main one. Depending on the answer given in the Radio block, the following fields will be changed. Let’s build this logic with the help of a Conditional Block.

We add Conditional Block to the page and place the Progress Bar, Checkbox, and Form Break Field inside.

Fill in the Label of progress in the Form Break Field settings to change the default Progress Bar label.

conditional block for the yes option

Set conditions by clicking on the Conditional Block.

conditional block button

Define conditions for the “yes” option.

conditional logic for the yes option

After adjusting all the Conditional Block settings, push the “Update” button.

The following part of the form is also placed in the same Conditional Block.

We add one more Progress Bar, Textarea, and Action Button Fields.

the second part of the conditional block for the yes option
NOTE! This time, change the Last Page Name of the Progress Bar in the Conditional block settings.
conditional block for yes option last page name

Let’s add one more Conditional Block for the “no” value.

To complete this part, we add the Progress Bar, Textarea, and Form Break Fields.

conditional block for the no option

Click on the Conditional Block to set the conditions.

conditional logic for the no option

Update the Conditional Logic by hitting the same-named button.

We finalize the form with the paragraph and the Action Button.

the second part of the conditional block for the no option

Don’t forget to change the Last Page Name in the Conditional Block settings.

conditional block for no option last page name

Once the form is fully completed, click the “Publish” button and go to the page where you want to place the form. We proceed to the default WordPress pages by going to the Pages > Add New. 

Place a JetForm block onto the page. Choose a newly created form in the similarly named drop-down menu and adjust all the following fields.

website feedback form on the gutenberg edited page

When everything is ready, update or publish the page and check out the result.

Once the “yes” value is picked, the form looks like in the picture presented below.

form on the front end yes option

If the “no” value is chosen, other fields are displayed.

form on the front end no option

Well done. Now you know how to build various WordPress multi-step forms using the JetFormBuilder plugin.

Posted on by Yurii Bratchenko

Use the WordPress Contact Form plugin to quickly build and place a custom contact form anywhere on the site.

Contents:

Contact forms serve to bridge the gap between website users and website admins/owners. They can help get more leads, expand the customer base, collect precious feedback, improve user experience, reduce spam emails, etc.

WordPress contact form is not that difficult to create. Using a WordPress form pattern, you will get a basic form layout in one click. It embraces default fields, but you can always add more if desired. Such a pattern can help you build a Sales, Request, Leads contact form, and make users subscribe via the contact form. 

  • Name. A required Text field for filling in the user name;
  • Email. A required Text field for filling in the user email;
  • Phone. A required Text field for filling in the user phone;
  • Preferred method of communication. A required Radio field with two options to choose from – “Email” and “Phone”;
  • Message. A Textarea field for inputting additional information, questions, comments, etc.;
  • Submit. A Submit field to submit a form. 

As Gutenberg has no options for creating forms, you can start to work with the JetFormBuilder plugin, which is entirely free. If you are not familiar with this plugin’s features, you can check JetFormBuilder tutorials on the Crocoblock YouTube channel.

Create a Contact Form

Navigate to JetFormBuilder > Add New. Although when you begin, the editor is not empty, some blocks appear by default.

Specifically, there are Hidden, Text, and Submit Fields. They are unnecessary, so it is possible to delete this content.

If you want to add some other content to the Contact Form, there are two ways to do it. You can either use Gutenberg Blocks or the JetFormBuilder plugin’s Patterns.

Patterns

The Pattern is a layout that you can edit and style to your liking. It can be used if you want to simplify work and save time.

Add a new block and click on “Patterns” near the Blocks tab to apply them. These patterns represent already created sections that can be attached to the page.

Firstly, we need to choose from the available types of patterns: Buttons, Columns, Gallery, Headers, Text, Query, and, if you have installed and activated the JetFormBuilder plugin, JetForms.

Let us find out about the last option — JetForms. In our case, we will remove all the default form blocks and use Contact Us Form Pattern. This pattern already includes some blocks.

contact us form pattern
  • Text Field – there are three of them reserved for Name, Email, and Phone accordingly;
  • Radio Field – allows to pick the Preferred method of communication;
  • Textarea Field – enter a custom Message here;
  • Submit Field – represents a regular “Submit” button.

Customize or delete these blocks without restraint. In fact, you can attach more blocks to the form or duplicate existing ones.

Any of these filed blocks have Is Required toggle if you need to make a particular field obligatory. However, all the other field settings can either repeat themselves or be different so customize them accordingly.

Text field

Let’s start with the Text Field Block Settings.

general text field settings
  • Field Label — a name visible to users that shows what kind of information this field requires. For instance, Name, Phone, or Password. It will appear above the field bar;
  • Form field name — a name that is used as an ID. Commonly it is similar to the Field Label. It should contain only Latin letters in lower case, numbers, hyphens, and underscores. Spaces are inapplicable, so if you want to write two words or more, divide them with hyphens or underscores;
  • Field Description — an extra explanation about how to fill in the information. It will appear under the field;
  • Default Value — the data you put here will be automatically placed in the field. It is used if the information is already available. For example, if the user is already logged in, the Default value can pull out their name to fill in the field. The user can change it if needed.
text field settings
  • Field Type — here, you can specify what this information stands for. The choice lies between “Text,” “Email,” “Url,” “Tel,” and “Password”;
  • Min and Max length — you can set values that will limit the input information;
  • Set Input Mask — the mask will set up a specific input format for the current field. When enabled, there is a possibility to choose a Mask Type, its Visibility, and Placeholder.
advanced text field settings
  • Placeholder — shows text in the bar until the user clicks on it; it can be an input data example. It differs from the Default Value as this data doesn’t fill in the bar;
  • Add Prev Page Button — this toggle is helpful if you use the Form Break Field. It allows a user to turn back to the previous page;
  • Field Visibility — some fields can be invisible for some users if you limit the field visibility – for all, only for logged in or not-logged users;
  • CSS Class Name — this field contains a CSS class name from which styles will be pulled. The styles can be written in the customizer.

Now let’s look at the Radio Field and its settings.

Radio field

The Contact Us Form Pattern that we have chosen contains one Radio Field called Preferred methods of communication. It, therefore, has two types — Email and Phone, that can be deleted if there is a need.

You can handle items directly from the editor page.

radio field manage items

You can also choose where you can pull the data from; it can be “Posts,” “Terms,” “Meta Field,” “Glossary,” generate it dynamically or input manually.

If you click on the “Manage Items” button, you can change, add new, delete, or clone existing options.

You can also enable switching the page when changing the items.

Message and Submit fields have almost the same settings as Text and Radio fields, so you are already acquainted with all the customization options.

JetForm Settings

We have discovered the customization options for the Contact Us Form Pattern. Now we will get familiar with the JetForm Settings. These are sited just near the Block Settings,

jetform status and visibility settings

This section allows you to apply general layout and appearance features. The settings will work for all the fields that you will add to the form. Let’s take a closer look at them.

form settings
  • Fields Layout — defines the correspondence between the field bar and the field label. When “Column” is chosen, the label is over the bar, and “Row” places the label and the bar in one row;
  • Required Mark — fill in this field to change the appearance of the required fields. If the field is empty, this mark will be represented with an asterisk symbol;
  • Submit Type — the action after clicking on the “Submit” button. You can either pick “Page Reload” or “AJAX” so that the page will not be reloaded;
  • Enable form pages progress — this toggle works in cooperation with the Form Break Field. The form progress bar will be added if you divide the form into parts and enable this toggle. It will display the part the user is currently on.
form break field example

Next are Captcha Settings. This tab contains only one toggle, Enable reCAPTCHA V3 FORM verification. All the details about how to add reCAPTCHA to a form you can learn from our video overview.

We also have a video about the next Post Submit Actions settings tab, so do not hesitate to check it out.

Let’s move on, and you will see General Messages Settings that are in charge of the messages displayed to the user in specific cases. For instance, you can type in the notification for users who haven’t filled in the required field.

Style settings

Gutenberg doesn’t have the styling options. However, you can still apply some styling to the Contact Form if you install the JetStyleManager plugin. To find out what customizations are available with this plugin, read our Gutenberg blocks styling overview.

Once you are done with all the styling and customizing, click on the “Publish” button.

Now you can add your Gutenberg Contact Form with the help of the JetForm block in the Gutenberg Editor. If you are using Elementor Page Builder, add your Elementor Contact Form by applying the JetForm widget.

Go to WordPress > Pages. Choose any page or create a new one. You can add a JetForm block and choose the form you have just created in the relevant field.

jetform form settings

As you may have noticed, the settings of the JetForm are pretty much the same as you have already applied while creating the form.

Pay attention that the form settings will override the JetForm block settings. For example, you can change Required Mark in the JetForm block settings into an exclamation mark, while the form settings will be set up to show a default asterisk symbol. As a result, the user will see an asterisk symbol near the required fields, as it will have more priority.

Except for the standard settings, you can style the Form Break Field block and Success and Error Messages using the JetStyleManager plugin.