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 comprehensive form can be a tiresome process for users. 

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

Let’s learn some tips for making the form more convenient to fill out.

Upgrade the Form

  • Group fields logically — divide the form fields into coherent sections with the help of the Form Page Break block. Name these steps accordingly;
  • Use the progress bar — show a step indicator to notify users about the number of steps left until completing 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 created two forms that differ in the form break logic. One was made with just form breaks, while the other implies conditional visibility.

Multi-Step WordPress Form

Our first form allows site visitors to leave a website review. It contains a header and three pages. The first page is the “Start Page,” where users can fill out contact information. The second page is called the “Second Page,” where users will rate the website using the Radio Field. The third step is named the “Last Step,” where users can extend their feedback. At the top of each page is a required field for inputting the email address.

multi-step form made with jetformbuilder

To add a multi-step WordPress form, proceed to JetFormBuilder > Add New.

Give a title to the form. For instance, we created a Website Feedback form with the corresponding name.

In the JetForm tab of the right sidebar, scroll down to the Form Settings section and toggle on the Enable form pages progress switcher. With the help of this switcher, a progress bar will be displayed on top of each step in the form.

enable form pages progress in jetformbuilder form

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

We deleted the Hidden Field and kept the Text Field. In this field, the user is expected to enter the email address, so we named the field “Email” and selected the “Email” FIELD TYPE. Above the Text Field, we added a Paragraph block and entered a message encouraging users to leave their email addresses. This part of the form serves as a header and is visible on every page of the form. You can put these two blocks inside the Columns or Flexible Container blocks to have more control over the layout of this section.

Next, we added the Form Page Start block, which indicates the start of the first form page. Everything above this block is regarded as a header. 

adding header to multi-step form in jetformbuilder

Don’t forget to enable the Is Required option near desired fields to make them mandatory.

required email field in jetformbuilder form

After that, we started building the first page of the form. We added a Columns block under the Form Page Start block. In each column, we added a Text Field where the user can enter the name and surname.

It is the first logical part of the form, and thus, we divided it with the help of the Form Page Break. 

In the Form Page Break block settings, the Enable “Next” Button toggle can be enabled, and the NEXT BUTTON LABEL can be set to change the default name of the “Next” button. In this first Form Back Break block, we didn’t use the “Back” button, so we kept the Add Prev Page Button switcher disabled. The LABEL OF PROGRESS option can be filled in if you want to show the step labels below the progress bar.

Also, you can write the VALIDATION MESSAGE, which will be displayed if users don’t fill out the fields properly.

using form page break block in jetformbuilder

The first segment of the form is ready. The Form Page Break 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 Radio Field and one more Form Page Break block. Instead of the Radio Field, you can use the Advanced Choices Field block to make its layout more appealing.

This time, we enabled both the “Next” and “Prev Page” buttons to lead users to the previous or next part of the form when clicked.

form page break settings

After all the customizations, we added one more part, which is the final, before submitting the form. This time, we put a Checkbox Field and Textarea Field blocks. Then, we placed a Columns block with two columns, and each column contains an Action Button. The first Action Button allows users to go to the previous step in the form, while the second one allows them to submit the form.

action button block that allows you to go to the previous step in the form

Below, we placed the last Form Page Break block.

In the Form Page Break settings, we turned off both the “Next” and “Prev Page” buttons and set only the “Last Page” LABEL OF PROGRESS.

configuring the last step of the multi-step form in jetformbuilder
NOTE

If you want to make a step the last one, ensure that you don’t have any other fields after the last Form Page Break block.

Note that you can customize the fields in the WordPress block editor with the help of the free JetStyleManager plugin. Also, if you display the form using the JetForm widget of Elementor, you can customize the fields in the JetForm widget Style settings.

Additionally, you can use the Advanced Form Validation instead of the default validation to add custom rules and error messages for each form field so users can fill in fields only in the suitable format.

Once you are done with all the customizations, click the “Publish/Update” button. 

Before placing the form on the page, navigate to the WordPress Dashboard > JetFormBuilder > Settings tab and adjust the settings available for multi-optional forms in the Form Accessibility section.

settings for multi-optional forms in jetformbuilder

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 or templates. Now, we need to use a JetForm block. If you add the form in Elementor, use a JetForm widget. In other page builders, you can use a shortcode to display the form.

Choose a form that you have just created and customize its settings:

adjusting the JetForm block in the WordPress block editor
  • FIELDS LAYOUT — choose how the label will be positioned relative to the input field. Select either the “Column” or “Row” option;
  • REQUIRED MARK — type a symbol that will be displayed near the required fields. By default, it is an asterisk;
  • FIELDS LABEL HTML TAG – here, you can select the HTML tag that will represent the field’s label. The available options are “DIV” and “Label”;
  • SUBMIT TYPE — pick from the “Post Reload” and “AJAX” options. 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. Keep this option disabled if the step indicator is already enabled in form settings;
  • ADDITIONAL CSS CLASS(ES) — put the supplemental CSS classes if needed.

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

multi-step form made with jetformbuilder

Note that when going to the next page, the email field stays on top of the page.

testing multi-step form made in jetformbuilder

The WordPress multi-step form is ready. To make the form logic more complex, check the next chapter about creating 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 the JetFormBuilder > Add New tab. 

jetformbuilder add new form

We provide an example, while you can create any other form suitable for your needs.

We named the form and deleted the default Hidden, Text, and Action Button Fields since we don’t need them. 

The goal was to create a form to gather user feedback about the website. The form consists of three sections: the first to enter the contact information, the second section to enter the positive feedback, and the third multi-step section to enter the negative feedback. The second and third sections will appear conditionally – if the user decides to share the positive feedback, the second section will be displayed; if the feedback is negative, the third section will appear. To let users choose which feedback they want to share, the first section will contain a Radio Field.

overview of the multi-step form with conditional logic

Let’s build the first section. We added three Text Fields for user email, name, and surname, and one Radio Field. The fields can be separated into columns with a Columns block if needed. 

In this case, the Radio Field options were filled in manually. Feel free to use other sources from the Fill Options From drop-down menu.

building the first section of the multi-step form with conditional logic in jetformbuilder

We hit the “Manage Items” button and set the values as “yes” and “no,” as we need them to implement the conditional logic.

radio field manual input options

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

We added a Conditional Block to the page. Inside, we built the content of the second section that should appear if users select the “yes” answer in the Radio Field above. This section is divided into two steps.

Firstly, we added three blocks inside the Conditional Block: a Progress Bar, a Checkbox Field, and a Form Page Break block. These blocks constitute the first step in the form, where users need to fill the Checkbox Field. 

The Progress Bar block doesn’t require any configuration. In the Checkbox Field block, you can enter the options of your choice. 

Let’s take a closer look at the Form Page Break block settings. We filled in the LABEL OF PROGRESS in the Form Page Break settings to change the default Progress Bar label for the first step, hit the Enabled “Next” button toggle, and set a label to this button.

form page break block settings

After we finished building the first step of the form, we proceeded to the second step. Below the Form Page Break but still inside the Conditional Block, we added a Progress Bar, a Textarea Field, and a Columns block with two columns. In each column, we inserted an Action Button block.

The left Action Button will lead users to the previous page, and the right Action Button will submit the form.

action button block configuration

Now, we can move on to configuring the Conditional Block itself.

Firstly, we set the label for the last step of this multi-step section in the LAST PAGE NAME input field.

changing last page name label in conditional block settings

Then, we hit the “Conditional Logic” icon to set conditions for the Conditional Block.

conditional block button

We defined conditions for the “yes” option: we selected the Radio Field label from the FIELD drop-down menu, chose the “Equal” OPERATOR, and set the “yes” VALUE TO COMPARE.

building conditional logic for yes option

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

Let’s add one more Conditional Block for the “no” value. If users decide to leave negative feedback, the form will present the content of this Conditional Block.

To complete the first part of this multi-step section, we added a Progress Bar, Textarea Field, and Form Page Break blocks.

adding page breaks inside the conditional block of jetformbuilder

We duplicated the Form Page Break block settings from the previous setup.

To build the second page in this section, we added a Progress Bar, a Paragraph, and two columns with Action Buttons, the same as previously.

configuring last page of the multi-step section in form

We clicked the Conditional Block to set the LAST PAGE NAME and conditions.

building conditional logic for no option

We hit the “Conditional Logic” icon to open the corresponding pop-up.

We defined conditions for the “no” option: we selected the Radio Field label from the FIELD drop-down menu, chose the “Equal” OPERATOR, and set the “no” VALUE TO COMPARE.

We updated the Conditional Logic by hitting the “Update” button.

Note that you can customize the fields in the WordPress block editor with the help of the JetStyleManager plugin. Also, if you display the form using the JetForm widget of Elementor, you can customize the fields in the JetForm widget Style settings.

Additionally, you can use the Advanced Form Validation instead of the default validation to add custom rules and error messages for each form field so users can fill in fields only in the suitable format.

Once you are done with all the customizations, click the “Publish/Update” button. 

Before placing the form on a page, navigate to the WordPress Dashboard > JetFormBuilder > Settings tab and adjust the settings available for multi-optional forms in the Form Accessibility section.

settings for multi-optional forms in jetformbuilder

We created a default WordPress page by going to the Pages > Add New tab.

Next, we placed a JetForm block onto the page. We chose a newly created form in the similarly named drop-down menu and adjusted all the following fields:

website feedback form on the gutenberg edited page
  • FIELDS LAYOUT — choose how the label will be positioned relative to the input field using the “Column” or “Row” options;
  • REQUIRED MARK — type a symbol that will be displayed near the required fields. By default, it is an asterisk;
  • FIELDS LABEL HTML TAG – here, you can select the HTML tag that will represent the field’s label. The available options are “DIV” and “Label”;
  • 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. Keep this option disabled if the step indicator is already enabled in form settings;
  • ADDITIONAL CSS CLASS(ES) — put the supplemental CSS classes if needed.

When everything is ready, we hit the “Publish/Update” button and checked out the result.

Once the “yes” value is picked in the radio field, the form displays one set of fields.

first page of multi-step section made in conditional block of jetformbuilder

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

testing conditional block with multi-step form content inside

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.