For most add-on installations of the 3-STEP ORDER FORM script, you can simply click the CREATE NEW button:
Please note: You can use this script over and over for other order pages without having to create a new and unique script. On-Page Configuration Will Vary.
... now do a keyword search for 3 STEP ORDER FORM
Once you have located the 3-STEP ORDER FORM script, click the thumbnail image and create the add-on per the installation instructions.
You will need to name your script. We recommend a naming convention like this:
3SOF (Test Funnel) or 3 STEP ORDER FORM (Book Funnel)
It's best to name it with the name of the add-on AND in parentheses, make sure to name which funnel it belongs to so you can easily identify later.
Once you have completed this area, click the red button below to create your add-on script.
Step 4: On-Page Configuration
For a video tutorial that outlines exactly how to set this up, I recommend viewing this video:
On your page where you wish to initiate an ORDER, you will create 6 ROWS and you will use these rows to customize the information you ask for during an order.
Let's start with the first 2 ROWS.
Row 1 is the Headline where it shows the text: Step 1: Contact Info
This information is completely customizable, you can change the headline, the colors, the font, the padding, etc, it's your ROW, you can set it up how you want and can indicate which information is being collected.
Note ROW 1 is just the headline area and you will update the CSS TITLE appropriately to be: step-1-headline
Let's look at ROW 2, this is the area where we can customize the information being collected.
In our example, we have chosen to use 2 form fields set to collect FULL NAME and EMAIL ADDRESS.
This row will have a CSS TITLE as well, and it will be: step-1-row
INSIDE of the 2nd ROW where the input fields are, the last part of the puzzle is a button allowing the end-user to unlock the next row of information being collected.
You will have a fully customizable button here and you can name it how you wish, in our example, we called it Next Step...
Next you will need to change the CSS TITLE of your Button Element.
It should be: step-1-button
Please Note: You do not need to assign a button action to this button. The only button that needs a button action will be the final submission button.
You will now go through the same process with Step 2 and will collect the information and data you would like:
The above image would indicate what your ROW 3 and 4 might look like, but you can of course customize the look, feel and information collected in your rendition.
Use the following CSS TITLES when setting up ROW 3 and 4: