Article-features-+-Assets Back

How to edit checkout form by ST Form Builder?

1. Setup

To edit a booking form, please following these steps: 

  • Go to Theme Settings > ST Form Builder
  • Click to create a new form
  • Add a basic, user or advanced fields on the booking form
  • On Form Content, you can edit any field you want. For example, I will create a Check box, Text area, number or  Dropdown fields. On Form Content, you can edit any field you want. For example, I will create a Check box, Text area, number or Dropdown fields. There are two fields is required and can’t be removed which are First name(st_first_name) and Last name(st_last_name). You can change the title field only
ST Form Builder Image 1.1
ST Form Builder Image 4
ST Form Builder Image 5
ST Form Builder Image 6
ST Form Builder Image 7
  • Click to use this form to checkout on Form Settings. And Save Form
  • Go to Theme Options > Booking Options > ST Form Builder: Select form for checkout template to choose the Form Name. 
  • And you can see the new checkout form modified by ST Form
ST Form Builder Image 1

2. Troubleshooting

2.1. Booking Emails contains value of extra fields

To show the value of additional fields (after checkout) in the email, kindly insert the shortcode into the email template: [st_email_booking_custom_field field_name = “”]. To ensure correct symbols, please type double quotation mark instead of copying them.

For example, name of custom field is st_note . So insert this shortcode: [st_email_booking_custom_field field_name = “st_note”] into email template

2.2. Broken Layout on "Select Payment Method"

In the user interface of the ST Form Builder, each row is divided into 12 columns. Once the 12-column limit is reached, the next field will automatically move to a new row.

In ST Form Builder, each field has an Advanced Options > Extra Class section. The extra class “col-6” means the field spans 6 columns in width. If there is no extra class, the field defaults to a width of 12 columns. A single row can either have one field without an extra class (spanning 12 columns) or two fields with the class (col-6) each spanning 6 columns. It means, row = col-6+col-6 or just 12 column

If you place a field without an extra class (spanning 12 columns) in the same row as a field (col-6) with a width of 6 columns, the layout will break, cannot (col-6+12 column). In that case, you can fix it by changing to either two fields with the class “col-6” or two fields without any extra class.If you find it too complicated to fix the UI in the ST Form Builder, the simplest solution is to remove all extra classes.

$79