Develop and implement a WordPress booking form letting users make online reservations fast and easy.

Contents:

Booking forms allow business owners to streamline the online booking routine. Add a multi-step WordPress booking form to the website for all booking requests to land in the same place. 

A dedicated booking form can be used to arrange a flight reservation, a room reservation, hotel accommodation, and more. To create a WordPress simple booking form, you’ll need the JetFormBuilder Pattern and some time. Customize the form fields and add a payment gateway to it if necessary.

Step 1 – General information

  • Choose Your Stay. A Select field for choosing the desired location;
  • Number of Nights. A Select field for picking the number of days to stay;
  • Check-in Date. A Date field for filling in the arrival day;
  • Time. A Time field for filling in the arrival time; 
  • Price per Night. A Range field with prices per night;
  • Kind of Trip. A Checkbox field for indicating the journey type;
  • Children. A Radio field to submit the number of children;
  • Extra Services. A Checkbox field for picking additional services;
  • Total Price. A Calculated field with the set formula to calculate the total price;
  • Next/Previous button. A Form Break Field that splits form into steps.

Step 2 – Personal information

  • Name. A required Text field for filling in the customer’s name;
  • Last Name. A required Text field for filling in the customer’s last name;
  • Phone. A required Text field for filling in the phone number; 
  • Gender. A Radio field for indicating the customer’s gender;
  • Additional Information. A Textarea field for providing extra details about the booking;
  • Next Guest. A Repeater field for submitting the +1 guest’s details;
  • Next/Previous buttons. A Form Break Field allows you to switch between the form steps.

Step 3 – Additional information

  • Leave a Comment. A Textarea field for providing extra details about the booking;
  • Choose File Button. A Media field to upload additional files if needed;
  • Submit. A Submit field to submit a WordPress simple booking form.

Building an online booking system is a multi-structured task. Needless to say that in this situation, you may want the user not only to look at the available booking options but also have a possibility to reserve preferred apartments. That’s why you may like WordPress Booking Form Pattern from the JetFormBuilder plugin.

Create a new form

Begin the work from JetFormBuilder > Add New and give a name to the form.

adding a new booking form

You can delete the default Hidden, Text, and Submit Fields. We don’t need them as we will work with Pattern that already includes other essential fields for booking.

Place a Booking form pattern

The Pattern is a layout that can be customized and styled up. It includes fields that can likely be used to meet specific needs. 

Although mind that to style the form, you may need to install the JetStyleManager plugin. It will allow you to apply any desired changes to the form appearance.

Navigate to adding the new block by clicking on the “Plus” icon on the top left side of the WordPress Editor. Open the Patterns tab and choose the “JetForms” option from the drop-down menu. Find and place the Booking Form on the page.

attaching a booking form pattern

This pattern comprises three parts. Let’s take a closer look at each of them and the inserted fields.

Above all the sections, there is a Hidden Field that the users will not see. Apply it if you need to use the data for calculations.

general information section

General Information consists of the following fields:

  • Select Fields allow customers to select the type and duration of stay;
  • Date Field — set for check-in date input;
  • Time Field — fixes the time of the guest arrival;
  • Range Field lets users set out the wished price per night;
  • Checkbox Fields — for several options to choose from, responsible for kind of a trip and extra services provided;
  • Radio Field gives options where only one can be picked. In this case, it is to inform if the user is traveling with children;
  • Calculated Field — counts the total price drawing attention to the previously input data;
  • Form Break Field divides form into parts that are displayed separately. Click on it and change its label of progress to show it under the step indicator.
personal information section

Personal Information is responsible for the guest data input and encloses such fields:

  • Text Fields — for the personal identification details needed for the execution of entrance;
  • Radio Fields — define the gender of guest;
  • Textarea Field — additional information a user would like to add;
  • Repeater Field provides the form with a repeatable block that will double itself when the user clicks on it, works for adding guests that travel together with the user filling out the form;
  • Form Break Field enables a user to proceed to the next part of the form.
additional information section

Additional Information is the last part of the Form Pattern that involves a couple of other fields:

  • Wysiwyg Field admits a user to type the desired styled information or some other content;
  • Media Field — set for uploading some pictures needed for the convenient booking. For instance, it can be a photo of required documents;
  • Submit Field — the final point on the way to sending a WordPress Booking Form.

Edit or delete all the desired fields. It is possible as they are not preset.

Work on the JetForm settings

JetForm Settings are capable of changing the layout of the whole form.

booking form jetform settings
  • Form Settings embrace the following:
  • Fields Layout — defines the relation of the field label and the field bar. Choose “Column” if you want to put the label above the bar, and “Row” if one line is desired;
  • Required Mark — lets you adjust a symbol that is used to determine the necessary fields;
  • Submit Type — enables setting a “Page Reload” or “AJAX” option that will not reload the page;
  • Enable form pages progress — if you work with the Form Break Field you can add a step indicator to the form parts.
booking form additional jetform settings
  • Captcha Settings can also be set up to meet all the requirements. You can learn about it in detail from our reCAPTCHA video overview.
  • Post Submit Actions are the most vital part of the booking form creation process. They define in which way information will be processed after the form submission.

The first action we will set is “Send Email.”

send email post submit action editing

Edit this action according to your requirements. If you want to send a reply to the customer, you can also add an Email Text Field to the form. When you have finished editing, push the “Update” button.

One more post-submit action that can be added to the booking form is “Insert/Update Post,” which creates or edits the existing post type to insert data to the post automatically when a customer fills in the form. 

To adjust this section properly, you may need to install and activate the JetEngine plugin. It will help to create meta fields for all the input data.

Create meta fields for all the fields that require input information and click on the “Add Meta Box” button. Once you are done, return to the form and open the “Insert/Update Post” Submit Action edit window.

insert update post submit action editing

Select Post Type where the data will be inserted, its Status, and Fields Map. The last tab is accountable for the meta fields you have just created. Type the Meta Field Names in the corresponding fields. Update the action.

  • Preset Settings. You may also enable the preset setting for this Booking pattern to add recurring data. Thus, the form would be more user-friendly.

Payment customization

Let us also enable a possibility to pay for the apartments. To do this, proceed to JetFormBuilder > Settings > Payments Gateways.

jetformbuilder payments gateways settings

Enable Gateways to start working with payments and toggle Test Mode to check the function before the actual charge. Put the Client ID and Secret Key, read more about how to get them.

Besides PayPal, you can use Stripe Payments to enable another payment option on the website.

Go back to the form editor and enable PayPal Checkout in the Gateways Settings. Consider editing it consequently.

paypal checkout settings
  • Client ID and Secret Key — the same values that were input earlier in the JetFormBuilder Settings;
  • Currency Code — shows what currency will be used for the payment;
  • Before payment processed and On successful payment — in charge of what options will be performed. These are Post Submit Actions that you have configured for the form.
paypal checkout additional settings
  • On failed payment — pick actions to be performed when the payment is failed ; 
  • Create payment order notification choose here the associated post-submit action;
  • Price/Amount field — set where to pull the price from;
  • Payment success and failed messages — type in the notifications displayed to users in the relevant situations.

Update settings to attach PayPal to the WordPress booking form with payment. Work on the Preset and General Messages Settings supplementary if needed, and click on the “Publish” button once you are done editing the form.

Now let’s check how to add the newly created form to the page.

Add a form to the page

Head to Pages > Add New. You can add the form to Gutenberg or create an Elementor Booking Form. Put the JetForm block on the page.

booking form in the gutenberg page editor

The Booking Form is already displayed with the step indicator above. If you have changed their Labels of Progress, they will be shown here.

If you want to change the “Last Page” label, you need to add one more Form Break Field after the Submit Field in the form editor and give it a name.

There you can also change Form Settings. However, if you have already applied these settings while creating the form with JetFormBuilder, there is no need to do it one more time. Those settings will override these.

Moreover, you can add some CSS classes in the Advanced Settings if needed.

Let’s publish the page and check it on the front-end.

booking form on the frontend

That is it. We’ve created a WordPress simple booking form that’s ready to cover customer reservations.

The crucial thing to do once the user has registered on the website is to allow them to update their profile. More specifically, it is a way to change a WordPress user role as it gives different access levels to the website. In this tutorial, you will learn how to change the user role thanks to JetFormBuilder forms.

JetFormBuilder forms will help you change the current user role to another one after the form submission. The vital point in this process is Post Submit Actions. Let’s find out what options will be suitable for changing WordPress user roles via a form.

Related Post Submit Actions

The first action that may be helpful is Update User. Apply it to let the user edit their profile. After you select this post submit action, you can set the user role created via the form.

Another relevant post submit action is Register User, which can be used initially to add a new user. However, it is not the only feature of this post submit action. You can also use it to set the role of the newly-added user.

Update User Form

The starting point is creating a form. Go to JetFormBuilder > Add New. The form is not empty by default. There are Hidden, Text, and Submit Fields by default. Delete them or edit if needed.

adding a new jetformbuilder form

Name a form and place all the needed fields to create a WordPress form that will suit you.

update user form

Note that the User ID hidden field is obligatory as you need it for the correct work of the form. To find out the User ID, go to the WordPress Dashboard > Users and hover the mouse over the required user name. A small pop-up window with a user ID will appear.

user id

Head back to the form editor. After customizing the blocks, move on to JetForm Settings > Post Submit Actions. Choose the “Update User” option from the drop-down list and proceed to its editing.

Set the Fields Map values and proceed to the User Role drop-down. Pick the role from those available to you. After selecting the option, adjust the Messages Settings if needed and update the action.

edit update user action

Head to the Pages > Add New and click on the plus-shaped button to add a new block. Find the JetForm block and place it on the page. Configure the JetForm Form Settings.

Adjust other JetForm Settings if desired and click on the “Publish” button. The next step is to place a form on the page.

adding update user form on the gutenberg-edited page
  • Choose Form — select a form you want to be displayed on the page;
  • Fields Layout — choose between “Column” and “Row” options;
  • Required Mark — change the default asterisk symbol that will be shown next to the required field;
  • Submit Type — define whether the page will be reloaded after the form submission or not;
  • Enable form pages progress — toggle to add a step indicator above the form. To configure the steps, use the Form Break Field.

Check Advanced Settings if you want to set the CSS classes or work with the JetStyleManager plugin to customize the form straight in the page editor.

Publish the page once you have finished editing and view it on the front end.

update user form on the front-end

Once you click on the “Submit” button, check the results by navigating to the WordPress Dashboard > Users tab.

users updated user

The WordPress user role has been updated from subscriber to editor.

Register User Form

To add a new user while registration, we need to repeat some initial steps made while creating the Update User Form. Head to JetFormBuilder > Add New.

The form already contains Hidden, Text, and Submit Fields by default. You can delete the fields you don’t need.

adding a new jetformbuilder form

Give a title to the form and pick the needed fields by clicking on the plus-shaped button. Edit them and move on to the JetForm Settings. In the Post Submit Actions tab, choose “Register User.” Open the action editor by pushing the button under the drop-down menu.

register user form

Firstly, you can toggle Allow creating new users by existing users and define who can add a new user. Select the corresponding field options in the Fields Map section and choose the role for a new user. Type in the other fields if needed. However, they are not necessary in this specific case.

edit register user action

Update the action and publish the form if everything is set accordingly. To apply the form to the page, go to Pages > Add New.

Place the JetForm block on the page and proceed to the JetForm Form Settings.

adding register user form on the gutenberg-edited page
  • Choose Form — pick the newly-created form;
  • Fields Layout — define in which way the field label and its bar will be placed, as “Column” or “Row”;
  • Required Mark — set the symbol displayed next to the required fields;
  • Submit Type — choose between “Page Reload” and “AJAX” options;
  • Enable form pages progress — toggle if you work with Form Break Field and want to apply a step indicator above the form.

Next are Advanced Settings that contain one field where you can put Additional CSS class(es) if needed. You can also use the JetStyleManager plugin to customize the form appearance while editing.

Once you have adjusted the settings, publish the page and check it out. 

register user form on the front-end

Click on the “Sign Up” button and go to the WordPress Dashboard to check if the user was created. Open Users > All Users.

The new user has been created and displayed.

Now you know how to update WordPress user roles via JetFormBuilder forms using the “Update User” and “Register User” post submit actions.

Create a custom WordPress profile form to grant users the ability to update their profile details.

Contents:

Profile forms allow users to provide their details after registration. Such forms usually ask people to share more than just first and last names; location, occupation, family status, and other questions can be there. Filled forms are a quick way to reach out to website users.

Profile Pattern is a WordPress form pattern having three different question groups: Basic, Additional, and Settings. Use it to hatch a ready-made WordPress profile form. To collect as much client info as needed, add extra field blocks to it.

  • Let the user upload/update the profile picture; 
  • Set input mask to get the proper phone number format;
  • Decide which fields you want to make Required;
  • Add steps or group fields if the profile implies extended user details input; 
  • Apply custom style settings to WordPress profile form fields;
  • Add a profile form to the single user page using the shortcode or widget/block;
  • Inform users about successful profile updates via email and notification on the website;
  • Update user profile info on the site right after the form submission.

Choose File button. A Media field for uploading the user profile picture.

1 – Basic 

  • First name. A required Text field for filling in the user’s first name;
  • Last name. A required Text field for filling in the user’s last name;
  • About me. A Textarea field where users can provide additional information.

2 – Additional information

  • Location. A Text field for filling in the country;
  • Languages. A Text field for filling in the languages the user can speak;
  • Email. A required Text field for filling in the user email;
  • Phone. A required Text field for filling in the phone number.

3 – Settings

  • Password. A Text field for entering the password for the first time;
  • Confirm Password. A Text field for entering the same password for confirmation;
  • Update. A Submit field to submit a WordPress profile form.

Once you build a WordPress website that allows users to register, you need to give them the possibility to enter their personal information and update it when desired. In this case, you may want to create a WordPress Profile Form. Feel free to use the Profile Form Pattern from the JetFormBuilder plugin, including all necessary fields.

Add a new form

Initially, navigate to JetFormBuilder > Add New. The first stage is to give a title to the form.

adding a new profile form with jetformbuilder plugin

Three fields are set beforehand. These are Hidden, Text, and Submit Fields. Delete them as we will use the Pattern with all the required fields for a profile update.

Attach a Profile form pattern

The main advantage of the Pattern is already embedded fields that will speed up the process of form creation. Now we pick a Profile Form Pattern that will serve as a layout for the form.

Push the “Plus” icon to add a Pattern. From the drop-down menu, pick a “JetForms” option. There you can find a Profile Form Pattern; click on it to apply it to the form.

attaching a profile form pattern

The pattern embraces the following fields:

  • Paragraphs that conditionally divide the form into sections;
  • Media Field lets users upload their profile photos;
  • Text Fields are responsible for the input of requested information;
  • Textarea Field is set for more extensive data input;
  • Submit Field serves as a confirmation button for the form.

If desired, there is an opportunity to edit or delete these fields and add new blocks to the WordPress Profile Form.

Adjust JetForm settings

Change default settings of the form to set its suitable layout.

profile form jetform settings
  • Fields Layout is in charge of the interrelationships between the field label and the field bar. “Column” option places label above the bar, and “Row” displays them in one line;
  • Required Mark is responsible for changing a default asterisk into another symbol;
  • Submit Type affords to choose between Page Reload and AJAX that will not reload the page;
  • “Enable form pages progress” toggle works for forms that are divided into parts by the Form Break Field. It appends a step indicator to the top of the form.
profile form captcha and post submit actions settings

The next are Captcha Settings. Watch our video overview on this topic to modify them properly.

Proceeding to the Post Submit Actions, pay attention that this is a significant point if you want to get a correctly working and functional form.

Post submit action customization

You can use several Post Submit Actions for the WordPress Profile Form. Though, let’s add one, the most meaningful action that will work in this matter, Update User.

To begin with, check if you have the JetEngine plugin installed, as we will need to put meta fields while editing the action.

Go to WordPress Dashboard > JetEngine > Meta Boxes and add a new Meta Box. We need it for creating meta fields that will be input during the Update User Post Submit Action editing.

jetengine adding a new meta box

Fill out the required General Settings fields. Note that you should choose “User” as the source in the Meta Box for drop-down menu. Scroll down to the Meta Fields.

We need to create meta fields for all the bars that will include information about the user. It means a Media, Textarea, and eight Text meta fields. 

Mind that if you have added some other fields, you need to apply meta fields for them as well.

profile form meta fields

Push the “Add Meta Box” button and go back to the form editor.

update user post submit action editing

Open the Post Submit Acton Editor, fill in the Fields Map with “User Meta,” and type in meta field names that you have entered to each field while adding the meta box.

update user action settings editing

Define a User Role for the updated user and set messages displayed to the users in specific cases.

Update the action and continue customizing Preset and General Messages Settings

Publish the form once you finish all the revisions.

Place a form on the page

Head to the page where you want to place the WordPress Profile Form. This page can be edited with both Gutenberg and Elementor.

Locate the JetForm block on the page and proceed to the settings. Choose a form that you have added from the drop-down menu.

Pick Fields Layout, Required Mark, and Submit Type if you haven’t done it yet. Turn attention to the fact that the settings you have customized earlier in the form editor are the higher-priority ones, which means they will override the JetForm block settings in the page editor.

profile form page editor

Check Advanced settings to apply a CSS class to the form. Click on the “Publish” button to make the page functioning.

profile form pattern front-end

The WordPress Profile Form is ready for any user data updates.

WordPress Profile Form Pro Features

Create a custom WordPress Subscription Form to collect subscription requests and build a loyal following.

Contents

Subscribe forms are a must when it comes to collecting email addresses and getting new leads. Blog and business owners can send out exclusive deals and quality content to those interested subscribers. Moreover, the obtained data can be used for mailing list creation. 

To create a Subscribe Form for WordPress websites, you’ll need a JetFormBuilder pattern. It is a ready-made WordPress Form Pattern that you are free to customize anyhow you like. Style the form blocks, configure post-submit actions, and add as many new fields as necessary.

  • Image. An Image block for adding visuals to the form;
  • First Name. A required Text field for filling in the user name;
  • Email. A required Text field for filling in the user email;
  • Subscribe button. A Submit field to submit a WordPress subscription form.

Add a new form

To create a Subscribe Form in WordPress, head to JetFormBuilder > Add New. Give a name to the form.

adding a new form with jetformbuilder

As you may notice, there are default fields, namely Hidden, Text, and Submit fields. For now, we can delete them to implement the pattern.

Apply a Subscribe form pattern

Patterns are pre-set layouts created for specific purposes. Let’s add a Subscribe Form Pattern. You can delete existing form fields, edit them or put other ones that you can customize freely.

Push the “Plus” icon in the editor to navigate to Patterns. Open the drop-down menu and pick the “JetForms” option. Scroll down to find a Subscribe Form and click on it.

choosing a subscribe form pattern

The pattern is pretty short and quick to fill in. It includes the following fields:

  • Paragraphs to tell the user about the purpose of the form;
  • An Image that can be an addition to the form;
  • Text Fields are used for typing different kinds of information. In this case, two fields represent First Name and E-Mail; they are required. You can enable this option to other added fields by clicking on the block and toggling the Is Required option;
  • Submit Field is the button that allows the user to confirm the information they have typed in. In such circumstances, the button represents subscription confirmation.

Place other desired fields or delete the ones already embedded in the Subscribe Form Pattern and listed above.

Personalize JetForm settings

If you want to change the default layout, remember to make it in the JetForm Settings.

jetform settings
  • Fields Layout allows you to pick between “Column” and “Row” options. The first one places the field bar under the label, and the second puts them in one line;
  • Required Mark is a symbol that will be displayed near required fields;
  • Submit Type can work on “Page Reload” or “AJAX.” You can select the second one if you don’t want to reload the page;
  • Enable form pages progress if you have made a multi-step form with Form Break Field to set a step indicator above the form.

The next step is Captcha Settings. Learn more about them in our Form reCAPTCHA customization video tutorial.

Mind that the following step, Post Submit Actions, is significant. Choose in which way you will receive information about submitting a form by a user.

As we create a Subscribe Form, we can use several submit actions in one form. Let’s integrate the “Send Email” and “MailChimp” options.

“Send Email” post submit action

To customize “Send Email” accordingly, check our detailed overview. Edit action to set it for correct work.

send email post submit action editing

For instance, in the Content tab, you can put the data input by the user. In our case, it is the first name and email address.

The example text can look like this: 

“Hi, admin!

There is a new subscription on your website.

Subscription details:

Name: %first-name%

Email: %e-mail%”,

where %first-name% and %e-mail% stand for the user’s input information.

Once you have updated the Send Email Post Submit Action, let’s adjust MailChimp Post Submit Action.

“MailChimp” post submit action

MailChimp will help to manage the Subscribe Form as well.

mailchimp post submit action editing

Edit the action, update it, and proceed to the following settings if needed. 

Enable Preset Settings and change the General Messages values, or leave them default. 

Publish the form and move to the page where you want to locate the form. It can be either Elementor or Gutenberg edited pages.

Attach form to the page

Place the JetForm block in the editor and select the form you have just created.

jetform page editor

Adjust the Form and Advanced Settings. Note that the page editor settings will not overwrite the form settings. So if you have already established them while creating the form, there will be no point in doing it in the page editor one more time.

Publish the page and go to check how it looks like on the front-end.

subscribe form front-end

The work is done. Now the free WordPress subscription form is ready for further use.

Use the WordPress application form builder to acquire the best talent out there faster than ever. 

Contents:

Application forms help to collect job applications and detect potential employees. Besides that, they let people apply for a scholarship/loan/internship, enter a contest, volunteer, adopt a pet, close a rental agreement, and more.

Use JetFormBuilder, a WordPress application form plugin, and its form pattern to get a customizable WordPress application form in one click. It contains handy Checkbox Field types that help you figure out the little details about the applicant. Plus, you can make a lengthy form multi-step, thanks to the Form Break Field block. 

Step 1 – Participant information 

  • First Name. A required Text field for filling in the applicant’s name;
  • Last Name. A required Text field for filling in the applicant’s last name;
  • Email. A Text field for filling in the applicant’s email;
  • Phone Number. A Text field for filling in the applicant’s phone number; 
  • Country. A Text field for filling in the applicant’s country;
  • City. A Text field for filling in the applicant’s city;
  • Next/Previous button. A Form Break Field that splits form into steps.

Step 2 – Additional information 

  • Company. A Text field for filling in the company;
  • Position. A Text field for filling in the job position;
  • Time here. A Text field for filling in the number of years worked;
  • Industry. A Checkbox field to pick the industry from the list;
  • Looking for a mentor. A Radio field with Yes/No options; 
  • How did you hear about us? A Checkbox field with four available options;
  • Interested in receiving newsletter. A Radio field with Yes/No options;
  • Submit. A Submit field to submit a WordPress job application form; 
  • Next button. A Form Break Field that gives a title to the second step.

Add a new form

To create a WordPress online application form, navigate to JetFormBuilder > Add New. Type in the title of the form.

adding a new form with jetformbuilder plugin

Three fields are shown by default. They are Hidden, Text, and Submit Fields. As we are using the Pattern, we can delete them.

Apply an Application form pattern

Patterns are customized layouts that suggest fields that are already set. You can delete the existing fields or edit them if you want to change just a few settings.

Click on the “Add New” button in the WordPress form editor and choose the Patterns tab to put an Application Form Pattern. In the drop-down menu, select the “JetForms” option. Find an Application Form and click on it to add it to the page.

adding an application form pattern

This pattern is divided into two parts, Participant and Additional information.  

Participant information includes Text Fields and a Form Break Field.

  • Text Field can be added for manual input of some data;
  • Form Break Field divides form into parts and lets you add a step indicator to separate these parts.
pattern participant information

Additional information contains Text, Checkbox, Radio, Submit, and Form Break Fields.

  • Checkbox Field allows users to put a tick next to suggested options;
  • Radio Field adds a list of options from which user can pick only one variant;
  • Submit Field is the final step in completing a form. Note that there can be just one Submit Field in the form. If you add more than one, the other will not work.
pattern additional information

Pay attention that the last Form Break Field was added to change a default Label of progress from “Last Page” into “Additional information.”

You can edit or delete all suggested fields or attach other fields to the form according to your needs.

Customize JetForm settings

JetForm settings are applied to the whole form so consider working with them thoroughly.

application form jetform settings
  • Fields Layout lets you pick from two options. “Column” displays field labels above the bar, and “Row” puts them in one line;
  • Required Mark defines a symbol that will be shown near required fields. If empty, an asterisk symbol is displayed;
  • Submit Type allows you to choose between “Page Reload” or “AJAX.” If the second option is preferred, the page will not be reloaded.

When you have customized all the Form Settings, don’t forget to enable form pages progress to add a step indicator above the form.

Captcha Settings are responsible for reCAPTCHA verification, about which you can learn more in detail in our video tutorial.

Specifically, focus on the Post Submit Actions that are executed after the form submission. You can choose from all the alternatives and even add several actions to the form.  

At the same time, you can synchronize the form with third-party services like Integromat or Zapier to automate the management of the application.

Check our tutorials if you want to learn more about integrating JetFormBuilder with Zapier or Integromat.

For instance, let’s set two Post Submit Options, “Send Email” and “Insert/Update Post.”

“Send Email” post submit action

send email post submit action

Begin with the “Send Email” option. You can read more about it in this guide.

Edit this post submit action according to the demands. You can include all the data input by the user in the email. Just write a default text with form fields that you have entered in the block settings.

For instance, in the Application Form Pattern, we have the Phone Number Text Field. Its form field name is “phone-number”. To collect the data for the email, just wrap it with percent signs, like this: %phone-number%. 

So, as an example, we can write the following content for email:

“Hi, admin!

There is a new application!

Application details:

First Name: %first-name%

Last Name: %last-name%

Phone Number: %phone-number%”. 

All the data wrapped in the percentage marks will be pulled from the info input by the user. Once you have finished filling out the fields, click on the “Update” button.

“Insert/Update Post” post submit action

Moving on to the following Post Submit Action, find out more about it from the overview article

Now let’s see how we can edit this action to meet our needs, specifically to submit applications properly.

For the correct customization, you need to install and activate the JetEngine plugin.

The primary process to work with this post submit action is to create a Meta Box that will include some Meta Fields. 

Meta Fields show extra information about the posts. This metadata isn’t displayed for the users on the front-end. The one way to demonstrate it is to use Dynamic widgets. The data you type into the meta fields can be used in multiple ways several times.

To create a meta box that will be a so-named container for the meta fields, proceed to JetEngine > Meta Boxes and add a new meta box.

jetengine adding meta boxes

Read about its settings in the Meta Boxes overview. We need to build 13 meta fields that will correspond to all the Application Form Pattern fields. That means we need to set up nine Text, two Checkbox, and two Radio meta fields. 

Note that if you have added other fields, you need to create corresponding meta fields for them.

Customize General Settings, leave the “Post” as the Meta Box for option and move on to Meta Fields. 

As an example, you can set Text Field options as shown in the picture below.

text meta field customizations

Type in the same values to create a Checkbox. However, choose the “Checkbox” option as the Field type. Besides that, click on the ‘’New Field Option” to add all the alternatives represented in the checkboxes.

checkbox meta field customizations

The Radio Meta Field is created the same way as the Checkbox one. Just select “Radio” as the field type.

When you have tailored all the meta fields, click on the “Update Meta Box” button and return to the Application Form editor. Let’s edit the “Insert/Update Post” action.

insert update post action editing

While filling out the Field Map values, choose “Post Meta” as a source for all the fields and type in the Meta Field name that you have entered while building meta fields. Update the action, and it is ready.

There are also Preset and General Messages Settings. So feel at ease to adjust them if you need to and publish the form.

Attach form to the page

Go to the page to place a form once you have adapted all the blocks and JetForm Settings.

You can attach the JetFormBuilder application form both to the Elementor and Gutenberg edited pages. 

Just add a JetForm block and choose the application form you have just created. 

application form page editor

Mind that Form Settings represented in the Page Editor will not override the Form Editor settings. So if you have already established Fields Layout, Required Mark, and Submit Type, you can skip these steps here.

You are free to customize Advanced Settings in addition. 

After making all the modifications, push the “Publish” button and check the Application Form on the front-end.

application form front-end

All right, the form is ready for application requests. Now you know how to create online application forms with WordPress Application Form Builder.

Build a compact WordPress Registration Form allowing users to sign up and get a profile page in no time.

Contents:

Registration forms help website owners to turn one-time visitors into registered users. They prove to be very efficient when it comes to user data collection and mailing list creation.

Keep the WordPress custom registration form simple and make it quick to submit. Thanks to Login & Register, a WordPress Form pattern, you get a signup form layout in one button click. Proceed to style the form blocks, set post-submit actions, and it’s good to go.

  • Go light on the form adding only vital fields like Name, Email, Password, and Confirm Password;
  • Add Required fields for the essential questions only;
  • Avoid spam during user registration thanks to reCAPTCHA v3 validation; 
  • Provide the Success, Validation, and Error Messages during form submission;
  • Boost visitor engagement by carefully styling form fields and buttons;
  • Collect user data and sync to MailChimp, GetResponse, Active Campaign, Zapier, and Integromat.
  • Name. A required Text field for filling in the user name;
  • Email. A required Text field for filling in the user email;
  • Password. A required Text field for filling in the password for the first time;
  • Confirm Password. A required Text field for filling in the same password for confirmation;
  • Country. A Select field for choosing the country from the drop-down;
  • Submit. A Submit field to submit a registration form.

The first and the primary step is adding a new Form. Navigate to JetForms > Add New.

You can notice that the editor already has some default blocks. These are Hidden, Text, and Submit fields. You can customize them according to your needs or just delete them.

Mainly, there are two ways of creating the Register Form — by adding separate blocks or using Patterns. Patterns are the JetFormBuilder plugin’s feature that allows you to use already existing content layouts.

There are various Patterns available for use: Buttons, Columns, Gallery, Headers, Text, Query, and JetForms. To make work with Register Form easier, you can click on JetForms, where Login & Register Pattern is provided.

wordpress login and registration form pattern

This layout consists of blocks that can be either changed or deleted. Furthermore, Patterns allow adding other blocks to the layout. For instance, the Login & Register Pattern consists of the following fields:

  • Image — upload a picture in this block;
  • Text Fields — there are four of them responsible for Name, Email, Password, and Confirm Password;
  • Select Field —  user can choose a Country from the drop-down list;
  • Submit Field — allows to collect and submit all the input data by clicking on the button.

Let us review these blocks and their customization options.

Image block

A Register form should be made as convenient for the user as possible. Customizing a picture is a good starting point.

wordpress form image styles settings
  • Default Style — a style put by default can be chosen from the “Default” or “Rounded” options. You can also leave it unset;
  • Alt text — write the description of the image;
  • Width and height — type values manually or set a percentage that will automatically crop the image.

You can also check Advanced settings that include additional customization options.

Text field block

WordPress registration form is all about the input data. So Text Field is, therefore, a very functional feature. Let’s take a closer look at its settings.

form text field general settings
  • Field Label — a name that acknowledges the user about the type of needed information. As an example, it can represent a Username, Password, or any other data;
  • Form field name — a slug name that becomes an ID. Traditionally, it can replicate or correspond to the Field Label. It should comply with all the requirements, containing only Latin lower case letters, numbers, hyphens, and underscores. Another rule is not to use spaces, so if you need to write more than one word, you can divide them with hyphens or underscores;
  • Field Description — supplemental information that will appear under the field. This description should be about what users need to write in the field;
  • Default Value — can pull out user information that already exists. For instance, if the user is logged in, you can set their email that has already been saved. However, it is not so valuable if we create a Register Form as its primary function is to register a user, information about whom is not known yet;
text field settings
  • Field Type — define the kind of data that should be written in the field. There are five options such as “Text,” “Email,” “Url,” “Tel,” and “Password”;
  • Min and Max length — specify the number of characters that can be put in the field;
  • Set Input Mask — change the default input format into the specific one, pick a Mask Type, its Visibility, and Placeholder.
text field advanced settings
  • Placeholder — default example data that is displayed until the user clicks on the bar. It differs from the Default Data, as this text is not input information;
  • Add Prev Page Button — enable it if Form Break Field is used. It lets a user return to the previous page;
  • Field Visibility — make this field visible to all, only to logged in or not-logged users;
  • CSS Class Name — type in a CSS class name to pull off style from the customizer.

You may also need to make the fields required to fill in. There is such an option when it comes to the Text and Select Field blocks of this Pattern.

Just click on the block in the editor and enable the Is Required option.

Select field block

This block lets the user choose from the diverse drop-down menu options. The selection proposed by this layout is Country, but you can change it or delete this block if you don’t need it. 

Let’s begin editing from the block’s settings. They are practically the same as the Text Field Settings. You can read about them earlier in this tutorial.

There are the default options available in the drop-down list. Nevertheless, you can edit or delete them and create new options that suit you best.

select field settings
  • Fill Options From — choose from the “Posts,” “Terms,” “Meta Field,” and “Glossary” options, generate them dynamically or input manually;
  • “Manage Items” button — change, add new, delete, or clone options;
  • Switch page on change — enable switching the page when changing the items.

Submit field block

Submitting a WordPress form is the final and the most crucial thing in the registration. Editing this button will take just a couple of minutes.

The settings of the button repeat some of the Text Field block settings. You can return to their description in this tutorial.

After editing all the block settings, you may want to style them accordingly. Gutenberg forms have no styling options, so you may want to use the JetStyleManager plugin to style the Register Form.

JetForm Settings

Except for the standard block settings, you can edit JetForm settings that apply to the whole WordPress form. 

It is significant to edit them setting identical customizations to all the Register Form blocks. You can find them near the block settings.

jetform
  • Fields Layout — pick how the field bar and the field label will relate to each other. You can set “Column” or “Row” options. In the first case, the label will be displayed over the bar, while the second will put the label and the bar in one row;
  • Required Mark — you can either leave this field empty to represent required fields with an asterisk symbol or set another mark;
  • Submit Type — specify what action will be carried out after pressing the “Submit” button. Choose between “Page Reload” and “AJAX” that will not reload the page;
  • Enable form pages progress — toggle it on if you work with the Form Break Field. If the form is divided into parts, the progress bar will be adjusted. This bar will show which part of the form the user is currently on.
  • Captcha Settings is also an option for the Register Form creation. We already have a tutorial about adding reCAPTCHA that you can check on the Crocoblock YouTube Channel.

When moving on to Post Submit Actions, pay attention that you need to choose the “Register User” option as we create Register Form. You can edit this action by clicking under the drop-down menu. Read more about Register User Submit Action in our tutorial.

Besides, you can add one more action. For instance, send an email when the user has been registered. Watch the following Post Submit Actions overview to find out more about other options.

Preset Settings let you choose the source for a global form preset, and General Messages Settings are responsible for different types of notifications. These will be shown in specific cases that can emerge while completing a form. 

When you are done with all the form customizations, click on the “Publish button and feel free to add the Register Form to the page. 

You can add a JetForm block in Gutenberg editor or create an Elementor registration form using the JetForm widget. 

jetform block form settings

Choose the form that you have just created and proceed to the following settings. You may notice that these settings were already adjusted in the JetForm block settings. So if you have already customized them, there is no need to do it again, as the JetForm block settings take precedence over them.

For example, you can change the Fields Layout into “Row” in the page editor. Still, if the “Column” was applied while creating a form, it will also be displayed on the page.

Click on the “Publish” button once you are done with editing. There you go, the WordPress registration form is ready.

Presently, all the services successfully work with email integration. Nevertheless, the email marketing profit is still questionable. The modern user subscribes to a large number of services and does not continuously check the inbox.

One of the most valuable choices is mass SMS messaging. People open them much more often than constantly sent emails. 

Common SMS Integration Use Cases

Order confirmation

It is widespread that users await the order confirmation. Otherwise, they may become nervous in expectation of the desired email. SMS notifications are displayed without additional settings and don’t confuse the customer.

Appointment reminder

An excellent opportunity not to lose clients is to remind them about their appointment. And it helps to save money because of not missing events.

Vital notifications

There is always something important to say. Do not waste the opportunity to have close contact with the clients and inform them about important news.

Discount programs

Send users discount codes that will activate limited offers. Such a campaign will interest the customers so they will not forget about the products you sell.

All these use cases can be implemented with the help of the steps described below.

Set Messaging Tool with Zapier

Many messaging tools provide website maintenance services. All of them have their exclusive features. However, if you have considered working with Twilio, this guide is for you.

Twilio is believed to be one of the best messaging services, according to Zapier. You can link JetFormBuilder forms to Zapier; read more about it in this overview.

Initially, start with the Twillio registration if you don’t have an account yet. Customize all the settings that will allow you to work with messages. Once you are registered, proceed to Zapier and make a registration there.

Push the “Create Zap” button. 

zapier create zap

Webhooks trigger event

Let’s set a “Webhooks by Zapier” option as the trigger. Note that this action works only with Zapier’s trial period or premium accounts. 

Set “Catch Hook” as the Trigger Event and click on the button to continue.

catch hook trigger event

Copy the Custom Webhook URL for setting an integration between the JetFormBuilder form and Zapier.

set up catch hook trigger

Navigate to JetFormBuilder > Forms. Create or open the form you want to integrate with Twilio Messaging Tool. 

Open JetForm Settings and scroll down to Post-Submit Actions. Choose the “Call Webhook” option for Zapier integration.

order confirmation call webhook post submit action

Paste the Webhook URL and update the form. 

Proceed to the frontend to test the action. Fill in the form and click on the “Submit” button.

order confirmation form on the front-end

Fill in the form and click on the “Submit” button. Come back to Zapier and test the trigger.

test catch hook trigger

“Send Email in Gmail” action event

The following step is choosing the action event. Let’s set a “Send Email in Gmail” action. It is not necessary. However, in this way, you will get notifications about new orders.

send email in gmail action

Select the Gmail account to connect it with Zap. Continue to set up all the required fields to form emails that will be sent to Gmail.

choose account for send email in gmail action

Once the email has been sent, pick the subsequent action event for messaging.

test send email to gmail action

“Send SMS in Twilio” action event

Pick the “Twilio” option from the drop-down list and “Send SMS” as an action event. Click on the button to continue adjusting the settings and connect the Twilio account as you did before with Gmail.

choose send sms in twilio action

Set up the action by filling in the required information.

set up send sms in twilio action

If everything was set successfully, you should get an SMS sent to the number you put in the form.

test twilio action

As you can see, there is additional information before the custom text you have adjusted. It is displayed due to the setting Twilio Trial. However, if you have upgraded the account, there will be no extra notes.

twilio text message confirmation

Turn on Zap once you are ready. JetFormBuilder form integration with Twilio is ready. The message will now be sent every time after the form submission.

Mind that you are also free to use any SMS application that is compatible with Zapier.

Managing the form results can be a challenging task. Though if you work with Zapier and JetFormBuilder, it should be much easier. Let’s find out how to connect WordPress form to Zapier.

Create a Zap

Sign up for a Zapier account or open the one that already exists. Click on the “Make a Zap” button to start working on the connections.

zapier dashboard

Name a Zap, and let’s begin. There are two main steps that define a Zap. Firstly, you need to pick a Trigger Event and then an Action that will be performed.

Choose the first trigger. You can do it by typing its name in the search bar. Add Webhooks by Zapier and choose “Catch Hook” as a Trigger Event. It is essential if you want to connect your form to the Zapier. Click on “Continue.”

catch hook trigger event

Copy a Custom Webhook URL to conjoin it to the form.

set up catch hook trigger

Connect a Zap to the Form

Navigate to the WP Dashboard > JetFormBuilder > Forms, find the form you want to connect with Zapier, and change a default “Send Email” Post Type Action to “Call a Webhook.” Click on the “Edit” button and paste the URL to the field. Update the Post Submit Actions and WordPress form by clicking on the similarly named buttons.

call a webhook post submit action

Add this form to the page if you haven’t done it yet and go to the front-end. Fill in the fields and submit the form. Note that you do this for Zapier integration testing, so type in a valid email to which you have access.

submitting a form front-end test

Go back to the Zap editing. The next step is the Test trigger. That is why we needed to fill in the form.

test catch hook trigger

When the connection is established, click on the “Continue” button. Now we have learned how to connect WordPress form to Zapier.

Set an Action

Select the app that will perform an Action. For instance, we will choose Gmail and arrange “Send Email” as an Action Event.

gmail action in zapier

Choose a Gmail account. To link a new Gmail, click on “Connect a new account” and type in all the required credentials.

Then you can set up action by putting all the data about where to send an email, the email address that will send this letter, and other fields like From Name, Reply To, Subject, Body, and so on.

gmail set up action

When the desired fields are input, you can send a test email to check WordPress integration with Zapier in action. You can check this letter on the email you have put in the To field.

gmail test action

Now just hit “Turn on Zap,” and it is ready. The WordPress integration with Zapier completely works.

However, note that you can add more than one action. So if you want to set some other events, just go back to the Zap editing and choose one more app. 

That is why Zapier integration makes form management simple. For example, you can connect a MailChimp account, work with Google Calendar, or use Google Sheets for better productivity at the same time.

Furthermore, watch our video and learn how to integrate Zapier with the JetEngine forms to create similar form integrations.

Forms are the best way to collect user information in one manageable unit. There is a possibility to build a WordPress form with the JetFormBuilder plugin. However, you can also duplicate, export and import existing forms into WordPress to accelerate the work.

Duplicating and Exporting a Form

The cases can be different. Let us consider that you want to create a similar or even the same form that you have made. Let’s duplicate a WordPress form. For these intentions, you can use the Duplicate option.

duplicate form jetformbuilder

A copy of the chosen form appears. You can change it and adjust all the settings accordingly or just leave it without changes.

You can also see the Export option that allows you to save the created form on your computer and import the WordPress form into another WordPress site.

Importing a Form

There is an opportunity to import JetFormBuilder forms from one WordPress site to another.

import form with jetformbuilder

Click on “Choose Files” and pick the needed form in JSON format. Press the “Start Import” button, and now importing is entirely finished.

The Form Editor opens, so have no hesitation to make customizations if needed. Save changes to the form.

JetFormBuilder Converter

If you work with JetEngine and its forms, you can find JetFormBuilder Converter effective, as it helps to transform JetEngine forms into JetFormBuilder ones.

To install it to WordPress, download a ZIP file on your computer.

github jetformbuilder converter download

Navigate to WordPress > Plugins > Add New. Push the “Upload Plugin” button and choose the JetFormBuilder Converter file. Click on “Install Now.”

adding jetformbuilder converter

To convert an existing form, go to JetEngine > Forms, find the desired form, and click on “Convert to new builder.”

jetengine convert to new builder

Let’s check if it has been converted to JetFormBuilder. Proceed to JetFormBuilder > Forms

Everything works fine. The form, specifically its copy that we have chosen for converting, is shown in this section. You can also import, export, and duplicate converted forms. 

form converted with jetformbuilder

That is it. You have found out how to import, export, and duplicate WordPress forms with the help of JetEngine and JetFormBuilder plugins features.