Daria Akshonova, Author at FormBuilder

Posted on April 3, 2024April 3, 2024 by Daria Akshonova

Job application forms on WordPress sites are vital for a streamlined hiring process. They help collect necessary applicant information, such as contact details, qualifications, and experience.

Using WordPress for these forms simplifies application collection and candidate management, which is especially beneficial for recruiting agencies, hiring websites, and businesses of all sizes.

With JetFormBuilder, you can create a job application form by implementing all the needed features.

Why You Need a WordPress Job Application Form

The JetFormBuilder application forms help to collect job applications and detect potential employees directly on your website.

With a user-friendly form, you can not only attract more candidates but also organize the needed candidate information in one place for easy comparison and selection.

Top WordPress Job Application Form Features

Turn long application forms into multi-step and make them user-friendly;
Decide which form fields you want to make required;
Allow applicants to easily attach files to their applications. Set specific file types and sizes, adjust restrictions and verification options to ensure file security and maintain a clean database;
Implement the Conditional Visibility feature to make job application forms more dynamic. It allows form fields to be shown or hidden based on the applicant’s previous inputs;
Use reCAPTCHA v3 validation to protect the application form from spam and bot submissions. Keep the application pool relevant and manageable, saving time and resources in the recruitment process;
Provide the Success, Validation, and Error Messages during form submission;
Receive email notifications to the specified email address each time the form is submitted.

WordPress Job Application Form Structure

Step 1 — Personal Information

Name. A required Text Field for filling in the applicant’s name;
Surname. A required Text Field for filling in the applicant’s last name;
Email Address. A required Text Field of “Email” FIELD TYPE for filling in the applicant’s email;
Phone Number. A required Text Field of “Tel” FIELD TYPE for filling in the applicant’s phone number;
LinkedIn Profile. A required Text Field for filling in the applicant’s LinkedIn profile;
Next page. A Next Page block for proceeding to the next page;
Form Page Break. An indicator of the end of the first part of the form.

Step 2 — Experience

Fulfill Work Experience and Education Info. A required Radio Field with two options so the applicant can choose whether they want to upload a resume or complete the needed information manually;
Upload Resume. A required Media Field for the resume file uploading;
Job Title. A required Select Field for filling in the applicant’s previous job title;
Company Name. A required Text Field for filling in the company name of the applicant’s previous place of work;
Start Date. A required Date Field for filling in the start date of the applicant’s previous company;
End Date. A required Date Field for filling in the end date of the applicant’s previous company;
Responsibilities. A Textarea Field for filling in the applicant’s responsibilities;
Repeater. A Repeater Field if the applicant wants to add several places of work;
Previous page. A Prev Page block for going back to the previous page;
Next page. A Next Page block for proceeding to the next page;
Form Page Break. An indicator of the end of the second part of the form.

Step 3 — Education

Highest Degree. A required Select Field for filling in the applicant’s higher education degree;
Institution. A required Text Field for filling in the applicant’s institution of learning;
Field of Study. A required Text Field for filling in the applicant’s field of study;
Graduation Date. A Text Field for filling in the applicant’s graduation date;
Previous page. A Prev Page block for going back to the previous page;
Next page. A Next Page block for proceeding to the next page;
Form Page Break. An indicator of the end of the third part of the form.

Step 4 — Additional Information

Cover Letter. A Textarea Field for filling in the applicant’s cover letter;
Portfolio URL. A Text Field of “Url” FIELD TYPE for filling in the URL of the portfolio;
Additional Comments. A Textarea Field for filling in the applicant’s additional comments;
Previous page. A Prev Page block for going back to the previous page;
Save and complete. An Action Button block for completing the form.

How to Create a WordPress Custom Job Application Form

To create a WordPress online application form, navigate to WordPress Dashboard > JetFormBuilder > Add New.

Type in the title of the form.

At first, the Welcome block is added to the form by default. Push the “Start from scratch” button to build a brand-new form.

The three blocks are now added to the page: the Hidden Field, the Text Field, and the Action Button.

We delete the Text Field and the Action Button, leaving only the Hidden Field on the page.

No alterations to the block are needed at this time. We will keep the settings default to save the “Current Post ID” to the Form Records page later.

We begin the form with the “Personal information” Heading block.

The style settings can be adjusted right in the block settings.

The following block is a Spacer placed to create additional space between the fields.

Then, we add the Columns block and choose the two-column layout.

In the left column, we add the first Text Field.

We set its LABEL to “Name,” and therefore, the FORM FIELD NAME is generated automatically based on the set LABEL — “name.” It can be optionally changed if needed.

We also make this field required by clicking the “asterisk” icon located above it in the horizontal settings panel.

Right away, we work on the style settings. To make it possible, we installed and activated the free JetStyleManager plugin.

Every style change is up to your preference.

In the right column, we place the Text Field indicating “Surname,” which is also set as required and has settings similar to those of the previous field.

Adjust the style settings according to your preferences.

We add one more Spacer to create a gap between the previous and following fields.

Then, we add one more two-column layout with the help of the Columns block.

In the left column, we put the required Text Field with the “Email Address” Label.

This time, we change the FIELD TYPE from the default “Text” option to “Email.”

Adjust the style settings according to your preferences.

In the right column, we put the following required Text Field with the “Phone Number” FIELD LABEL.

Its FIELD TYPE should be set to “Tel.”

Adjust the style settings according to your preferences.

Then, we add one more Spacer and the Columns block with a two-column layout once again.

In the left column, we put the last Text Field of this form part, the required “LinkedIn Profile.”

We change the FIELD TYPE to “Url” and leave other settings by default.

Adjust the style settings according to your preferences.

We leave the right column of this two-column layout blank and add one more Columns block with the two-column layout below.

The left column is empty now, and in the right column, we put Spacer.

Below the Spacer, in the same column, we add the Next Page block. Since it will serve as the “Next” button, we complete the FIELD LABEL accordingly.

Adjust the style settings according to your preferences.

the first next page button style settings

Then, we add the Form Page Break block to finish this part of the form. Its settings remain default.

The first field of the second part of the form is the required Radio Field.

Its LABEL is set to “Fulfill Work Experience and Education Info,” the FORM FIELD LABEL is generated automatically, and the DEFAULT VALUE is set to “manually,” the option we will now add to the radio.

To add the options, push the “Manage items” button.

In the opened pop-up, click the “Add new Option” button.

We add the first option, setting its LABEL to “Upload resume” and VALUE to “resume.”

Then, we add one more option by clicking the “Add new Option” button.

Another option has the “Manually” LABEL and “manually” VALUE.

Once all the options are set, push the “Update” button.

Now, adjust the style settings according to your preferences.

We want to show different fields depending on the selected field in the previous Radio Field. So, we add the Conditional Block to the page.

The first Conditional Block is for the “Resume” option. We click the “Add new” button that appears when hovering over the section in the Show current block field of the Conditional Block settings.

In the appeared pop-up, we define the “Show if…” option in the WHICH FUNCTION NEED EXECUTE? field, pick the “Fulfill Work Experience and Education Info” FIELD, set “Equal” OPERATOR, and complete the VALUE TO COMPARE field with the “resume” value.

Then, we hit the “Update” button.

conditions for resume option in the fulfill work experience field

Next, we add the required Media Field block. We leave the LABEL field empty and complete the FORM FIELD NAME with the “upload_resume” value.

Also, in the Field tab, you can set the needed USER ACCESS option. For instance, the “Any registered user” option allows uploading files for only the registered users correspondingly.

If enabled, the Insert attachment toggle will save the attachment to the Media Library.

The MAXIMUM ALLOWED FILES TO UPLOAD field allows you to define the maximum number of files the user can upload. If left empty, the uploading limit is set to one file.

We set the MAXIMUM FILE SIZE MESSAGE to “Upload PDF or DOCX file up to %max_size%,” where the %max_size% value is the macro used to display the maximum allowed file size.

Adjust the style settings according to your preferences.

The first Conditional Block is now completed.

Now, we add one more Conditional Block; this time for the “Manually” answer selected in the previously added “Fulfill Work Experience and Education Info” Radio Field.

Once again, we click the “Add new” button to add a condition for the current block.

conditions for manually option in the fulfill work experience field

The first block in this condition is the Spacer, which creates a space between the fields.

To begin a “Manually” part of the form, we add a Heading block, “Experience.”

In this case, the style settings can be adjusted right in the block settings.

The following block is the required Select Field. Its FIELD LABEL is set to “Job Title” and the FORM FIELD NAME to “job_title” accordingly.

In the Advanced tab, we set the PLACEHOLDER to the “Title of the position held.” Also, we activate the Disable placeholder feature, so the placeholder itself can not be picked as an option.

Click the “Manage options” button to add the options for selection.

We add the following options: “QA,” “QA Lead,” “Developer,” “Designer,” “Tech Writer,” and “Motion designer.”

Once the options are set, push the “Update” button.

Adjust the style settings according to your preferences.

We place one more Spacer in the form.

Then, we add one more required Text Field with the “Company Name” FIELD LABEL.

Adjust the style settings according to your preferences.

We place one more Spacer on the page.

Then, we add the Columns block with the two-column layout. In the left field, we place the required Date Field named “Start Date.”

Adjust the style settings according to your preferences.

In the right column, we add one more required Date Field called “End Date.”

Adjust the style settings according to your preferences.

Now, we put one more Spacer to create some space between blocks.

The next block we add is the “Responsibilities” Textarea Field block. Its settings are left default in the described case.

Adjust the style settings according to your preferences.

We add a Spacer block to create an additional space between blocks.

Then, we add the Repeater Field so the applicant can later add several job positions held.

Leave the FIELD LABEL field empty and complete the FORM FIELD NAME with the “repeater” value.

In the MANAGE REPEATER ITEMS COUNT, we leave the “Manually” option so the user can add blocks by clicking the button. The ADD NEW ITEM LABEL is set to “+ Add new.”

Inside the Repeater, we put the same fields we put before, beginning from the “Job title” Select Field and ending with the “Responsibilities” Textarea Field.

Adjust the style settings of all mentioned fields according to your preferences.

Then, we add one more Spacer to the form.

The following block is the Heading indicating the “Education” part of the form.

In this case, the style settings can be adjusted right in the block settings.

The next field is the required Select Field block called “Highest Degree.”

The PLACEHOLDER here is set to “The highest level of education attained by the applicant.” Also, we activate the Disable placeholder feature, so the placeholder can not be picked as an option.

Click the “Manage items” button to set the select options.

You can add the necessary options by clicking the “Add new Option” button each time you need a new one.

Our options are: “No Degree,” “Bachelor’s Degree,” “Master’s Degree,” “PhD,” and “Other.”

Once all the options are added, press the “Update” button.

Adjust the style settings according to your preferences.

Then, we add one more Spacer to the block.

Inside the current Conditional Block, we add one more Conditional Block. This time, it will hide the following fields if the “No Degree” option is selected in the “Highest Degree” Select Field.

So, in the appeared conditions pop-up, we now define the “Hide if…” option in the WHICH FUNCTION NEED EXECUTE? field, pick the “Highest Degree” FIELD, set “Equal” OPERATOR, and complete the VALUE TO COMPARE field with the “no-degree” value this time.

Once done, we push the “Update” button.

As the first block in this Conditional Block, we add a required Text Field, “Institution.”

Adjust the style settings according to your preferences.

Then, we put one more Spacer on the page.

After that, we add one more required Text Field, “Field of study.”

Adjust the style settings according to your preferences.

We add one more Spacer to the form.

Then, we add one more Date Field to the form. The FIELD LABEL is “Graduation Date,” and the FIELD DESCRIPTION is “Date of graduation or expected graduation.”

Adjust the style settings according to your preferences.

Outside of the Conditional Block, we add a Spacer.

After the Conditional Block, we create one more two-column layout with the help of the Columns block.

In the left column, we add the Prev Page block with the “Previous step” FIELD LABEL.

Adjust the style settings according to your preferences.

the first prev page button style settings

In the right column, we put the Next Page block with the “Next” FIELD LABEL.

Adjust the style settings according to your preferences.

Now, we add one more Form Page Break block to indicate the end of the second part of the form.

Then, we add one more Heading block, “Additional Information.”

In this case, the style settings can be adjusted in the block settings.

Next, we add a Spacer block to the form.

The following field is the Textarea Field named “Cover Letter.”

Adjust the style settings according to your preferences.

Now, let’s add one more Spacer.

The next field is a Text Field with the “Portfolio URL” FIELD LABEL.

Adjust the style settings according to your preferences.

After that, we add one more Spacer.

Then, we add one more Textarea Field block called “Additional Comments.”

Adjust the style settings according to your preferences.

We add one more Spacer to the form.

Then, we create one more two-column layout with the Columns block.

In the left column, we put the Prev Page block with the “Previous step” FIELD LABEL.

Adjust the style settings according to your preferences.

In the right column, we put the last block of the form, the Action Button block with the “Save and complete” FIELD LABEL.

Adjust the style settings according to your preferences.

Now, let’s adjust the Post Submit Actions. To do so, open the JetForm tab of the settings and find the Post Submit Actions section.

Press the “New Action” button.

Select the “Save Form Record” action from the drop-down list. This action saves all form submissions on the Form Records Page.

You can customize the action by pressing the “pencil” button if needed.

However, now, we leave the default settings.

Now, we add one more action, “Send Email.” This action will send an email whenever the form is submitted.

Adjust the action settings by pressing the “pencil” button and completing the needed fields.

In our case, we want to get an email sent to the admin email once the form is submitted, so we adjust it accordingly.

Once done, press the “Update” button.

Whenever the form is ready, you can click the “Publish/Update” button to save the result.

Now, go to the page where you want to place the form. It can be a page built with either Gutenberg, Elementor, or Bricks page builders.

We will work in Gutenberg, but the settings in the mentioned builders are the same.

Find the JetForm block/widget/element and place it on the page.

Select the needed form in the CHOOSE FORM drop-down list, adjust the form settings if necessary, and press the “Publish/Update” button.

Go to the front end of the just-edited page to check the result.

Now, the first part of the form is displayed.

Let’s complete it to check if the form works correctly.

Press the “Next” button whenever you complete the fields.

the first part of the form on the front end

Complete the second part of the form and press the “Next” button.

the second part of the form on the front end

Complete the third part of the form and press the “Save and complete” button.

If everything is fine, you will see the message of successful form completion.

Let’s see if the “Send Email” post submit action also works properly.

Now, let’s check the WordPress Dashboard > JetFormBuilder > Form Records to see the new form submission.

Here it is, in the list. Click on the “View” button that appears once you hover over the item to check the details.

You can now see the details of the applicant’s form submission.

That’s all; now you know how to build a job application form using the JetFormBuilder plugin for WordPress.

WordPress Job Application Form Pro Features

Posted on February 20, 2024February 20, 2024 by Daria Akshonova

Build a lead-capture form that will gather information about the website users in exchange for great deals like some valuable information or discount offers.

Why You Need a WordPress Lead-Capture Form

Lead-capture form is a versatile tool for gathering data on your WordPress website. Such forms can collect information through simple form fields or surveys. The data collected can be used for sending promotional offers and understanding your audience’s needs better.

Having a lead-capture form on the WordPress website will help you get needed responses and keep users engaged if they find the content in return valuable. For instance, after completing the form, the user will receive a unique discount code or access to useful educational materials.

The type of services you offer determines how you can use the lead-capture form on your WordPress site. For instance, let’s look through several possible cases:

Web development agency. Create the marketing-qualified lead form with relevant questions. For example, ask about the budget allocated for website development to quickly identify whether a potential client meets your criteria.
E-commerce. Build a “Limited Offer” form or one-click purchase form with no registration required.
Small business. Adjust the multi-step questionnaire with the demo product bonus that serves as a lead qualification and reveals the user’s motivation thanks to clarifying questions.

Top WordPress Lead-Capture Form Features

Add and customize necessary fields to make the form engaging;
Create a user-friendly form with multiple steps;
Decide which form fields you want to make Required;
Implement conditional logic to dynamically display or hide form fields;
Use reCAPTCHA v3 validation to protect the application form from spam;
Adjust email notifications and fill them with tempting offers;
Save the received form submissions into one convenient dashboard list;
Create a desired design of the form in the Block Builder, Elementor, or Bricks;
Integrate the form with email marketing services like Mailсhimp, GetResponse, Active Campaign, Zapier, Make, etc.

WordPress Form Pattern Structure

Step 1 — User information

Progress Bar. A field to begin a multi-step form creation process;
First Name and Last Name. Required Text fields to find out the user’s name;
E-mail. A Text field with the “Email” FIELD TYPE to get the email where the offer will be sent;
Phone Number. A Text field with the “Tel” FIELD TYPE in case you need the user’s phone number. For instance, to set the SMS marketing;
“Next” button. A Form Page Break field that will serve as the “Next” button. It also lets changing the first step of the progress bar.

Step 2 — Introductory questions

Progress Bar. One more Progress Bar for the second part of the form;
Radio Field with a question. A field with the “Have you already used our services?” question and “Yes” and “No” answers to implement the Conditional Logic based on the given answer;
Conditional Logic. A block for the “Yes” answer given in the previously added Radio Field, which contains the Textarea Field with the corresponding question;
Conditional Logic. A block for the “No” answer with the corresponding Textarea Field inside;
“Next” button. A button to move to the next part of the form.

Step 3 — Final part of the questionnaire

Progress Bar. A step indicator of the last part of the form;
Questions Part. Any desired fields like Radio, Checkbox, Textarea, etc., to get the needed information;
“Terms and Conditions” Field. A Checkbox Field with the link to the “Terms and Conditions” page, which is vital in order to provide a personal data consent agreement;
“Submit” button. A button that will send the submitted form;
Final Form Page Break. The last step is the name of the Progress Bar.

How to Create a Custom WordPress Lead-Capture Form

Head to WordPress Dashboard > JetFormBuilder > Add New.

Initially, the form includes the Welcome Block with form patterns. As we don’t need them now, we press the “Start from scratch” button to build our own form.

Here, you will see that some blocks are added to the form by default. These are the Hidden Field, Text Field, and Action Button blocks, which can be deleted if you don’t need them to be in the current form.

To add another content to the lead-capture form, you can use Gutenberg blocks. Open their list by pressing the plus-shaped button and type in the needed block name to find it easily.

The form we give in this tutorial is an example of the lead-capture form that you can recreate on your website or build your own form that will be more suitable for your needs.

We begin with the Progress Bar block that will make a start to our multi-step lead-capture form. It will give users an understanding of how quickly this form can be completed.

It doesn’t have any settings, so we move on to the next field.

We begin building our form with the Columns block to make the two columns layout with fields inside.

There, we place two Text Fields indicating the “First Name” and “Last Name” fields.

One more row of two columns containing two fields will represent the “E-mail” and “Phone Number” fields.

For the “E-mail” field, we set the “Email” FIELD TYPE, and for the “Phone Number” field, we set the “Tel” FIELD TYPE accordingly.

For the phone number field, we also set the INPUT MASK.

To finalize the first form page, we add the Form Page Break block.

Also, we change the LABEL OF PROGRESS that will be displayed as the first step of the Progress bar.

form page break for the first part of the form

In the second part of the form, we begin with the Progress Bar block as well.

progress bar for the second part of the form

The first form field we add to the second part is the Radio Field with the “Have you used our services before?” FIELD LABEL.

This field is also set to be obligatory.

In the FILL OPTIONS FROM selector, we pick the “Manual Input” option and click the “Manage items” button.

Once the editing pop-up opens, we push the “Add new Option” button to create radio options manually.

add new option in the edit manual options pop-up

We build two options: one has the “Yes” LABEL and the “yes_answer” VALUE, and the other has the “No” LABEL and the “no_answer” VALUE correspondingly.

To save the options, we press the “Update” button.

The following logic we want to implement is different Textarea Fields displayed depending on the selected option in the previous “Have you used our services before?” Radio Field.

It can be done with the help of the Conditional Block, so we add it to the page.

Right in the Conditional Block, we place the Textarea Field block named “Please, tell us more about your experience.” and set this field to be required.

Then, we return to the Conditional Block customization. In the Conditions tab, we click the “Add new” button in the corresponding window.

In the first WHICH FUNCTION NEED EXECUTE? selector, we pick the “Show if…” option.

As the FIELD value, we set the “Have you used our services before?” Radio Field we built previously.

The OPERATOR should be set to “Equal” and VALUE TO COMPARE to “yes_answer.”

That’s it with adjusting this Conditional Block, so we press the “Update” button.

Then, we add one more Conditional Block, this time for the “No” option of the “Have you used our services before?” Radio Field.

Once added, we also put the Textarea Field inside the Conditional Block.

Its LABEL is set as “Why? Are you considering using our services later?” and the field itself is set to be required.

why textarea field in the conditional block

Now, we return to the Conditional Block settings to adjust conditions, as in the previous case, in the conditions pop-up.

In the WHICH FUNCTION NEED EXECUTE? selector, we pick the “Show if…” option.

Here, as the FIELD value, we also set the “Have you used our services before?” Radio Field.

Then, we pick the “Equal” OPERATOR and “no_answer” as VALUE TO COMPARE.

To save the conditions, we push the “Update” button.

To finalize the form page, we add the Form Page Break field and set its LABEL OF PROGRESS to “Travel Experience.”

The final part of the form will also begin with the Progress Bar block.

progress bar for the third part of the form

Now, we add one more Radio Field block to the form called “Do you like our website?”, set it to be required, and pick the “Manual input” option as FILL OPTIONS FROM.

To edit radio options, we press the “Manage options” button.

We add two options, with “Yes” and “No” LABELS, but this time, VALUES will be set to “yes_website” and “no_website” accordingly (as the VALUE field should include only unique identifiers and we already have “yes_answer” and “no_answer” VALUES used.)

Don’t forget to click “Update” so the changes are saved.

Now, we will implement one more conditional logic depending on the selected option in the “Do you like our website?” Radio Field.

So, we add a Conditional Block to the page and place the Checkbox Field inside it.

This field is obligatory; it is called “What do you like about our website?” and has the “Manual Input” FILL OPTIONS FROM option selected.

To edit the checkbox options, we push the “Manage options” button.

what do you like about the website checkbox

In the Edit Manual Options pop-up window, we complete the needed options and press the “Update” button.

Inside the current Conditional Block field, we also place the “If possible, please provide additional details.” Textarea Field.

Then, we return to the Conditional Block field settings to adjust the conditions.

The WHICH FUNCTION NEED EXECUTE? field is completed with the “Show if…” option.

The FIELD is now set to the “Do you like our website?” option, which is the LABEL of our Checkbox Field block.

The OPERATOR is “Equal,” and the VALUE TO COMPARE is “yes_website,” which was attached earlier to the “Yes” option VALUE of the Checkbox Field block.

The conditions should then be activated with the “Update” button.

conditional logic pop-up for yes answer about website

Now, we add one more Conditional Block to our form for the “No” option of the Checkbox Field.

Inside, we place the Textarea Field block, which is obligatory for the completion and is called “Sorry to hear that 🙁 Please, tell us more about your experience.”

In the conditions settings of this Conditional Block, we set almost the same options as in the previous Conditional Block field: “Show if…” in the WHICH FUNCTION NEED EXECUTE? field, “Equal” in the OPERATOR field, and the “no_website” VALUE TO COMPARE as it is the VALUE of the “No” option Checkbox Field block.

Now, we click the “Update” button.

conditional logic pop-up for no answer about website

The following Checkbox Field block will be put outside the Conditional Block.

This field will aim to provide the “Terms and Conditions” document to the users who complete the form so they can read the information and agree if applied.

So, the “Manual Input” should be picked in the FILL OPTIONS FROM field. Once done, click the “Manage options” button to open the pop-up with editing fields.

The LABEL of the only option in our case will be set to “Please check the box to indicate your agreement with our <a href=”https://crocoblock.com/terms/” target=”_blank” >terms and conditions</a> before submitting the form. ”

So, in the middle of the label, we put the following piece of code that will turn the needed part of the text into the link:

<a href=”https://crocoblock.com/terms/”>terms and conditions</a>

Here, “https://crocoblock.com/terms/” is the website page with the terms of use, and “terms and conditions” is the text that will contain the link.

We also set the VALUE to a shorter version of the field LABEL and hit the “Update” option.

The following “Is it okay if we share your feedback on our website?” RADIO FIELD with the “Manual Input” source (the FILL OPTIONS FROM field) will be required.

After the “Manage items” button is clicked, we create two options with the “Yes” and “No” options with the “yes_feedback” and “no_feedback” VALUES correspondingly.

After completing the needed options, we push the “Update” button.

The next block is the Action Button, the one that will end the form completion.

In the button settings, we change the FIELD LABEL to “Get Discount.”

The final block of the form is another Form Page Break field that is added to change the last page of the form Progress Bar.

So, we deactivate the Enable “Next” Button toggle and type in the “Website Experience” in the LABEL OF PROGRESS field.

That’s all with the form fields. Now, we move to the Post Submit Actions tab to adjust the action once the form is submitted.

The first action we set is “Send Email.” We click the pencil-shaped button to edit the settings.

pencil-shaped button next to post submit action

In the pop-up, we select the “Email from submitted form field” MAIL TO option and pick the “Email” field as the FROM FIELD source.

We also specify the SUBJECT, FROM NAME, and FROM EMAIL ADDRESS values.

The CONTENT TYPE is set to “Plain Text,” and CONTENT is filled in with the following text:

“Hi, %first_name%!

Your discount is here:

DISCOUNT10

Balirento.”

To save the action settings, we push the “Update” button.

The following action is going to be “Save Form Record,” which will save the data about the completed fields in the Form Records directory of JetFormBuilder.

We will not alter settings in the pop-up; the default ones are okay in the described case.

Now, move to the page you want to add the form to. For instance, it can be the landing page of your website.

So we can find it in the WordPress Dashboard > Pages directory and press the “Edit” button next to the needed option. Or, build a new page with the “Add New” button.

The page can be edited with Gutenberg, Elementor, or Bricks.

Once the editor is opened, find the JetForm block/widget/element in the search bar and add it to the page.

Open the JetForm settings. Initially, select the needed form in the CHOOSE FORM selector.

Work on the following settings depending on your needs, and when the page is ready, press the “Publish/Update” button.

Proceed to the just edited page on the front end. Now, let’s complete the form to check if the form works correctly.

In the second part of the form, we see only one Radio Field. But, if we select one of the options, additional fields that we have put earlier in the Conditional Block will be shown.

If the “Yes” option is selected, the “Please, tell us more about your experience.” Textarea Field is displayed.

the yes answer in the second part of the form

But if the “No” option is selected, the “Why? Are you considering using our services later?” Textarea Field is displayed.

the no answer in the second part of the form

In the “Do you like our website?” Radio Field, there are also two options that can be selected to trigger the appropriate fields.

If the “Yes” option is selected, the “What do you like about our website?” Checkbox Field and “If possible, please provide additional details.” Textarea Field are displayed.

Also, in the “What do you like about our website?” Checkbox Field, users can add custom options if desired by pushing the “Add New” button.

the yes answer in the third part of the form

And if the “No” option is selected, the “Sorry to hear that 🙁 Please, tell us more about your experience.” Textarea Field is displayed.

The following Checkbox Field includes the terms and conditions link added.

The user will be redirected to the “Terms of Use” page if they click on the button. This page will be opened in a new tab.

Also, there is the last “Is it okay if we share your feedback on our website?” Radio Field and the “Get Discount” button.

So, once we click on the button, the form is submitted.

It’s time to check the email we have entered in the first part of the form. The letter with the discount has already been sent there.

As we can see, it says:

“Hi, John!

Your discount is here:

DISCOUNT10

Balirento.”

Here, instead of the %first_name% macro we put in the CONTENT field, there is actually the name displayed, the one that was completed earlier in the “First Name” Field.

Now, let’s check if the second “Save Form Record” Post Submit Action has also worked.

Go to WordPress Dashboard > FormBuilder > Form Records.

In the list of records, find the recently added record. Click the “View” button to check if all the needed information has been collected.

Here, we can see the data we recently entered in the form.

That’s all; now you know how to build a high-performance lead-capture form on your WordPress website with the JetFormBuilder plugin.

WordPress Lead-Capture Form Pro Features

Posted on February 2, 2024February 2, 2024 by Daria Akshonova

This tutorial describes an application of the Hidden and Calculated field types in JetFormBuilder Forms to calculate values using formulas.

Hidden and Calculated Field Types
Build a Form
Add a Form to the Page
Check the Form on the Front End

Hidden and Calculated Field Types

Let’s clear up what the Hidden Field means. In fact, the name speaks for itself. This field can contain the value that will not be visible on the front but can be used for calculations.

Calculated Field helps you make any calculations using math formulas based on macros and display the result on the front end. You can take the values for the formulas either from meta fields created previously for your custom post or from the fields filled on the front end by users.

Let’s consider an example of using these fields. We’ll create a short form for a product purchase.

Build a Form

Initially, go to WordPress Dashboard > JetFormBuilder > Add New to build a form.

We delete all the default fields to build a form from scratch.

Primarily, we add a Number Field to display the product’s price. Complete its FIELD LABEL and FORM FIELD NAME fields.

We also set this field as required by pushing the asterisk-shaped button above the field.

Then, we scroll down to the Value tab and set the DEFAULT VALUE to “20,” the value that will be set as default in this Number Field when opening the form.

Feel free to manually set any needed value here or push the “Dynamic Content Tag” button to see the available options for dynamic data pulling.

Then, we place one more Number Field in the editor. This time, it will be called “Quantity” and will let users pick the number of the needed items.

Here, we complete the FIELD LABEL and FORM FIELD NAME fields as well.

Also, we complete the MIN VALUE and MAX VALUE fields in the Field tab with the numbers that will limit the entered quantity.

Now, we add the Hidden Field. In this tutorial, we’ll create a field for tax, which will be further added to the final price so that visitors won’t see the “Tax” field separately on the front end, but its value will be used in the formula calculating the “Total Price.”

Initially, we complete the FIELD LABEL and FORM FIELD NAME fields.

Next, we select the “Current Post Meta” as the FIELD VALUE option and input the meta field name ID into META FIELD TO GET VALUE FROM.

This value stands for pulling data from the meta field.

It can be filled in by opening the post editor of the post type to which the meta field is attached. In the given case, we use JetEngine’s meta box attached to the default WordPress “Pages.”

Now, back in the form, we add a Calculated Field to see how the Hidden Field can be used with it.

This field’s purpose is to calculate the total price of the product, including tax.

So, complete the FIELD LABEL and FORM FIELD NAME fields of this Calculated Field.

Right in the Calculated Field, we should input a math formula, which will further calculate the product’s total price depending on the quantity a visitor selects and the tax.

In this particular case for our tutorial, the calculation formula consists of product quantity multiplied by the product price plus tax:

%price_field%*%quantity_field%+%tax_field%

where %tax_field% is a Hidden Field.

Also, we set the CALCULATED VALUE PREFIX in the Field tab. It will be displayed on the front end later.

The last field we added is called Action Button, and it will serve as the submit button for the form.

When your form is ready, click the “Publish” button.

Add a Form to the Page

Go to the page editor where you want to place the form. It can be either Gutenberg, Elementor, or Bricks page builders.

Find the JetForm block/widget/element and place it on the page.

Once the page is customized, press the “Publish/Update” button to save the result.

Check the Form on the Front End

Open the page on the front end to see the form in work.

In our case, the “Price” and “Quantity” fields are visible, and the “Tax” field is not; however, in the total calculation formula, its value is considered.

We can describe it as a math formula:

20 (“Price”) * 1 (“Quantity”) + 5 (“Tax” (Hidden Field)) = 25

If a visitor changes “Quantity,” the formula still calculates the total price considering the “Tax” value.

That’s all. Now you know how to use Hidden and Calculated Field types to create formulas based on the values from the JetFormBuilder form fields on your WordPress website.

Posted on February 1, 2024February 2, 2024 by Daria Akshonova

With the help of the JetFormBuilder plugin, it is possible to create a front-end registration form with email confirmation. To register on the site, the user should input the login and email address and follow the verification link sent to the mailbox. Once the user follows the link, the registration process is completed.

Email verification helps validate the user request before the form is submitted. Also, it makes the registration process fast and effortless — creating a password to complete the registration is not required. The user can use an automatically generated password to log in to the site in the future.

Create a New Form
Set Up Post Submit Actions
General Messages Settings
Display the Form on the Front End
Test the Flow
Verify Emails Manually from the WordPress Dashboard

Create a New Form

In the WordPress Dashboard, navigate to the WordPress Dashboard > JetFormBuilder > Add New tab to start creating a new form.

In the form editing page, enter the form name.

The form will contain two Text Fields and one Checkbox Field. The first Text Field will allow the user to enter the email address, and the second Text Field will allow entering the login. The Checkbox Field will serve as a “Remember Me” field.

In the Welcome block, pick the “Register User” pattern.

It adds two Text Fields: “Email” and “Login.”

In the right sidebar with Block settings, you can change the FIELD LABEL and FORM FIELD NAME of the Text Fields according to your preferences.

Also, note that the FIELD TYPE of the “Email” field should stay as “Email.”

Then, add a Checkbox Field below. Leave the FIELD LABEL empty and define the FORM FIELD NAME — for example, type “remember-me.”

Press the “Manage items” button to configure the options for this Checkbox Field.

creating remember me checkbox in jetformbuilder registration form

In the opened pop-up, click the “Add new Option” button. Complete a LABEL field — “Remember Me.” Insert “1” as the VALUE option.

Once done, “Update” the changes.

Set Up Post Submit Actions

Switch the Block settings tab in the right sidebar to the JetForm tab. Unfold the Post Submit Actions section.

The “Register User” pattern added three post-submit actions: “Verification,” “Register User,” and “Save Form Record.”

Configure the “Verification” action

Click the “pencil” icon under the “Verification” action to open the customization pop-up.

The “Verification” action sends an email with a verification link to the specified email address. The user should press this link within the defined timeframe to complete the verification. Once the verification is complete, the rest of the Post Submit Actions will be executed.

The WHO CAN VERIFY THE SUBMISSION setting defines who has the authority or capability to verify or approve a submitted form:

User & Administrator. The user can verify the form with the email, and the admin can verify it manually from the WordPress Dashboard;
Administrator. Only administrators have the authority to verify the submission.

After setting the verification permission, enter the number of hours into the LINK LIFESPAN field. This setting defines the timeframe within which the verification link remains active. If the LINK LIFESPAN field is left empty or if “0” is entered, the verification link will not have an expiration time.

After that, choose the email field from the suggestions under the EMAIL FIELD drop-down menu. Once the email field is specified, a new toggle will appear, encouraging you to Create custom verification email.

If the toggle remains disabled, a standard email will be sent to the user from the Administration Email Address set in the WordPress Dashboard > Settings > General tab.

standard email verification letter of jetformbuilder

Enable the Create custom verification email toggle and proceed to the rest of the action settings. We will set up the “Send Email” action later.

Move on to the SUCCESS PAGE and the FAILED PAGE settings. Select a page where the user should be redirected in case of a successful or failed verification. If no page is selected, the user will be redirected to the page where the form was initially submitted. It is also possible to “configure a separate Redirect to Page action” for each case.

In our example, we will redirect the user to a “My Account” page after successful verification and to a static “Verification Failed” page if the user fails to complete the verification.

Once you finish the setup of this action, click the “Update” button to save the changes.

Set up the “Register User” action with an auto-generated password

Press the “pencil” icon to edit the “Register User” action’s settings.

In the FIELDS MAP section, the “Email” and “Login” fields are already mapped. Therefore, the value entered by the user into the “Login” field will be saved as the user login, and the value of the “Email” field will be saved as the user’s email.

the Password and the Confirm Password fields with the “Secure unique token” option. The “Secure unique token” option is added by the “Verification” action and represents a unique password auto-generated after form submission. This way, the form lets the user sign up with only their email and login, not requiring them to create a password manually at this stage. Later, this password will be sent to the user with a “Send Email” action.

Scroll past the FIELDS MAP section and select the User Role, which should be assigned to the newly registered user (e.g., “Subscriber”).

Next, scroll down to find and activate the Log In User after Register: toggle. This way, the user will be automatically logged in after completing the verification process.

Select the “remember-me” Checkbox Field as the “REMEMBER ME” FIELD option. This field helps to keep the user authenticated for a longer period of time — after checking the “Remember Me” checkbox, the user will remain logged in for fourteen days; if not, only for two days.

We have finished setting up the “Register User” action. Save the settings and proceed to the next step.

“Save Form Record” action

The “Save Form Record” action stores the submitted form data on the Form Records Page. On this page, you can verify emails manually as described in the Verify Emails Manually from the WordPress Dashboard chapter of this tutorial.

In our case, we don’t need to modify the action settings, but you can configure them according to your needs.

Add a “Send Email” action for a custom verification email

Now, it is time to create a custom verification email.

Open the settings of the “Verification” action once more to click the “+ Add Send Email action” button. It will automatically add a new “Send Email” action where each part of the verification email can be customized.

Leave the MAIL TO and FROM FIELD settings intact and proceed to configure the rest of the fields.

After setting up the REPLY TO, SUBJECT, FROM NAME, and FROM EMAIL ADDRESS fields, select the “HTML” CONTENT TYPE to allow the processing of HTML tags in the content of the email.

Then, edit the content of the email according to your needs. It is also possible to insert Macros to retrieve the values entered by the user into the form fields. To see the list of available Macros, click the wrench-shaped icon near the CONTENT field label.

The list contains general Macros that represent each form field and three special Macros added by the “Verification” action:

%_jfb_verification_token% — represents a unique token generated for the user. If this token was set as the user password in the “Register User” action settings, you can insert the %_jfb_verification_token% macro in the email content to send the user this automatically generated password. The user will use it to log in;
%_jfb_verification_token_id% — represents the ID of the verification token in the database. A reference to each verification token is saved in the “jet_fb_tokens” database table; however, the token itself is not stored there;
%_jfb_verification_url% — a verification link the user receives to complete the verification process. The link contains the verification token and its ID.

We used only the %_jfb_verification_url% macro from the above list and composed such an email:

“Please confirm your registration on the site %CT::SiteName%.

<b>If this was a mistake, ignore this email, and nothing will happen.</b>

To complete the registration, click on the link:

%_jfb_verification_url%

The link expires in 4 hours!”

Click the “Update” button to close the customization window and proceed to the following “Send Email” action.

Add a “Send Email” action to send the password details

The next step is to compose an email, which will be sent to users after they complete the registration. The letter will include an automatically generated password that users can utilize to log into the site until they opt to modify it.

Press the blue “+ New Action” button to add a new “Send Email” action, and click the pencil-shaped icon under the action name to call the customization pop-up.

Select the “Email from submitted form field” option for the MAIL TO field. Then, pick the “Email” field in the FROM FIELD drop-down menu, which appears below.

After setting up the REPLY TO, SUBJECT, FROM NAME, and FROM EMAIL ADDRESS fields, select the “Plain Text” CONTENT TYPE option. To allow the processing of HTML tags in the content of the email, select the “HTML” CONTENT TYPE.

Finally, compose the content of the letter, which the users receive after they complete the registration. Include the %_jfb_verification_token% macro to send the users their auto-generated passwords.

We composed such a letter:

“Your registration on [%CT::SiteName%] is completed. Follow this link to enter your account:

https://test-site/account/

This is your temporary password: %_jfb_verification_token%

You can change the password in Profile Settings:

https://test-site/account/settings/”

Once you are finished with the settings, “Update” the changes.

General Messages Settings

Scroll past the Post Submit Actions settings tab and unfold the General Messages Settings. Settings in this tab allow changing the default notifications that pop up after the form submission.

Most importantly, change the default FORM SUCCESSFULLY SUBMITTED message and encourage users to check their mailbox after they submit the form. For example: “Please, check your email inbox to complete the registration.”

Once you finish customizing the form messages, the form is complete. Hit the “Publish/Update” button to save the result.

Display the Form on the Front End

Head to the page or template where the registration form should be located.

If editing the page with Block Editor, use the JetForm block to display the form in the needed part of the page.

If editing with Elementor, use the JetForm widget to place the form on the page.

For more details, follow the detailed How to Display a Form on the Front End guide to learn how to add the form in any page builder.

Test the Flow

Move to the front end and complete the form to register a new user. Use an email address you can access.

Check the email inbox for a new letter containing the verification link. Follow the link to complete the registration.

click the link in the inbox to complete the registration

After following the link, one should be redirected to the page previously selected in the settings of the “Verification” action. The registration is complete, and a new user is created in WordPress.

Also, the second email is sent to the user containing the password to the account.

auto-generated password is sent to the registered user in email

Verify Emails Manually from the WordPress Dashboard

With the “Save Form Record” post-submit action, you can reach the submitted form data in the WordPress Dashboard > JetFormBuilder > Form Records tab.

If the form has the “Verification” action, the submitted form can have three Statuses:

Verified – if the user verified the form from the email or the administrator verified it manually. You can set who can verify the form (only admin or user and admin) in the “Verification” action WHO CAN VERIFY THE SUBMISSION setting;
Waiting verification – if the user or admin hasn’t verified the form yet;
Verification token expired – if the user or admin didn’t manage to verify the form in the timeframe set in the LINK LIFESPAN settings of the “Verification” action. Then, the user needs to submit the form one more time to verify it.

If the submitted form has the “Waiting verification” Status, it contains the “Verify manually” action by clicking which the form obtains the “Verified” Status.

If you hit the “View” action under the form with the “Verification” post-submit action, you’ll see the Verification section.

This section shows the verification Status: “Pending,” “Expired,” or “Verified.” It also displays the time when the verification Expires, Expired, or was Verified according to the Status.

If the verification has a “Pending” Status, the section contains the “Verify” button with which the administrator can verify the form.

Also, pay attention to the Actions Log sections: if the form is expired or waiting for verification, only two actions are completed: “Verification” and “Send Email” with the custom verification email.

If the user or administrator verifies the form, the next two actions are completed: “Register User” and “Send Email” with the password details.

That’s it; you have learned how to create a registration form with a double opt-in using only the free version of the JetFormBuilder plugin.

Posted on January 30, 2024March 18, 2024 by Daria Akshonova

This overview is about the Welcome block available with the JetFormBuilder plugin.

Contact Form
Feedback
Newsletter Signup Form
Insert Post
Register User
Paypal Donation
Reset Password
User Login
Generate via AI

The Welcome block is displayed by default whenever a new form builder is opened in the WordPress Dashboard > JetFormBuilder > Add New directory.

The Welcome block can also be added with the help of the block inserter. It can be accessed by pushing the plus-shaped button at the top of the form.

Here, it can be found by typing “Welcome” in the search bar.

There are the following patterns in the block:

Contact form;
Feedback;
Newsletter Signup Form;
Insert Post;
Register User;
Paypal donation;
Reset Password;
User Login;
Generate via AI.

These patterns are fully customizable, which means that the fields can be added, edited, and deleted freely within any selected preset.

The form can also be set manually. To create a fully custom form, one should press the “Start from scratch” button.

In the Welcome block, there is also the Save form records toggle available; it is activated by default.

This toggle adds the “Save Form Record” Post Submit Action to the form to store all the form submissions in the database.

Now, we will look through all the presented patterns.

Contact Form

This pattern creates a simple contact form, allowing users to provide their email address, clarify the subject, and attach their message with the help of two Text Fields (“Email” and “Subject”), one Wysiwyg Field (“Message”), and an Action Button.

With the Contact Form pattern, the “Send Email” Post Submit Action is also added. It can be checked in the Post Submit Actions tab of the JetForm settings tab.

After pushing the pencil-shaped “Edit” button, one can see that the action is already configured.

The MAIL TO field is set to the “Email from submitted form field” option, and the FROM FIELD is already connected to the “Email” field of the form.

The SUBJECT field contains the “%subject%” macro. It is generated from the “Subject” field and will include the value the user will type in this field.

the first part of the send email action for the contact form

Also, the CONTENT field is completed with the “%message%” macro, which means that the body of the email will be taken from the “Message” field.

If there are some changes made to the action, they can be saved by pushing the “Update” button.

the second part of the send email action for the contact form

Feedback

With the Feedback pattern, the admin can get valuable information about the website work based on the users’ feedback.

This pattern contains the “Name” and “Email” Text Fields, “Please rate our website” Radio Field, “How would you suggest to improve it?” Textarea Field, and an Action Button.

The Post Submit Action is set to “Send Email” in this case.

In the Edit Action pop-up, one can notice that the MAIL TO field is completed with the “Email from submitted form field” option and the FROM FIELD is assigned to the “Email” field of the form.

The SUBJECT is set to the static “User feedback” text.

the first part of the send email action for the feedback form

The CONTENT of the email is set to be in the following format:

Name: %name% – %rating%<br/>%how_improve

where %name% is the “Name” Text Field value, %rating% is the “Please rate our website” Radio Field value and %how_improve% is the “How would you suggest to improve it?” Textarea Field value.

the second part of the send email action for the feedback form

This pattern consists of one Text Field and an Action Button letting users provide their e-mail addresses to subscribe to newsletters.

The Post Submit Action added in this case is “MailChimp.” In its Edit Action window, the API KEY can be pasted.

Insert Post

The pattern that allows creating posts includes the following fields: “Post Title” Text Field, “Post Excerpt” Textarea Field, “Post Content” Wysiwyg Field, and an Action Button.

Also, the “Insert/Update Post” Post Submit Action is attached to this pattern.

It has the prefilled settings, which can be changed.

The POST TYPE is set to the default WordPress “Posts.”

The FIELDS MAP is also completed and includes the form fields connections with the corresponding drop-down list options.

the insert update post action for insert post form

Register User

This pattern is for user registration; it consists of two Text Fields indicating “Email” and “Login” and an Action Button.

With this pattern, the “Verification” and “Register User” Post Submit Actions are added to the form.

For the “Verification” action, the following settings are preset: the WHO CAN VERIFY THE SUBMISSION is set to “User & Administrator” and LINK LIFESPAN to “4.”

the verification action for the register user form

The “Register User” action also has the FIELDS MAP set with the fields to get user data from.

the register user action for the register user form

Paypal Donation

This pattern allows website users to make a donation via PayPal with the help of one Text Field and an Action Button.

With this pattern, the “PayPal Checkout” option is set in the Gateways Settings tab.

Its settings can be checked by clicking the “Edit” button below.

In the PayPal Checkout Settings pop-up, the current form can be linked to the PayPal account.

Reset Password

The Reset Password form pattern allows already registered users to reset their password with Reset Password Fields and an Action Button.

This pattern consists of two parts. The first one includes the “User login/email” Text Field.

One can switch to the second part by clicking the needed state’s name (“Reset”) in the EDIT STATE section of the Reset Password Fields block.

In the “Reset” state, there are two more fields that can be edited: “Input new password” and “Confirm new password.”

With this pattern, the “Reset Password” Post Submit Action becomes active.

In its editing pop-up, the USER FIELD is connected to the “User login/email” field, the PASSWORD FIELD – to the “Input new password” field, and the CONFIRM PASSWORD FIELD – to the “Confirm new password” field.

the reset password action for reset password form

The User Login pattern is a form that can be used for user login with their credentials.

This form pattern includes the following fields: “Login / Email” and “Password” Text Fields, a “Remember me” Switcher Field, and an Action Button.

With this pattern, the “User Login” Post Submit Action is also added.

All the form fields there are connected to the needed fields for action: “Login / email” to USER LOGIN FIELD, “Password” to USER PASSWORD FIELD, and “Remember me” to REMEMBER FIELD.

the user login action for user login form

Generate via AI

The button that allows one to generate a form pattern based on the AI prompt.

Once clicked, the Generate Form with AI pop-up opens.

In this pop-up, one can write the needed prompt in the DESCRIBE THE FORM YOU WANT field.

Also, there are Tips to write good prompt and Examples of good prompts available. The last mentioned examples can be clicked to fill in the DESCRIBE THE FORM YOU WANT field automatically.

Whenever the request is filled in, the “Generate” button will be visible.

describe the form with ai field completed

Once the “Generate” button is clicked, the pattern will be created.

Here, the fields will appear the way they will be later displayed in the form.

To save the result and add it to the page, the “Use this form” button should be pressed, and to regenerate the content, one should push the “Change generation prompt” button.

The generated form can be edited as the usual form: one can edit fields, delete them, or add new content.

That’s all about the Welcome Block available with the JetFormBuilder plugin for your WordPress website.

Posted on December 5, 2023December 5, 2023 by Daria Akshonova

The JetFormBuilder plugin provides the JetForm block for Block Editor, JetForm widget for Elementor, and JetForm element for Bricks Builder to help you display a ready form on the front end. Let’s take a closer look at their settings.

JetForm Block in Block Editor
JetForm Widget in Elementor
JetForm Element in Bricks Builder

JetForm Block in Block Editor

The Form Settings tab of the JetForm block consists of the following options:

FIELDS LAYOUT — defines the positioning of the input field and its label. The layout can be set to the default “Column” or the “Row” option. In the first case, the label will be displayed over the input, while in the second one, they will be in the same row;
REQUIRED MARK — sets a symbol that will mark mandatory fields. The field can be left empty to mark required fields with an asterisk symbol;
FIELDS LABEL HTML TAG — one can select between “DIV” and “LABEL” HTML tags for the representation of the field label. The default tag is “LABEL”;
SUBMIT TYPE — defines how to process the Post-Submit Actions after the Action Button (formerly Submit Field) is pressed. If the “Page Reload” option is selected, the page will be reloaded after form submission; if “AJAX” is set, the page won’t be reloaded, and the post-submit message will appear immediately;
Enable form pages progress — this toggle can be enabled to display a progress bar with a step indicator at the top of the form. It is recommended to enable form page progress if the form is divided into several steps with the Form Break Field.

The Advanced tab presents the default WordPress settings:

advanced settings of the jetform block of jetformbuilder

BLOCK NAME — sets the block name;
HTML ANCHOR — allows a text string without spaces. An anchor makes it possible to link a specific section where the current block is located, so when the users follow the URL, the page is scrolled down or up to this block;
ADDITIONAL CSS CLASS(ES) — here, one can input one or several CSS classes to target the block easily with custom code.

The “Form Block Style Settings” guide explains how to style JetFormBuilder blocks with the help of the JetStyleManager plugin.

JetForm Widget in Elementor

The widget presents a Form Settings tab with a list of settings:

Choose Form — a drown-down list of form titles. Here, one should select the form to display;
Fields Layout — defines the positioning of the input field and its label. One can opt for the “Column” layout, the default setting, or choose the “Row” layout. In the first case, the label will appear over the input field, while in the second, they will align within the same row;
Required Mark — sets the symbol to indicate mandatory fields. By default, required fields are marked with an asterisk symbol;
Fields label HTML tag — one can select between “DIV” and “LABEL” HTML tags to represent the field label. The default tag is “LABEL;”
Submit Type — the “Page Reload” option makes the page reload after form submission, and the “AJAX” option prevents page reloading;
Enable form pages progress — shows a progress bar featuring a step indicator at the top of the form. Enabling form page progress is appropriate if the form is segmented into multiple steps using the Form Break Field.

JetForm Element in Bricks Builder

The FORM SETTINGS toggle unfolds the following settings:

jetform element settings in bricks builder

Choose Form — here, one should select the title of the form, which should be displayed;
Fields Layout — defines how the input field and its label will be positioned. The “Column” layout is the default option, which makes the field label display over the input field. The “Row” option aligns them within the same row;
Required Mark — in this field, one can specify a symbol to mark the required fields in the form. By default, required fields are marked with an asterisk symbol;
Fields label HTML tag — the HTML tag, which will represent the field label — “DIV” or “LABEL.” The default tag is “LABEL”;
Submit Type — defines the behavior of the form after the Action Button (formerly Submit Field) is clicked. The “Page Reload” option reloads the page after form submission, and the “AJAX” option prevents page reloading;
Enable form pages progress — shows a progress bar with a step indicator at the top of the form. Enabling form page progress is recommended for multi-step forms that use the Form Break Field.

That’s all about the JetForm settings available with the JetFormBuilder plugin for your WordPress website.

Contents:

Why You Need a WordPress Job Application Form

Top WordPress Job Application Form Features

WordPress Job Application Form Structure

Step 1 — Personal Information

Step 2 — Experience

Step 3 — Education

Step 4 — Additional Information

How to Create a WordPress Custom Job Application Form

WordPress Job Application Form Pro Features

Contents:

Why You Need a WordPress Lead-Capture Form

Top WordPress Lead-Capture Form Features

WordPress Form Pattern Structure

Step 1 — User information

Step 2 — Introductory questions

Step 3 — Final part of the questionnaire

How to Create a Custom WordPress Lead-Capture Form

WordPress Lead-Capture Form Pro Features

Hidden and Calculated Field Types

Build a Form

Add a Form to the Page

Check the Form on the Front End

Create a New Form

Set Up Post Submit Actions

Configure the “Verification” action

Set up the “Register User” action with an auto-generated password

“Save Form Record” action

Add a “Send Email” action for a custom verification email

Add a “Send Email” action to send the password details

General Messages Settings

Display the Form on the Front End

Test the Flow

Verify Emails Manually from the WordPress Dashboard

Contact Form

Feedback

Newsletter Signup Form

Insert Post

Register User

Paypal Donation

Reset Password

User Login

Generate via AI

JetForm Block in Block Editor

JetForm Widget in Elementor

JetForm Element in Bricks Builder