Category: Cases

Tutorial requirements:

• JetFormBuilder plugin installed and activated;
• User Login Action addon installed and activated.

The free version of JetFormBuilder allows building a Register Form, and the User Login Action addon enables the creation of a front-end login form. While they can exist as two separate forms, it is possible to combine the functionalities of registration and login in one form using the Render States.

This tutorial will explain how to use the Render States feature to combine the two forms and switch between them with a button.

Contents:

• Create a New Form
• Build the Login Form
• Render State for Login Form
• Build the Registration Form
• Render State for Registration Form
• Add the Change Render State Buttons
• Post Submit Actions
  • User Login
  • Register User
  • Redirect to Page
  • Send Email
• Set Up Events for Actions
• Add the Form to a Page
• Test the Flow

Create a New Form

Follow to WordPress Dashboard > JetFormBuilder > Forms > Add New to create a new form. To start building a new form from scratch, press the “Start from scratch” button in the Welcome block.

Give the form a title and remove all the field blocks from the canvas. To remove a block, click on it, find the “Options” button in the toolbar, and select “Delete.” 

After removing all the blocks, toggle the Block Inserter by clicking the blue “plus” icon in the top toolbar and search for the Conditional Block. Add two Conditional Blocks to the canvas. Alternatively, use the shortcut slash command “Conditional Block” to add the blocks quickly.

The first Conditional Block will display the login form, and the second block will show the registration form. Using the Change Render State buttons, we will switch between the Conditional Blocks, and as a result, the user will see only one form at a time.

Build the Login Form

Let’s build the login form in the first Conditional Block. The form will consist of a Text Field for login, a Text Field for password, and a “Remember Me” Checkbox Field. We will also add an Action Button to submit the form and a Change Render State button to switch to the registration form.

Select the first Conditional Block and click the black “plus” icon on the right side to toggle the Block Inserter. Search for the Text Field and add it. 

Open the Block settings. Give this field a FIELD LABEL — “Login,” and a FORM FIELD NAME — “login.” In this field, users will insert their login.

Next, add a new Text Field for the user password. Set the FIELD LABEL to “Password” and the FORM FIELD NAME to “password.” Then, scroll the Block settings down and find the FIELD TYPE drop-down menu. Select the “Password” option. 

After that, add a Checkbox Field below the Text Fields, but still inside the Conditional Block. Leave the FIELD LABEL empty and enter the FORM FIELD NAME — for example, type “remember-me-by-login.”

The “Remember Me” 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.

Press the “Manage Items” button to add checkbox options. In the opened pop-up, click “+ Add new Option.” Insert “Remember Me” as the LABEL of the option and “1” as its VALUE.

Save the changes by clicking the “Update” button. 

Finally, add an Action Button to let users submit the login form. Enter “Log In” as the FIELD LABEL. 

For now, the layout of the login form is completed. The Change Render State button will be added later. 

Let’s proceed to setting up the current Conditional Block.

Render State for Login Form

Select the first Conditional Block and click the button in the toolbar to assign a new condition. 

Inside the Conditional Logic pop-up, select which function to execute — “Show if…”. Then, press the “+ Add Condition” button and start setting up the condition. In the OPERATOR drop-down list, select the “Is render state” option. Pick the “DEFAULT.STATE” option from the RENDER STATE list. Click “Update” to save the changes.  

The “DEFAULT.STATE” is a form default render state. When a page with a JetFormBuilder form is opened in a browser, the form is rendered in its default state. Therefore, all the content inside this Conditional Block will be displayed simultaneously. To see the content of other Conditional Blocks designed for different form states, you should switch the form state to the one needed. 

Now, let’s proceed to building the Registration Form part. 

Build the Registration Form

Find the second Conditional Block. Inside this block, we will place a Registration Form. 

Instead of building this part from scratch, we will use a ready Pattern. Toggle the Block Inserter (the blue “plus” button) in the top toolbar and switch to the Patterns tab. Proceed to the JetForms tab and select the “Register Form” Pattern. Place it inside the second Conditional Block. 

Next, remove any extra columns and blocks. Rename the FORM FIELD NAME of the “Password” Text Field. We will give it a unique name — “register-new-password.” 

Lastly, copy the “Remember Me” field from the login form and insert it into the registration form part right above the Action Button. Give it a new FORM FIELD NAME. 

With that, the registration part is completed. 

Render State for Registration Form

Let’s configure the render state of the second Conditional Block. As previously, select the block and open the Conditional Logic pop-up. Set the function to “Show if…” and the Operator to “Is render state.” 

Then, press the “New render state” plus-shaped button to add a new custom state. 

Set the name of your choice. We will call the new state “REGISTER.” Once the new state is added, it is assigned automatically to the Conditional Block. 

Lastly, save the changes by hitting the “Update” button.

Add the Change Render State Buttons

To switch between states, the Change Render State block should be utilized. We will place this block inside both Conditional Blocks. The Change Render State blocks will enable us to switch between the form for login and the form for registration. 

Locate the first Conditional Block. Under the Action Button, place the Change Render State block. 

This button will allow users to switch from the login form, the default state, to the registration form. Therefore, give this block an appropriate label and set the “REGISTER” state into the SWITCH STATE multi-select. 

Next, add a new Change Render State block into the second Conditional Block. This button will enable users to switch from the registration to the login form. In the SWITCH STATE field, pick the “DEFAULT.STATE” option.

Post Submit Actions

The form layout is complete. The next part of the work is to add Post Submit Actions that should be executed after form submission. 

User Login

Let’s start by adding the “User Login” action, which will log users in if they submit the first part of the form. 

Switch to the JetForm settings tab in the right sidebar and unfold the Post Submit Actions tab. Instead of the default “Save Form Record” action, pick the “User Login” action. 

Click the pencil-shaped button under the action name to edit it. 

Map the USER LOGIN FIELD with the “Login” form field, the USER PASSWORD FIELD with the “Password” field, and the REMEMBER FIELD with the “remember-me-by-login” Checkbox Field from the first Conditional Block. 

Click the “Update” button to save the changes and proceed to the next step.

Register User

Click the “+ New Action” button to add a new action — “Register User.” This action will be executed if the user completes the second part of the form.

Press the “pencil” button to edit the action. Then, link the User Login, Email, Password, and Confirm Password fields with their corresponding form fields from the second Conditional Block. 

Scroll the settings down to select the USER ROLE, which will be assigned to the newly registered user. If you previously created custom meta fields for users, you can link the form fields with them. To link a form field with a custom field of a user, type in the name of the corresponding meta field in front of the form field’s name in the USER META section.

Scroll past the USER META section to activate the Log In User after Register toggle. Connect the “REMEMBER ME” FIELD with the “remember-me-by-registration” Checkbox Field from the registration form. This setting allows users to log in automatically after the registration is completed.

Follow the article about the “Register User” action to learn about each further setting in detail.

Once done, click “Update” to save the changes.

Redirect to Page

After users log in or register, it might be convenient to redirect them to different pages. For this purpose, add two “Redirect to Page” actions — one below the “User Login” action and another below the “Register User” action.

Edit the first action. In our case, we will use it to redirect users to their “Account” page after they log in. 

Select the “Static Page” option from the REDIRECT TO drop-down and select the needed page — we will select the “Account” page.

Repeat the same procedure for the second “Redirect to Page” action.

To learn how to craft the Account page, proceed to the Creating User Account Page With Different Dashboard Structures tutorial.

To make the Account page for the e-commerce website, go to the How to Create My Account Page With Endpoint Templates tutorial.

Send Email

Add the last post submit action to the form—the “Send Email” action—at the end of the actions list. This action will send an email to the user after a successful registration. Then, click the “pencil” icon to edit the action.

Proceed with the configuration according to our guide on the “Send Email” action. Set the MAIL TO setting to “Email from submitted form field” and select the “E-mail” field in the dropdown below. Next, define the subject of the email. Use the macro [%CT::SiteName%] to insert the website’s name dynamically into the email subject or content. Then, fill in the required fields FROM NAME, FROM EMAIL ADDRESS, and CONTENT. 

Once the setup is complete, click the “Update” button to save the changes.

Set Up Events for Actions

The last step in the form configuration process is to assign Post Submit Actions with Events. Events define when a specific action is executed.

Click the “Edit Conditions & Events” button under the first action, “User Login.” 

Inside the “Edit Action Conditions & Events” pop-up, switch to the “Events match” tab and assign the “ON.DEFAULT.STATE” EVENT. 

Click “Update” to save the changes. Assign the same “ON.DEFAULT.STATE” EVENT to the first “Redirect to Page” action. Then, assign the “ON.REGISTER” EVENT to the rest of the actions.

Now, click “Publish/Update” to create the form. The configuration part is complete.

Add the Form to a Page

Open the page or template where the form should be located and place it using the JetForm widget (in Elementor), JetForm block (in Block Editor), or JetForm element (in Bricks). From the CHOOSE FORM drop-down list, select the built form. Learn about other settings from the JetForm Overview.

We placed our form on the page edited in Elementor. To display the form on other page builders, check our guide on How to Display a Form on the Front End.

Test the Flow

Open the page where the form is located on the front end. Only the first part—the login form—should be visible. To switch to the registration form, click the “I don’t have an account.” — the Change Render State button.

Now, the registration form is displayed.

That’s all about using the Render States to combine the functionalities of several forms in one with the JetFormBuilder plugin on your WordPress website.

The file uploading functionality is implemented via the Media Field block of the JetFormBuilder plugin. It allows different user access, storage of attachments, and specification of the maximum size of the uploaded files and their formats.
Users can use the MediaField block independently, as part of the pre-built forms, or as generated by the AI ones.

• Create a Form
• Add the Media Field Block
• Set the Post Submit Actions
• Add the Form to a Page
• Collect and Process Form’s Data

Create a Form

Navigate to the WordPress Dashboard > JetFormBuilder > Forms tab and press the “Add New” button to create a new form. Also, check the tutorial on How to Create a Form.
Initially, the form includes the Welcome block, which allows the application of a pre-created or AI-generated form.

Press the “Start from scratch” button to develop a custom form.

Add the Media Field Block

In the given case, we added only the Text Fields for the contact data, but you can add all the needed fields.

Find, drag, and drop the Media Field block. 
Fill in the FIELD LABEL field (in this case, “Upload file”). The FORM FIELD NAME field will be filled in automatically, but this value can be changed if desired.

Set the following settings of the MEDIA FIELD block:

• USER ACCESS — select the user type available to upload the files. In the given case, we allow uploading for the “All users (inc. Guests)” option;
• MAXIMUM ALLOWED FILES TO UPLOAD — type the maximal number of allowed files to upload (for the given case, we left this field blank to upload one file);
• MAXIMUM SIZE IN MB — type or select the maximum size of the uploaded files (here, we specified 500 MB); 
• MAXIMUM FILE SIZE MESSAGE — type the text to be displayed instead of the default “Maximum file size %max_size%” text;
• ALLOW MIME TYPES — specify the allowable file types. For instance, we allowed uploading only PDF files.

Set the Post Submit Actions

Navigate to the JetForm settings and scroll down to the Post Submit Actions settings. 

Read the Post-Submit Action Controls Overview tutorial to learn how to manage Post Submit Actions.

The “Save Form Record” action is set by default, allowing the saving and processing of form data.
If needed, edit this action and turn on the following toggles: Store the IP address and other request headers and Keep form records that have not passed spam or captcha protection. In the given case, we did not activate these toggles.

The tutorial How to Use Save Form Record Action And Manage Form Submissions explains how to manage the “Save Form Record” actions.

Press the “Publish” button to save the form.

Add the Form to a Page

Create a page in Elementor/Block Editor/Bricks. In the given case, we created the page in Elementor.

Find the JetForm widget/block/element and drag and drop it onto the page. 
Once you are through with the page editing, press the “Update” button to save the result.

Navigate to the front end to check if the form works correctly. 

Fill in the form and press the “Submit” button.

Also, check the Displaying a JetFormBuilder Form in Any Page Builder tutorial.

Collect and Process Form’s Data

Navigate to the WordPress Dashboard > JetFormBuilder > Form Records tab to see all collected form entries. 
Hover the cursor over the needed form and press the “View” link under the form’s title.

The form record displays all collected data, including a link to the uploaded file.

Follow the link to see the file uploaded with this form. To check all collected uploaded files via the developed form, navigate to the JetFormBuilder folder (wordpress/htdocs/wp-content/uploads/jet-form-builder) on the PC where your WordPress is installed.

That’s all about creating file upload forms and storage attachments in different ways on your WordPress website using the JetFormBuilder plugin.

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.

Contents:

• Why You Need a WordPress Job Application Form
• Top WordPress Job Application Form Features
• WordPress Job Application Form Structure 
• How to Create a WordPress Custom Job Application Form
• WordPress Job Application Form Pro 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.

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.

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.

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 “manually” value this time.

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.

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.

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

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

• Save Form Progress 
• Schedule Forms
• Select Autocomplete 
• Limit Form Responses

The tutorial details creating a user-friendly, functional, and conversion-making T-shirt order form using the JetFormBuilder plugin for WordPress. It covers managing specific form fields, adding integrations with payment and marketing plugins and add-ons through Post Submit Actions, and optimizing orders for your business or event.

Contents:

• Why You Need a WordPress T-Shirt Order Form
• Top WordPress T-Shirt Form Features
• T-Shirt Order Form Typical Structure
• How to Create a WordPress Custom T-Shirt Form
  • Create a multi-step form
  • Add the Repeater Field and nested fields
  • Calculated Fields
  • Separating the form pages
  • Add fields for contact data
  • Add fields for delivery data
  • Post Submit Actions
  • Add the form to a page
  • Order form in action
• WordPress T-Shirt Order Form Pro Features

Why You Need a WordPress T-Shirt Order Form

The T-shirt order form is the last stage of the sales funnel and a huge marketing tool, which:

• Collects fully personalized data on users and their preferences;
• Collects users’ emails for further marketing communications (i.e., for mailing propositions on sales or post-sales communications);
• Contributes to conversions by addressing the issue of users exiting the forms at the last step;
• Generates leads;
• Makes your site more user-friendly and thus increases the probability of further orders;
• Makes purchases easy and orders proceed quickly and safely by seamlessly integrating with payment systems and providing the needed security means.

Top WordPress T-Shirt Form Features

Order forms are a necessary site element and the last step between clients and their orders. Therefore, they should be user-friendly (intuitive, discreet, and simple), functional (provide payments and seamless integration with plugins and add-ons), and effective (provide conversions and collect the necessary marketing data on users and their orders).

• Develop a clear structure of a multi-step form with a logical sequence of only needed fields divided by breaks;
• Specify the required and not form fields;
• Provide safety identification, verification, and validation (i.e., reCAPTCHA v3) of the user-associated actions (i.e., auto-filling of fields after user registration); 
• Collect and proceed with the order data via one dashboard;
• Integrate with email marketing services, including Mailсhimp, GetResponse, Active Campaign, Zapier, Make, etc.

Generally, the JetFormBuilder plugin provides the following:

• Variety of combinable tools: users can use JetFormBuilder’s block fields and patterns separately, generate forms via AI, or combine all three; 
• Post Submit Actions automatize order being processed, i.e., redirect to pages, save data in the database, send emails, etc.;
• Seamless integration with JetPlugins, WooCommerce, and email marketing services (i.e., ActiveCampaign, GetResponse, Mailсhimp, Zapier, and Make);
• Form style customizations using the free JetStyleManager plugin;
• Safe payments and storage of user’s data;
• Different verification and validation methods;
• Identification of users and pre-filling the form fields with the saved data;
• Multiple PRO add-ons for additional tasks such as hierarchical selection, user login, advanced color picking, field autocompleting, saving form progress and form scheduling, payments, and more.

T-Shirt Order Form Typical Structure

Step 1 一 Order data

This step includes fields for uploading images for printing on the T-shirt(s) and selecting the T-shirt sizes, colors, and quantities. It contains such blocks:

• Progress Bar block to specify the start of the form proceeding;
• Number Field to input the number of needed T-shirts;
• Repeater Field with the nested fields: 
  • Media Field for uploading an image for printing on the T-shirt, 
  • Advanced Choice Fields for selecting the size and colors available;
• Calculated Field to calculate the approximate price;
• Form Page Break to divide the form into steps;
• “Next” button to navigate to the next page.

Step 2 一 Contact data

This step includes the fields to store users’ data. It comprises such blocks:

• Progress Bar block to specify the next stage of the form proceeding;
• Text Fields to store users’ contact data;
• Form Page Break field to allow navigation to the next and previous pages.

Step 3 一 Delivery data

Felds for address and delivery method data. It contains such blocks:

• Progress Bar block to specify the next stage of the form proceeding;
• Text Fields to store the delivery settings;
• “Action” button to submit the form.

How to Create a WordPress Custom T-Shirt Form

In the given case, we explain how to build a multi-step form for ordering the needed number of T-shirts with a printed user’s image. Additionally, users can select the required color and size of the T-shirts. Due to this, pricing issues relating to printing are not considered.

Create a multi-step form

Navigate to the WordPress Dashboard > JetFormBuilder > Forms tab and press the “Add New” button to create a new form.

The created form has the Welcome block, allowing the application of a pre-created form. In the given case, we make the form from the beginning, so press the “Start from scratch” button.

The Hidden Field, Text Field, and Action Button blocks are added by default; therefore, you can delete them if they are not needed in your form. Add the form’s title.
Find the Progress Bar block and add it to the page.

To divide the form into pages on the front end and display the progress on each page, navigate to the JetForm settings and activate the Enable form pages progress toggle.

Drag and drop the Number Field to allow users to type the desired quantity of T-shirts.

Navigate to the settings block and type the name in the FORM FIELD NAME field (e.g., “t_shirt_number”) and optionally type the FIELD LABEL (e.g., “Enter the number of T-shirts”).

Add the Repeater Field and nested fields

Then, find the Repeater Field and drag and drop it to the page.

Navigate to the settings block, enter the FORM FIELD NAME (e.g., order_data), and select the following:

• Select the “Dynamically (get count from form field)” option from the MANAGE REPEATER ITEMS COUNT field;
• Choose the name of the previously added Number Field (here, t_shirt_number) in the FIELD ITEMS COUNT drop-down list;
• Select the Default (columns row count) option from the CALCULATE REPEATER ROW VALUE drop-down list.

Press the “+” icon to add the Columns block into the Repeater Field. 

Here, we divided the form into two columns and added the following nested fields into the Repeater Field:

•  the Media Field to upload an image for printing with the entered FIELD LABEL (e.g., “Upload the image for printing”) and FORM FIELD NAME (e.g., “image_for_printing”);

• the Checkbox Field to select the needed size of the T-shirt. Find the Checkbox Field block and drag and drop it to the page. Fill in the FIELD LABEL field (e.g., “sizes available”) and the FORM FIELD NAME field (e.g., “sizes_available”). The “Manual Input” option is selected by default in the FILL OPTIONS FROM drop-down menu.

Press the “Manage items” button to open the Edit Manual Options pop-up to adjust the checkbox options and hit the “Add new Option” button.

By clicking the button, you can add as many choice options to the Checkbox Field as needed. The settings include the LABEL field, which should be filled in with data displayed on the form as a list of variants (i.e., XS, S, L, etc.); the VALUE field, which should be filled in with inner data that corresponds to the option; and the CALCULATE field, which can be used in formulas.

For this tutorial, we used the same price for all sizes, so we left the VALUE and CALCULATE fields blank.
To add new options to the checkbox list, scroll down the Edit Manual Options pop-up and press the “Update” button.

• the Radio Field to select the print area. The settings of this field are similar to those of the Checkbox Field block. In the given case, we added four variants to allow users to select the appropriate print area. Therefore, the only difference is adding the values into the VALUE fields of every item from the list.

• the Advanced Choice Field to select the T-shirt color. Select the needed layout and type the field’s name (e.g., select color available). We selected the “Images with controls” layout option and filled in the FIELD LABEL and FORM FIELD NAME fields.

Due to the printing technology, we selected the colors of the covers, controls, and texts and added the specific VALUE FOR CALCULATED FIELD for each T-shirt color.

Calculated Fields

To calculate the approximated price for every T-shirt, we added the Calculated Field into the Repeater Field. Inside the Repeater Field, the Calculated Field defines the cost of printing for every T-shirt, and outside the Repeater Field, another Calculated Field defines the total costs.

The Calculated Field inside the Repeater Field summarizes the values from the selected fields; partially, it adds the options referring to the print area (Radio Field), T-shirt color (Advanced Choice Field), and the regular T-shirt price (here, USD 10). The calculation formula here is as follows: %FIELD::print_area%+10+%FIELD::%select_color_available%.

The Calculated Field outside the Repeater Field summarizes the values for each row from the Repeater Field and defines the total cost of the order. The calculation formula here is as follows: %FIELD::%order_data%, where the order_data is the Repeater Field’s name.

Separating the form pages

Add the Form Page Break field to separate the pages. Navigate to the block settings and activate the Enable “Next” button toggle to add the appropriate button to the form. Type the title of the form step in the LABEL OF PROGRESS field (e.g., Order Data). This text will be displayed via the PROGRESS BAR as the title of the form proceeding stage.

Add fields for contact data

For the second page of the form, we added the Progress Bar block to display progress, the Heading field to display the step name (e.g., Contact Data), Columns to display text inline, Text Fields to input the users’ contact data (name, email, and phone), and the Form Page Break field to allow navigation to the previous page.
Specify the Text Field types: navigate to the Block settings, unroll the FIELD TYPE drop-down menu, and select the “Email” option for the “Email” Text Field and the “Tel” option for the “Phone” Text Field.

For the Form Page Break, we enabled the Add “Next” Button and Add Prev Page Button toggles to allow users to amend the entered data. We left blank the NEXT BUTTON LABEL and PREV PAGE BUTTON LABEL to display the default texts, but users can add any needed text. Then, we typed the text into the LABEL OF PROGRESS field (here, “Contact Date”) to display the form progress stage.

Add fields for delivery data

The last page contains data on the delivery method and payment. The page includes the Progress Bar block, Heading, Text Fields, Radio Fields, “Action” button, and Form Page Break block to submit the form.
The Progress Bar displays the current form proceeding stage, the Heading displays the page’s name (e.g., “Payment Data”), and the Text Field is intended to display the client’s address. As far as we did not limit the client’s location, we did not specify the min and max length of the field.

We added the Column block to display the Radio Fields and divided the form into two equal columns. We added the Radio Fields to each column. The first Radio Field is intended to select the preferred delivery method (e.g., pick up, courier, or send to a post office), and the second Radio Field allows the selection of the payment method. The settings of the Radio Fields are similar to the Checkboxes Field settings described above.

Add the Form Page Break block and enable the Add Prev Page Button to allow users to modify the entered data. Then, we typed the text into the LABEL OF PROGRESS field (here, Delivery Data) to display the form progress stage.

Post Submit Actions

Go to JetForm, unroll the Post Submit Actions tab, and select the needed action from the drop-down list. Here, we selected the “Send Email” option to notify the user about the order.

Select the “Email from submitted field option” from the MAIL TO field and pick the name of the email form field from the FROM FIELD source to send the notification to the email the user will enter in this field.

If needed, scroll down the pop-up and fill in the following fields:

• SUBJECT to add the email subject;
• FROM EMAIL ADDRESS to add the email address from which the users will get the notifications;
• select the “Plain text” option from the CONTENT TYPE drop-down list;
• type the email text in the CONTENT field.

Press the “Update” button to save the action settings.
Add another Post Submit Action; select the “Save Form Record” option from the drop-down list to allow storage and managing of all orders.

After completing, publish or update the form.

Add the form to a page

Open a page/post/CPT post/template you need and place the JetForm widget (in Elementor), JetForm block (in Block Editor), or JetForm element (in Bricks). Select the built T-shirt order form in the Choose Form drop-down list. Learn about other settings from the JetForm Overview.

Publish or update the page.

Order form in action

Open the page with the order form on the front end. Complete the form to check if it works correctly.

Scroll down the first form’s page and fill in all the fields.

Move to another page of the form and fill in the fields as well.

Fill in the fields on the last page and hit the “Submit” button.

After successful submission, the “Form successfully submitted” message will appear.

The form has sent a notification to the email user entered into the email form field with the predefined text:

Navigate to the WordPress Dashboard > JetFormBuilder > Form Records tab. This tab collects all submitted form data.

Click the “View” link under the form title (under the “Order Form” in our case) to unroll the recently submitted form and check the values from the submitted fields.

That’s all about creating a T-shirt order form using the JetFormBuilder plugin for WordPress and managing the form’s specific fields and Post Submit Actions.

WordPress T-Shirt Order Form Pro Features

• Stripe Payments
• PayPal Recurring Payments
• WooCommerce Cart & Checkout Action
• Select Autocomplete
• Address Autocomplete
• Mailсhimp (Free)
• Save Form Progress

• Limit Form Responses 
• Schedule Forms
• MailPoet
• ConvertKit
• MailerLite
• Moosend
• HubSpot
• PayPal
• Stripe

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.

Contents:

• Why You Need a WordPress Lead-Capture Form
• Top WordPress Lead-Capture Form Features
• WordPress Form Pattern Structure
• How to Create a WordPress Custom Lead-Capture Form
• WordPress Lead-Capture Form Pro Features

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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

• Limit Form Responses 
• Schedule Forms
• MailPoet
• ConvertKit
• MailerLite
• Moosend
• HubSpot
• PayPal
• Stripe

With the Open AI integration, you can generate complex forms with various field types with a few clicks instead of adding every field manually. After that, you just need to tweak the field settings and configure other form options, such as post-submit actions, style settings, etc.

Contents:

• General Settings
• Registration Form Generated with AI
• Opt-in Form Generated with AI
• Quiz Form Generated with AI
• Job Application Form Generated with AI

General Settings

To generate a new form with AI, proceed to the WordPress Dashboard > JetFormBuilder > Forms tab and hit the “Generate with AI” button.

Or you can proceed to the WordPress Dashboard > JetFormBuilder > Add New tab. Here, you can push “Generate Form with AI” from the header toolbar or the “Generate via AI” button from the Welcome block.

These buttons trigger a pop-up with the AI generator:

Currently, you can make 10 (ten) requests per month.

In the text area, you can describe what form you want to create (e.g., “Simple contact form”). 

Also, you can find tips for successful prompt writing (start with the main purpose, describe the specific fields, and use the English language for prompts) and prompt examples.

After you enter a prompt into the text area, the “Generate” button will appear.

After clicking the “Generate” button, the pop-up will show the form fields preview. 

For the “Simple contact form” request, Open AI generated three simple fields for the name, email, and message, and the “Submit” button.

If you are satisfied with the result, you can press the “Use this form/Create form with this template” button. If you are not, you can tap the “Change generation prompt” button and rewrite the request.

We hit the “Change generation prompt” button and expanded the prompt. In the request, the form fields and the Action Button can be described, so we typed this prompt: “Contact form with name, email, subject, message, phone number, company name, website, and address fields with the “Send Email” action button.”

In the new preview, Open AI generated all the mentioned fields and the Action Button with the “Send Email” label.

After hitting the “Use this form” button, you’ll obtain two options: “replace” or “append” form settings and blocks. Pick the preferable one.

We chose the “replace” option, so the form fields and the Action Button replaced the Welcome block.

Be aware that certain fields have the “Required” option activated. You can modify this and other settings individually for each form field block.

If you generate a form from the JetFormBuilder > Forms tab, the written prompt will be inserted into the form title.

Registration Form Generated with AI

To generate a simple “Registration” form, we opened the Generate Form with AI pop-up, clicked the “Registration form with minimum inputs” prompt example, and hit the “Generate” button.

The Open AI generated three basic fields for the name, email, and password, and the “Submit” button.

After clicking the “Use this form” button, the fields and the action button were inserted into the form editing page.

Opt-in Form Generated with AI

To generate an “Opt-in” form with the specific Radio Field, we opened the Generate Form with AI pop-up, clicked the “Opt-in form with gender selector like radio” prompt example, and hit the “Generate” button.

The Open AI generated the “Name” and “Email” Text Fields, the “Gender” Radio Field with the “Male,” “Female,” and “Other” options, and the “Submit” button.

After clicking the “Use this form” button, the fields and the action button were inserted into the form editing page.

Quiz Form Generated with AI

To generate a Quiz form, we opened the Generate Form with AI pop-up, clicked the “Quiz form with 5 questions with choices about math” prompt example, and hit the “Generate” button.

The Open AI generated five Radio Fields with math questions, four options for each of them, and the “Submit” button.

After clicking the “Use this form” button, the fields and the action button were inserted into the form editing page.

Job Application Form Generated with AI

We proceeded to the WordPress Dashboard > JetFormBuilder > Forms tab, hit the “Generate with AI” button, and opened the Generate Form with AI pop-up.

We typed the “complex form for a job application” prompt into the text area and hit the “Generate” button.

We got the name, email, phone number, resume, cover letter, position, years of experience, highest education, and references fields generated.

We hit the “Create form with this template/Use this form” button and inserted the fields into the form editing page.

Let’s check the form field settings. 

The “Name,” “Email,” and “Phone” Text Field blocks have different FIELD TYPES: “Text,” “Email,” and “Tel,” accordingly.

The “Resume” is the Media Field block. In the ALLOW MIME TYPES field, the AI generator pulled the “application/pdf,” “application/msword,” and “application/vnd.openxmlformats-officedocument.wordprocessingml.document” options that are MIME types for the PDF, DOC, and DOCX formats, which are usually used for resumes. The MIME types can be modified according to the preferences.

The “Position” is the Select Field with the “Manual Input” option set in the FILL OPTIONS FROM drop-down menu.

If we hit the “Manage Items” button, we will see three options: “Developer,” “Designer,” and “Manager.” Learn how to add new options from different sources from the Multi-Optional Field Source Settings tutorial or write a more precise prompt with specified options or purpose for such a field.

The “Cover Letter” and “References” are the Textarea Fields, and the “Years of Experience” is the Number Field, and they don’t have any specific settings.

Any blocks can be added and modified according to the form’s purposes.

To complete the form, other settings should be set, like the post-submit actions, and the form can be published and placed on the page.

That’s all. Now you know how to generate forms with Open AI and the JetFormBuilder WordPress plugin.