Back to contents

JetEngine: How to Create a Form Layout

 

From this tutorial you will learn how to create and customize a form layout with JetEngine plugin for the page in Elementor.

With JetEngine plugin creating a form is simple and easy. You can start your own basic form template and add this form template to your website, customize it and have guests order your services online. So let’s dive into the process of creating a layout for the form.

Creating a form layout

1 Step — WordPress Settings

Proceed to the JetEngine > Forms tab in your WP Dashboard and click the Add New button.

jetengine-forms-block

2 Step — Form Fields

Come up with the title for your form and start adding fields to set the area that should be filled out by your customers.

Form Creation

3 Step — Types of the Fields

There are specific field types you can add, let’s figure some of them:

  • Text — Name, Surname, etc.
  • Textarea — for users to add some comments within the form.
  • Select — Checkbox — Radio — to add the choosing option.
  • Number — for example, the number of people.
  • Date/Time.
  • Media — to let the users add some documents, pictures, etc.

Learn more about the types from our JetEngine: Forms field types overview

Fields Settings

Page Break and Pre-set Forms Fields Value

Also, you can add a Page break that allows dividing your forms in some kind of steps with the Next Button.

Page Break

Pre-set Forms fields value is an option to add the autofill according to the settings you apply.
You should select:

  • Text — Source (Post, User, URL Query Variables).
  • ID (Current user or post ID, URL Query Variables).
  • Property for each field.
Pre-set

In this example the Email Field is autofilled:

Pre-set example

4 Step — Fields Order

When all your fields are set you can change the order and length.

Fields ordering

5 Step — Notification Settings

Below the Fields Settings block, you will find the Notifications Settings section where you can specify the type and the number of notifications. Depending on the type you will get different areas to fill up.

Send Email

Check out our full Notification Settings overview

6 Step — Messages Settings

In the Messages Settings block, there are sample messages that the user will receive whether the form is filled successfully or not.

Messege fields

7 Step — Apply and Publish/Update Buttons

Don’t forget to click the >Apply Changes button every time you make changes in order to save progress. After you finished the setting process, click on the Publish/Update button.

8 Step — Elementor settings

Afterward, you can go to the page where you want to add a newly created form and open the page with the Elementor editor.
Drag and drop the Form widget to the canvas of the page and select the form you have just created from the Content > Select form directory.

booking-form-widget

Feel free to use different settings to customize the appearance of the order form according to your needs.

Form editing

Click the Update button.

Now you can allow your customers to register an appointment right from your site.