Sites

2-Step Order Form

2-Step Order Form 2-Step Order Form Summary: For this element, you will have the Shipping details and the information in two separate sections. You can use the 2-Step Order Form to get your customer's contact information

9 min read· 2,046 words· 59 images

2-Step Order Form

Summary:

For this element, you will have the Shipping details and the information in two separate sections.

You can use the 2-Step Order Form to get your customer's contact information and shipping details. For this element, you will have the Shipping details and the information in two separate sections. Select the element to open its settings on the right-hand side of your builder.

General Settings

2-Step Order Form – figure 1

Element Name

Under General Settings, you can view the default name of the editing option you are working on under Element Name. You have the option to keep the default title or rename it to your liking.

2-Step Order Form – figure 2

Text Align

Under Text Align, you can adjust the position of your text as desired. You can choose to align it to the left, center, right, or justify it.

2-Step Order Form – figure 3

Button Color

If you want to change the button color of your order form, you can do that by selecting the color you want to change it to in this field.

If you didn't find your color, you can also add custom colors using the color's hex code. Just type it in the space provided and click "Add Color".

2-Step Order Form – figure 4

Button Text Color

If you want to change the button text color of your order form, you can do that by clicking on the color you want to change it to in this section, or add a color by entering its hex code.

2-Step Order Form – figure 5

Button Size

Under Button Size, you can adjust the size of your button according to your preference. You can choose from sizes between Extra Small and Extra Large.

2-Step Order Form – figure 6

Button Style

For Button Style, you can select a style for your button by choosing from the available options: Flat Color, Gradiant, Subtle Style, and Border Bottom.

2-Step Order Form – figure 7

Input Background Color

If you want your order form to have a background color, you can do that by choosing from the available options within this section, or add a custom color by inputting the hex code. Simply type it in the space provided and click "add color".

2-Step Order Form – figure 8

Form Corner

Under Form Corner, you can adjust the degree of curvature for the edges of your form fields.

2-Step Order Form – figure 9

Typography Type

You can choose the font type for your form by selecting options from the dropdown. Opt to use the headline or content font that was set up in settings, or choose a custom font and select from a variety of fonts from the given dropdown.

2-Step Order Form – figure 10

Button Actions

Under Button Actions, you have the option to choose between going to the next step, a website URL, or to 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/ website builder.
  • Go to website URL:  When selected, this option will require you to enter the website URL the order form should be redirected to when submitted.
  • Select a Step: This option allows you to choose another step in your funnel/ website which the order form should display when submitted.

2-Step Order Form – figure 11

Advanced Settings

2-Step Order Form – figure 12

Step 1

2-Step Order Form – figure 13

Headline

You will see the default headline name here, and you can either keep it as is or rename it. Your adjustments will be dynamically displayed in the form as a preview.

2-Step Order Form – figure 14

Sub-Headline

Similarly to the Headline, you can decide to change it or allow it to remain as is.

2-Step Order Form – figure 15

Toggle Company Name

Choose whether to show a form field for the "Company name" or hide it.

2-Step Order Form – figure 16

Company Name

Edit the description in the company name form field here.

2-Step Order Form – figure 17

Full Name

Edit the description in the full name form field here.

2-Step Order Form – figure 18

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.

2-Step Order Form – figure 19

Email Address

Edit the description in the email address form field here.

2-Step Order Form – figure 20

Toggle Phone

You can decide to show a form field for the Phone number or you can hide it.

2-Step Order Form – figure 21

Phone Number

Edit the description in the Phone number form field here.

2-Step Order Form – figure 22

Enable Country Picker

You can enable or disable the country picker using Enable Country Picker.

2-Step Order Form – figure 23

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.

2-Step Order Form – figure 24

Auto-Complete Address 

Enable this option to allow users to search and select addresses from the search bar. The selected address will be filled in all the separate address fields.

2-Step Order Form – figure 25

  1. Shipping Headline: You will find the default shipping headline name here, which you can choose to keep or rename as desired.
  2. Address: Edit the description in the Address form field here.
  3. City: Update the description in the City form field here.
  4. State/Province: Customize the description in the State/Province form field here.
  5. Zip/Postal Code: Edit the description in the Zip/postal code form field here.

2-Step Order Form – figure 26

Button Text

Under Button Text, you can customize the text displayed that allows customers to navigate to Step 2 of the order form.

2-Step Order Form – figure 27

Sub Button Text

You can add a sub-text to the button by inputting a text here.

2-Step Order Form – figure 28

Footer Text

You can add any other information you want your visitor/client to be aware of here. This text will be displayed below the button.

2-Step Order Form – figure 29

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.

2-Step Order Form – figure 30

Order Bump Options

  • Enable Order Bump: Toggle this switch to enable order bumps to your order form.
  • Add Bump Product: Click this button to begin the process of 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.

2-Step Order Form – figure 31

Coupon Options

Offer discounts to your customers using promotional codes by toggling the “Enable Coupon Codes” switch.

2-Step Order Form – figure 32

Terms and Conditions

Enabling this feature allows the terms and conditions checkbox to be present on both steps. Customers will have to agree to the specified terms and conditions to proceed with the order.

2-Step Order Form – figure 33

Sticky Contact

Enable the Sticky Contact feature to allow the system to automatically pre-fill form fields for returning customers by utilizing 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.

2-Step Order Form – figure 34

New Contact on Every Purchase

To create a new contact for every purchase, toggle on the New Contact on the Every Purchase feature.

2-Step Order Form – figure 35

Validate Disposable Email

When enabled, the system checks if the email address entered belongs to a disposable email provider (e.g., temporary email services often used for spam or temporary purposes) to ensure that only valid emails will be entered into the system.

2-Step Order Form – figure 36

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 signifies that it will be hidden on that device.

2-Step Order Form – figure 37

Custom Class

You can input a Custom Class in the given field, giving you even more customization options!

2-Step Order Form – figure 38

CSS Selector

If you need to copy the Custom CSS, just click on the "Copy" icon on the right side of the reference code.

2-Step Order Form – figure 39

Step 2

2-Step Order Form – figure 40

Headline

You will see the default headline name here, and you can either keep it as is or rename it.

2-Step Order Form – figure 41

Sub-Headline

Similarly to the Headline, you can decide to change it or leave it as it is.

2-Step Order Form – figure 42

Back To Shipping Text

This is the menu that allows you to go back to Step 1 of the order form.

2-Step Order Form – figure 43

Select Item And Price Text

You can edit the description in the Item and price form field here.

2-Step Order Form – figure 44

Summary Item and Price Text

You can edit the description in the Order Summary for the Item and price form field here.

2-Step Order Form – figure 45

Button Text

This is the button you will click on to submit the order form to complete the purchase. You can customize this text to your preference!

2-Step Order Form – figure 46

Sub Button Text

You can add a sub-text to the button by inputting the information here.

2-Step Order Form – figure 47

Footer Text

Additionally, you can add any other important information that you would like your visitors/clients to be aware of in the Footer Text section. This text will appear directly below the button.

2-Step Order Form – figure 48

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 that's collected will be forwarded to the payment provider as the billing details.

2-Step Order Form – figure 49

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.

2-Step Order Form – figure 50

Order Bump Options

  • Enable Order Bump: Toggle this switch to enable order bumps to your order form.
  • Add Bump Product: Click this button to begin the process of 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.

2-Step Order Form – figure 51

Coupon Options

Offer discounts to your customers using promotional codes by toggling the “Enable Coupon Codes” switch.

2-Step Order Form – figure 52

Terms and Conditions

Enabling this feature allows the terms and conditions checkbox to be present on both steps. Customers will have to agree to the specified terms and conditions to proceed with the order.

2-Step Order Form – figure 53

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.

2-Step Order Form – figure 54

New Contact on Every Purchase

To create a new contact for every purchase, toggle on or off the New Contact on the Every Purchase feature.

2-Step Order Form – figure 55

Validate Disposable Email

When enabled, the system checks if the email address entered belongs to a disposable email provider (e.g., temporary email services often used for spam or temporary purposes) to ensure that only valid emails will be entered into the system.

2-Step Order Form – figure 56

Visibility

You can decide if you want the order form to be visible on only mobile devices, desktops, or both by clicking on it to highlight the icon.

2-Step Order Form – figure 57

Custom Class

You can input a Custom Class in the given field, giving you even more customization options!

2-Step Order Form – figure 58

CSS Selector

If you need to copy the Custom CSS, just click on the "Copy" icon on the right side of the reference code.

2-Step Order Form – figure 59

Now you know all about two-step order forms! Learn more about the other funnel/website elements by checking out the other articles in this section.


Tagsformordertextbuttonenablehereaddfieldinformationcolor