The Booking form widget allows you to send a request for an appointment/consultation/lecture to a specialist/speaker for an available date and time. After sending the application, it appears in the admin dashboard of the Bookinder plugin and can be reviewed by the admin. The form has six types of fields(Name, Email, Phone, Comment, Date, Speaker) with separate settings that can be placed in the desired order. The widget provides a separate design for each form field so that you can get the desired display result.
For further work, you need Elementor to be installed on your site. You can download it from wordpress.org
Open or create a page using Elementor and drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:
Content Tab
In the Content section, you can manage basic settings of the Booking form widget such as form fields, speaker/person to book, button, and other related form settings.
General
Filter speakers by specialities
Select the specialty of speakers/persons that will be available for booking. To make a person available for booking, add a new post via Bookinger>Speaker>Add new and enable the option Accepts bookings in the post settings.
Fields alignment
Specify the alignment of the fields in the form: Left, Right, Center, Space between, Space around. The option can be managed for different devices.
Submit button alignment
Specify the alignment of the submit button in the form: Left, Right, Center. The option can be managed for different devices.
Show title
The toggle to enable/disable the form title display. When this option is enabled you can enter the title text and set the alignment.
Submit button text
Enter the text for the form submit button.
Messages
- Success message – enter the text of the message that will be displayed after the successful form submit.
- Success message text align – specify the alignment of the success message text in the form: Left, Right, Center.
- Error message text align – specify the alignment of the error message text in the form: Left, Right, Center.
Form layout
Section for managing form fields layout. Add, remove or copy each element and customize it to suit your needs.
Click “Add Item” button and manage each of the fields.
- Field type – select one of the available field types: Name, Email, Phone, Comment, Date, Speaker.
- Label text – enter the label text for the current field. The field supports dynamic tags.
- Default value text – enter the default value text of the current field. The field supports dynamic tags.
- Label position – select the field label position: Before, After, Above left, Above center, Above right, Under left, Under center, Under right.
- Required – the toggle to make the current field required
- Placeholder – enter the placeholdr text for the current field. The field supports dynamic tags.
- Height – specify the height of the current field in different units(px, %) using the slider. The field supports responsive settings.
- Width – specify the width of the current field in different units(px, %) using the slider. The field supports responsive settings.
Style tab
On the Booking form widget styles tab, you can configure everything related to the visual style of elements: colors, typography, backgrounds, borders, and more.
Title/Speaker field/Success message/Error message/No available time message
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
NORMAL/HOVER
The element settings for different states.
- Color– specify the font color and opacity for the text of the current block using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Label
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Min Width – specify the minimum width of the current element for desktops, tablets, or phones using the slider using the slider.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
NORMAL/HOVER
The element settings for different states.
- Color– specify the font color and opacity for the text of the current block using the color picker.
- Required mark color– specify the color and opacity for the mark of the required field using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Name field/Email field/Phone field/Comment field/Date field
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
NORMAL/HOVER
The element settings for different states.
- Color– specify the font color and opacity for the text of the current block using the color picker.
- Placeholder color – specify the font color and opacity for the placeholder text of the current block using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Booking time
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Scale – a slider to adjust the scale of the booking date.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
NORMAL/HOVER
The element settings for different states.
- Color– specify the font color and opacity for the text of the current block using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Button
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Width – specify the width of the button in different units(px, %) using the slider
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
NORMAL/HOVER
The element settings for different states.
- Color– specify the font color and opacity for the text of the current block using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Advanced Tab
The advanced tab allows you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.
Save changes
Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.
