If you want to create booking forms you will need JetEngine plugin first. JetEngine is a plugin for Elementor that allows creating for custom post types, taxonomies, and custom meta boxes for any kind of content along with booking form.
Forms functionality allows your visitors to book something or to choose the needed option, for example, to choose the location for your dinner between the indoor room and outdoor terrace on the restaurant’s website.
This tutorial will help you to create Select, Checkbox and Radio fields in the booking form to pursue this purpose. Now let’s start!
Creating Select, Checkbox and Radio fields in the booking form
Step 1 — To create a Form with JetEngine, you need to enable it in JetEngine > Modules Manager in WordPress Dashboard.
Step 2 — After that, open JetEngine > Forms tab and click Add New option.
Here you’ll see Enter title field where you have to define the custom booking form’s title. You will have access to Field Settings, Notification Settings, and Message Settings below.
Step 3 — Open Field Settings. Here you can choose the preferable Type of the booking form’s field and adjust its name, label (the way it’s displayed on frontend) and description. Let’s learn in more details about the Select, Checkbox and Radio field types.
Step 4 — Select Type allows you adding a select field where the visitor will be able to select one option from the set values. For example, you have a website for the restaurant, and you want to make a booking field for visitors, so they can choose where they want to have dinner between “indoor room” and “outdoor terrace”.
Choose Select Type, then, in Name field write “Restaurant”, in Label field write “Select a location for your dinner”, and in Description write “Here you can select a location for your dinner”. In Fill Options Form choose Manual Input. Then, you have to fill the Option List. You can add as many options as you need. Click Apply Changes and Publish button to save your Form.
Step 5 — If you want to allow people to choose more than one option, use the Checkboxes form field. You can use this type in case you want to add a field, where visitors need to click the checkbox. For example, you have a website for pizza delivery and you want to create a Checkbox field where your clients will be able to choose what ingredients they want in their pizza.
So, let’s create it. In Name field write “Pizza Delivery”, in Label field write “Choose the best ingredients for your pizza!”, and in Description write “Here you can choose the best ingredients for your pizza”. Choose Manual Input in Fill Options Form. You can fill your Option List with such Labels as tomatoes, bacon, chicken, mushrooms, cheese, etc. Click Apply Changes and Publish button to continue.
Step 6 — The last field that we consider is the Radio field. It allows you to choose only one option from two or more options in radio form. For example, you want to make a booking field for visitors so they will be able to choose the time on which they want to book a table in a restaurant.
In the Type field, you need to choose Radio type. Then, fill in Name field with “Booking time”, in Label field write “Choose the booking time”, and in Description write “Here you can choose the booking time”. In Fill Options From you have to choose Manual Input. Then you must fill in Options List with your time for booking table, it could be 11:00, 13:00, 16:00, etc. Click Apply Changes and Publish button to proceed.
Step 7 — Afterward, choose a Page or Post to which you want to add your Form and click Edit with Elementor. After this, find Form widget in the Elements panel and drag the widget to a suitable location.
Step 8 — On the left sidebar, you’ll see the Content Settings block. In the Select Form section choose the Form you’ve created before. Also, you can choose an appropriate Submit Type, and use Cache form output that allows caching the output data of the booking form.
Step 9 — By the way, you can also change the appearance of your Form using Style Settings.
Step 10 — Now you can see the difference between different Field Types in Forms. Here you can see how your Form with Checkbox type looks like.
And here the Form with the Radio type is shown.
Step 11 — After you’ve done with all the Settings, click the Publish button and Preview button to see the results.
Now you’re able to create Select, Checkbox and Radio fields in the booking form using the Manual Input field type. Hope this tutorial was useful and you’re enjoying the results!