Optimizing Your Order Form for a Better User Experience and Increased Efficiency

Adding and Customizing a Section

1. Access the Funnels Tab: Begin by opening the "Sites" tab found in the sidebar. By default, the "Funnels" tab will be automatically opened.

2. Launch the Funnel Editor: Choose a specific funnel, then click on "Edit Page" to open the funnel editor. Funnel Editor

3. Add a Section: To insert a new section, select the "Medium" option, followed by "Row". Choose a layout with a single column.

Medium Layout Layout Options

4. Insert the Order Form Element: Locate the "Order Form" element from the list and drag it into the column you just added.

Order Form Element

Configuring the Order Form

1. Open Advanced Settings: Click on the "Order Form" element, then choose "Advanced Settings" from the options provided.

2. Customize the Form Fields:

  • To hide the "Company Name" field, simply select the "Toggle Company Name" option.

Company Name

  • If you'd like to remove the "Phone Number" field, click on "Toggle Phone".

Phone Number

  • To hide shipping details, choose the "Toggle Shipping" option.

Shipping Details

Personalizing the Form Steps

1. Edit Step Titles: Select the headline of the first step and rename it to "Personal Details".

Step Headline

2. Update Sub-headlines: Below the headline, modify the sub-headline to read "Enter Your Name and Email".

Sub-headline

Saving and Previewing

1. Save Your Progress: After customizing the order form, make sure to save your changes.

2. Preview the Page: Head to the "Overview" tab and select "Preview Page" to view your updated two-step order form in action.

Preview Page

Testing the Form

  1. Input Test Data: In the first step, enter a sample name and email, then proceed to the next step by selecting "Go to Step 2".

  2. Check Product Display: The second step will showcase the product or service available for purchase.

Troubleshooting and FAQs

  • Can't Locate the Order Form Element?: Double-check that you're in the right section of the funnel editor and have selected the correct option to add an element.

  • Need to Undo Changes?: Use the undo function within the editor, or manually revert the settings to their initial configuration.

PreviousEnhancing User Engagement with a Tailored Progress BarNextCustom Code Integration with JS/HTML

Last updated

Was this helpful?