Skip to main content

Collect Additional Data for Online Booking in Framer

Overview​

This tutorial explains how to efficiently collect essential client information using the Bookla Component in Framer. Learn how to create custom forms to gather company names, comments, or other specific details required for your workflow. Examples will be provided for structuring custom data, along with a step-by-step guide on retrieving this information within the Bookla platform.

Benefits​

  • Customization – Collect only the information that is relevant to your business.
  • Improved Workflow – Streamline the booking process by pre-filling client data.
  • Better Client Insights – Gain valuable data for enhancing customer experience.
  • Seamless Integration – Use Bookla within Framer without external tools.

Set up Custom Forms​

  1. Go to your Framer page, click on your component, and scroll through the parameters until you find Custom Form.
  2. Click on it.
  1. There are three fields: Title, Subtitle, and Fields.
  2. Change the Title and Subtitle to fit your needs, then click on Fields.
  3. Click "Add...".

Title and Subtitle are the texts that will be displayed in the header of the custom form.

  1. Enter the data:

    • Label – The information you want to collect from the client.

    • Type – Choose the appropriate field type:

      • text – Simple text field.
      • textarea – For longer text, e.g., comments.
      • number – For numerical input, e.g., age.
      • multiselect – Allows selecting multiple options.
      • select – Allows selecting a single option.
      • phone – For client phone numbers.
      • url – For links.

    • Placeholder – Text displayed inside the input field before the client enters information.

    • Input Width – Adjust the field width.

    • Required – Specify if the field is mandatory.

    • Error Text – Message displayed when a required field is left empty.

Note: If you use select or multiselect, separate options with a comma (,) in the Option field.

Test the Form​

  1. Go to the page.
  2. Select a date and time.
  3. Click "Continue".
  4. Fill in the additional form.
  5. Click "Continue".
  6. Enter client information.
  7. Click "Make Booking".