Category: How to start?

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.

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.

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 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.

Newsletter Signup 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.

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 “Register User” action also has the FIELDS MAP set with the fields to get user data from.

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.

User Login

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.

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.

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.

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

Duplicating and Exporting a Form

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

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

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

Importing a Form

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

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

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

JetFormBuilder Converter

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

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

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

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

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

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

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

With the WordPress form Patterns functionality from the JetFormBuilder plugin, you can add six different layouts for your form, such as Contact Us Form, Login & Register, Application Form, Subscribe Form, Profile Form, and Booking Form. Let’s have a closer look at each of them.

Preparation

Firstly, you need to create WordPress Form. Please, check our guide to achieve this.

The Pattern is not a Preset. It’s a WordPress form layout that you can customize and style up as you like. JetFormBuilder blocks can be customized if you have also downloaded and installed the JetStyleManager plugin.

Open the form you’ve created and click on the Plus icon.

After that, you’ll see the Patterns block where you’ll need to select the JetForms from the dropdown. Afterward, you’ll see six patterns below.

Contact Form

You can easily add the Contact Form layout with the ready-made pattern and then customize it according to your preferences.

On the right panel, you can choose to set different Form Settings, such as Form Layout and Submit Type. Also, you can enable Captcha, choose Post Submit Action, Presets, and customize General Message Settings. These fields are the same for every form.

Login & Register

This pattern allows adding a WordPress form for registration and logging in. You can customize any field, add new fields if you need, and also add a photo. 

Application Form

With this pattern type, you can add an WordPress Application Form that includes a lot of different fields to add information about a person.

You can add Name, Phone Number, Country, Position information, check Industry field and also add your own fields or edit the existing ones.

This pattern accommodates a lot of checkboxes, as needed for application forms. What’s cool is that the columns are already set up and the questions are grouped. All you need to do is to customize everything.

Subscribe Form

A perfect pattern to add a layout for the WordPress Subscribe Form in few clicks. The pattern includes Image, Description, Name, Email fields, and Subscribe button. 

Profile Form

WordPress form Pattern includes all the basic fields for the Profile Form. Here you can find Name, Icon, Location, Email, Phone, and Password fields.

This pattern comes in handy when we need to Register User or Update User.

You just need to set up Post Submit Actions and then the form will work perfectly.

Why this pattern is so good? Because all the basic information is grouped in several columns.

Booking Form

This is the biggest pattern with a lot of different field types for a perfect WordPress Booking Form. In this pattern, you can check how the multi-step form is set up and check it in action. Here you can find everything from Check-in Date and Time to range field with Price per Night and toKind of a Trip and Extra Services fields. 

There are fields for Personal Information such as Name, Phone, and Gender.

Also, you can add Additional Information.

If there are any questions left after reading the documentation, please contact our tech support team.

When users submit a form, there are a number of notification messages they can receive. In the General Messages Settings section, you can define the text of those messages.

There are two types of messages – the one that means success and a number of those that notify the user about some kind of failure.

The success message “Form successfully submitted” tells the user that everything is alright, and the form was submitted without any issues. Basically, without any styling, it looks like that:

Error messages are more numerous:

• Submit failed. Due to some circumstances, the form’s submission wasn’t successful;
• Validation error. If you set some fields to be filled in some specific way (for example, an “Email” Field Type of the Text Field) and one or several fields were filled incorrectly, this notification will appear;
• Captcha validation failed. The user didn’t manage to solve a captcha;
• Entered an invalid email. If your form has a special field for email, this message will appear in case the user fills it incorrectly;
• Required field is empty. One or several required fields were left empty;
• Internal server error. The submission failed due to the server error;
• Media Specific: Max files limit. This notification can appear only if you have the Media field in your form. It says that the user has reached the limit for the number of allowed file uploads;
• Media Specific: Max size reached, This notification can appear only if you have the Media field in your form. The size of the file the user tries to upload is bigger than the set number;
• Media Specific: File type error. This notification can appear only if you have the Media field in your form. The user tries to upload the file the format of which is not supported.

Basically, without applying any design features, this notification message looks like that:

The appearance of the notification messages can be changed in the Message Success and Message Error sections of the Block Style menu.

This menu appears only if you have the JetStyleManager plugin installed. If you need more details about the styling of the elements, check out this styling guide.

Preset is a function that makes filling the form easier for the user. If there are several forms a visitor has to fill out, one can take the recurring information like the first and last name, phone number, email address, etc., from one form to another. That kind of data automatically appears in the form, so the user doesn’t have to retype it. 

This feature can sufficiently improve the user experience of the WordPress website.

To add such a preset to the current form, one should open the Preset Settings section of the form and switch on the Enable toggle.

Once activated, initially, two fields are shown:

• SOURCE — the drop-down list with available sources to take the data from for the preset. Among available options are:
  • Post – data from the form stored in the items of a post type;
  • User – information that was already typed in by the user during the registration process (in a registration form) and mentioned in the user’s account;
  • URL Query Variable – data from the URL;
  • Option Page – option available only if JetEngine is installed and activated. Allows setting preset based on Options Pages;
  • Related Items – option available only if JetEngine is installed and activated. With this source, the preset will be taken from relation items;
• Restrict access — a toggle that is activated by default; it makes the preset active only for authorized users. If deactivated, preset will appear for any user and guest.

Post

If the “Post” SOURCE is picked, the GET POST ID FROM selector appears. It allows specifying the source of the post ID data:

• Current post — the data will be taken from the post to which this form is added;
• URL Query Variable — a small piece of data that is located in the URL. For example, the “post=123” in the post’s URL is a query variable that shows the ID of the post. A query variable is a parameter that can be set manually. As an example, the query variable “items” can be set and typed into the appeared QUERY VARIABLE NAME bar. Afterward, that variable can be manually added to the post permalink or Dynamic Link of the JetEngine plugin. Then the form will check if the URL of the page it is placed on has that variable and autofill the data in the form only if it does.

Under the GET POST ID FROM drop-down menu, the list of the fields added to the form is displayed. Each of them has a selector underneath, where the data to apply to this particular field can be chosen. So, here a connection between the form field and the default or custom meta field of the post or user account is built.

Among options are:

• Post ID — a number that is automatically given to every created post. Thus, the posts can be identified by that number;
• Post Title — the name of the post that is visible on the front end;
• Post Content — the data put into the post’s body;
• Post Status — the status of the current post;
• Post Author — the author of the current post;
• Post Excerpt — the short summary of the post content that is often visible to users;
• Post Date — the date when the post was created based on the WordPress timezone setting;
• Post Date GMT — the date when the post was created  converted to Greenwich Mean Time;
• Post Thumbnail — the small picture that is usually placed by the post title in different post lists is a thumbnail. It can be set in the post settings menu;
• Post Meta — if some custom meta fields are added to the post with the help of JetEngine or ACF plugins, they can be selected here;
• Post Terms — the data from the categories or custom taxonomies that can be put in the field.

User

The first setting available with the “User” source is called GET USER ID FROM and includes three options for selection:

• Current user — the ID of the current user who completes the form;
• Queried user — the ID of the queried user;
• URL Query Variable — allows setting the QUERY VARIABLE NAME to take the info based on the URL.

The list of options that can be connected to the form based on the “User” source includes:

• User ID — the number that is automatically given to every user and allows to identify that user;
• User Login — the name that is used to log into the account;
• Email — user’s email address;
• Password — a password that is used to log into the account;
• First Name/Last Name — the personal data the user adds after registration;
• Display Name — the user name set as Display name publicly as in the WordPress account;
• User URL — the URL that the user puts into the Website bar of the account page;
• User Meta — some additional meta fields to the users added via JetEngine or ACF plugins, you can choose them here.

URL Query Variable

This source doesn’t have any specific settings except for the form fields list where the Query variable key should be put.

Option Page

For this source, the list of the form fields should be connected to the meta fields of the options pages.

Related Items

For the “Related Items” source, the following fields should be completed:

• FROM RELATION — a selector with JetEngine relations built on the website;
• FROM OBJECT — a selector with two options: “Parent object” and “Child object”;
• INITIAL OBJECT ID FROM — a list of options of the object ID sources:
  • Current Object ID — shows the related items of the current post;
  • Current User ID — shows the related items of the currently logged-in user;
  • Queried User ID — shows the related items of the selected user;
  • Query Variable — shows the related items from the global request or WordPress request variables;
  • Current Object Variable — shows the related items from the object defined as current;
  • Default WordPress Object (for current page) — shows the related items of a current global object for the current page defined by WordPress.

That’s all about the global preset settings available with the JetFormBuilder plugin for WordPress websites.