2 Step Form

Collect shipping and payment info in one template

Choose this form option if you want to quickly add customer information fields, billing options, a purchase summary, and an order bump to the funnel, all with a single template.

Note You can place only one 2 Step form widget (hidden or visible) on a step.

This template has two sections: Shipping and Your Info.

The Shipping section collects customer information (e.g. name, email, etc.). The Your Info section displays product/subscription options and payment gateways. It also has an order bump option.

Note Click a heading (Shipping or Your Info) to customize the section name. (optional)

Collect shipping information

Shipping

You can edit or delete any field on the Shipping form. You can also add a deleted field. All fields, by default, have a red asterisk which means they are required.

Edit a field

You can't edit a field on the template. Instead, changes in the settings panel. This is where you customize the design (e.g. margins, background color, etc.) by clicking the Basic or Advanced tabs.

You can also:

• change field status from Required to Not Required (and vice versa)

• edit or remove field labels

• edit or remove field placeholder text

1. Click a field one time. The side panel displays.

2. Make changes.

3. Click Save changes.

4. Click Preview.

Delete a field

To delete a form field:

1. Click the field one time.

2. Click the trash icon.

Delete a field

Adding a template field

If you delete a form field and want to add it back to the template:

1. Click the plus (+) icon at the top of the form.

2. Select an option on the drop-down menu. Funnelish adds the field to the bottom of the form.

3. Drag the field to your preferred location.

Add a template field to the canvas

Field type

Change field design and input requirements by customizing the Input type. You can change the input type for template fields and custom fields.

1. Click a field one time. The side panel displays.

2. Click an Input type. The field in the template changes.

3. Click Save changes.

4. Click Preview.

Input type options

Your Info

Click number 2 to open the second form. This is where you configure products and billing. You can also customize page design with standard tools (e.g. margins, font, background color, etc.).

This form has five key sections that you need to review and customize:

• Product List
• Payment Form
• Order Summary
• Order Bump
• CTA button

Product List configuration

Describe the products or services on offer. You can also customize order quantities.

1. Click the Product List field one time. The side panel displays.

2. Click the Manage Products button. A new panel displays on the right.

Manage products

Editing products

In the new panel, edit current product information or add new products.

1. Click a product name to open the product page.

2. Edit information. (optional)

3. Click Save changes.

Products or subscriptions in the funnel

Adding products

1. Click the Add a new product button.

2. Complete the workflow to add a one-time product or subscription.

Customizing order quantities

Next to the Select type heading, there are three options to control how much a customer can purchase.

• Single checkout means a customer can purchase one item of one product or subscription. Bulk purchases are not possible. (e.g. one bag of coffee or one set of cups).

• Multi-checkout means a customer can purchase one item of multiple products or subscriptions at one time (e.g. one bag of coffee and one set of cups).

• Multi-Quantity means the customer can make bulk (up to 10) purchases of multiple products or subscriptions at one time.

Multi-Quantity option

1. Go to the Product List settings panel.

2. Click the button next to Selection type.

3. Choose an option.

4. Click Save changes.

Choose a Selection type

Payment Form

This is where you configure payment gateways. We describe the payment form in a different article.

• Learn how to set up and configure the Payment Form.

Configure payment gateways

Order Summary

This section shows dynamically generated content to the customer. It's not possible to change the internal structure of this field. However, you can customize the design.

1. Click the field one time The side panel displays.

2. Customize settings. (optional)

3. Click Save changes.

4. Click Preview.

Dynamically generated customer order summary

Order Bump

This handy feature promotes a product just before the customer goes to the checkout. The Order Bump feature is built into the 2 Step form. It's also a standalone widget. We describe how to set up and customize an order bump in a different article.

• See Order Bump.

Customer view of order bump with image

CTA button

Customize the design of the CTA button at the bottom of the template. You can also edit the button label and text under the button.

1. Click the button field one time. The side panel displays.

2. Click Heading to change the button label. (optional).

3. Click Sub-headline to add a second line of label text. (optional).

4. Customize label design like color, font, and margins. (optional)

CTA button

CTA sub-text

The default sentence below the CTA button (100% secure and safe payment) is a separate field. Click the field one time to open the side panel and change the text or add customizations. (optional)