You can use the 2-Step Order Form to collect your customer's contact information and shipping details. This element splits the shipping details and contact information into two separate sections. Select the element to open its settings on the right-hand side of your builder.
General Settings
Element Name
Under General Settings, you can see the default name of the editing option you are working on under Element Name. You can keep the default title or rename it to whatever you like.
Text Align
Under Text Align, you can adjust the position of your text. You can align it to the left, centre, right, or justify it.
Button Color
If you want to change the button colour on your order form, select the colour you want in this field.
If you can't find your colour, you can also add custom colours using the hex code. Type it into the space provided and click "Add Color".
Button Text Color
If you want to change the button text colour on your order form, click the colour you want in this section, or add a colour by entering its hex code.
Button Size
Under Button Size, you can adjust the size of your button to your preference. You can choose from sizes between Extra Small and Extra Large.
Button Style
For Button Style, you can select a style for your button from the available options: Flat Color, Gradiant, Subtle Style, and Border Bottom.
Input Background Color
If you want your order form to have a background colour, choose from the available options in this section, or add a custom colour by entering the hex code. Type it into the space provided and click "add color".
Form Corner
Under Form Corner, you can adjust the degree of curvature for the edges of your form fields.
Typography Type
You can choose the font type for your form by selecting from the dropdown. Use the headline or content font set up in settings, or choose a custom font and select from the variety of fonts in the dropdown.
Button Actions
Under Button Actions, you can choose between going to the next step, a website URL, or another step within the funnel or website for Sale Actions.
- Go to Next Step: When selected, the customer will be taken to the next step in your funnel or website builder.
- Go to website URL: When selected, this option requires you to enter the website URL the order form should redirect to when submitted.
- Select a Step: This option lets you choose another step in your funnel or website which the order form should display when submitted.
Advanced Settings
Step 1
Headline
You will see the default headline name here, and you can either keep it as is or rename it. Your adjustments will be shown dynamically in the form as a preview.
Sub-Headline
Similarly to the Headline, you can change it or leave it as is.
Toggle Company Name
Choose whether to show or hide the form field for "Company name".
Company Name
Edit the description in the company name form field here.
Full Name
Edit the description in the full name form field here.
Full Name Validation
Enable this option to check for valid full names. When this feature is enabled, names entered must consist of at least two parts. Additional validations will be applied, such as disallowing names with two consecutive special characters and restricting the use of certain special characters.
Email Address
Edit the description in the email address form field here.
Toggle Phone
You can choose to show or hide the form field for Phone number.
Phone Number
Edit the description in the Phone number form field here.
Enable Country Picker
You can enable or disable the country picker using Enable Country Picker.
Toggle Shipping
You can choose whether to display or hide the form field for Shipping info using the Toggle Shipping feature. If you have shipping info toggled on, you will have options for those fields.
Auto-Complete Address
Enable this option to allow users to search and select addresses from the search bar. The selected address will be filled into all the separate address fields.
- Shipping Headline: You will find the default shipping headline name here, which you can keep or rename as desired.
- Address: Edit the description in the Address form field here.
- City: Update the description in the City form field here.
- State/Province: Customise the description in the State/Province form field here.
- Zip/Postal Code: Edit the description in the Zip/postal code form field here.
Button Text
Under Button Text, you can customise the text displayed that allows customers to navigate to Step 2 of the order form.
Sub Button Text
You can add a sub-text to the button by entering text here.
Footer Text
You can add any other information you want your visitor or client to be aware of here. This text will be displayed below the button.
Main Product Options
- Enable Cart Mode: This feature enables customers to add multiple products to a cart before proceeding to checkout.
- Product Description: Provide detailed information about your product directly within the order form from the description set in the Products tab. This option is disabled by default in both new and existing order forms.
- Pricing Information: Display the recurring and trial information by enabling this setting. This toggle is enabled for new funnels.
Order Bump Options
- Enable Order Bump: Toggle this switch to enable order bumps on your order form.
- Add Bump Product: Click this button to begin adding a bump product to your order form.
- Select Product: You can select the product you would like to add from the dropdown.
- Headline: Create a compelling title for your order bump offer here.
- (One Time Offer) OTO Headline: Encourage upsells by adding an attention-grabbing headline used to highlight a special, limited-time offer.
- OTO Text: Add descriptive text to your One-Time Offer (OTO) in this section.
- Image URL: Select an image from your media library or enter the URL of the image to be displayed.
- Enable by default: "Enable by default" allows you to set the order bump to be selected in the form by default.
Coupon Options
Offer discounts to your customers using promotional codes by toggling the "Enable Coupon Codes" switch.
Terms and Conditions
Enabling this feature adds the terms and conditions checkbox to both steps. Customers will need to agree to the specified terms and conditions to proceed with the order.
Sticky Contact
Enable the Sticky Contact feature to allow the system to automatically pre-fill form fields for returning customers using browser cookies. When a customer visits your site, their previous information, such as name, email address, and other relevant details, will be retrieved from the cookies stored in their browser. This feature streamlines the checkout process, saving the customer time and improving the overall user experience.
New Contact on Every Purchase
To create a new contact for every purchase, toggle on the New Contact on the Every Purchase feature.
Validate Disposable Email
When enabled, the system checks if the email address entered belongs to a disposable email provider (for example, temporary email services often used for spam or temporary purposes) to ensure that only valid emails are entered into the system.
Visibility
Select whether the order form should be visible on mobile devices, desktops, or both by clicking on the respective icons. A blue icon indicates that the order form will be visible on that device, while a black icon means it will be hidden on that device.
Custom Class
You can enter a Custom Class in the given field for additional customisation options.
CSS Selector
If you need to copy the Custom CSS, click the "Copy" icon on the right side of the reference code.
Step 2
Headline
You will see the default headline name here, and you can either keep it as is or rename it.
Sub-Headline
Similarly to the Headline, you can change it or leave it as it is.
Back To Shipping Text
This is the menu that allows you to go back to Step 1 of the order form.
Select Item And Price Text
You can edit the description in the Item and price form field here.
Summary Item and Price Text
You can edit the description in the Order Summary for the Item and price form field here.
Button Text
This is the button customers will click to submit the order form and complete the purchase. You can customise this text to your preference.
Sub Button Text
You can add a sub-text to the button by entering the information here.
Footer Text
You can also add any other important information you would like your visitors or clients to be aware of in the Footer Text section. This text will appear directly below the button.
Enable Postal Code and Country
You can enable or disable the option to show the postal code and country here for Authorize.net and NMI connections. The zip code and country information collected will be forwarded to the payment provider as the billing details.
Main Product Options
- Enable Cart Mode: This feature enables customers to add multiple products to a cart before proceeding to checkout.
- Product Description: Provide detailed information about your product directly within the order form from the description set in the Products tab. This option is disabled by default in both new and existing order forms.
- Pricing Information: Display the recurring and trial information by enabling this setting. This toggle is enabled for new funnels.
Order Bump Options
- Enable Order Bump: Toggle this switch to enable order bumps on your order form.
- Add Bump Product: Click this button to begin adding a bump product to your order form.
- Select Product: You can select the product you would like to add from the dropdown.
- Headline: Create a compelling title for your order bump offer here.
- (One Time Offer) OTO Headline: Encourage upsells by adding an attention-grabbing headline used to highlight a special, limited-time offer.
- OTO Text: Add descriptive text to your One-Time Offer (OTO) in this section.
- Image URL: Select an image from your media library or enter the URL of the image to be displayed.
- Enable by default: "Enable by default" allows you to set the order bumps to turn on by default.
Coupon Options
Offer discounts to your customers using promotional codes by toggling the "Enable Coupon Codes" switch.
Terms and Conditions
Enabling this feature adds the terms and conditions checkbox to both steps. Customers will need to agree to the specified terms and conditions to proceed with the order.
Sticky Contact
Toggle on or off to add or remove the sticky contact. When turned on, this will auto-fill the customer's information if their data was saved in the system.
New Contact on Every Purchase
To create a new contact for every purchase, toggle the New Contact on the Every Purchase feature on or off.
Validate Disposable Email
When enabled, the system checks if the email address entered belongs to a disposable email provider (for example, temporary email services often used for spam or temporary purposes) to ensure that only valid emails are entered into the system.
Visibility
You can decide if you want the order form to be visible on mobile devices only, desktops only, or both by clicking to highlight the icon.
Custom Class
You can enter a Custom Class in the given field for additional customisation options.
CSS Selector
If you need to copy the Custom CSS, click the "Copy" icon on the right side of the reference code.
Now you know all about two-step order forms. Learn more about the other funnel and website elements by checking out the other articles in this section.