3 Step Order Form :: CF Pro Tools Add-On Features for ClickFunnels




Description and Best Use Case For This Add-On:


The best use of the 3 Step Order Form is to build a more dynamic and CUSTOMIZED user friendly order process for your buyers.    


This add-on will create an expanding "bite-size" information gathering experience for your buyers.    


The information you request and how you design it is up to you!



OVERVIEW (For Advanced Users)


For those of you ready to jump in and are familiar with CFProTools, you can use this checklist:


  • Add Your Domain To CFProTools DOMAINS TAB

  • Create Any ORDER Type Page

  • Create 6 Rows For Your Order Experience

  • Refer To On-Page Configuration For CSS TITLES and Further Details

  • Create and Install 3 Step Order Form Add-On

  • Known Conflicts:  Does Not Work With SCROLL TO ERROR




Step 1:   Add Your Domain To CFProTools DOMAINS TAB


Your first step will be to add your domain to the CFPT Domains Tab.

Here's a guide on how to do that:


https://cfprotools.freshdesk.com/support/solutions/articles/29000041078-how-to-add-a-domain-to-cf-pro-tools-online-installation-guides




Step 2:  Create Your ORDER Page


You need to create an ORDER type page installed in your funnel on ClickFunnels in order for this add-on to work.


Here's a quick tutorial on how to create funnel pages using ClickFunnels:


https://help.clickfunnels.com/hc/en-us/articles/360060380833-Creating-A-New-Funnel-Step




Step 3:  Create Your Add-on Script


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:


ROW 3:  Step 2 Headline, CSS TITLE:   step-2-headline


ROW 4:  Step 2 Content, CSS TITLE:  step-2-row


BUTTON:  Next Step Button, CSS TITLE:  step-2-button



Please Note:  CSS TITLES are case sensitive, please use lower case.



You will now go through the same process with Step 3 and will collect the information and data you would like.  Chances are this will be the final Credit Card collection and Submission row.




The above image would indicate what your ROW 5 and 6 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:


ROW 5:  Step 2 Headline, CSS TITLE:   step-3-headline


ROW 6:  Step 2 Content, CSS TITLE:  step-3-row


BUTTON:  Next Step Button, CSS TITLE:  step-3-button


Please Note:   Your final submission button ACTION should be set to SUBMITS THE PAGE




Step 5:  Install Your Add-on Script


You can now copy your newly generated script out by clicking the blue button where your script is located in CF PRO TOOLS.

The button says, "COPY CODE", this will copy the script to your virtual clipboard.


You are now ready to paste the script into your FOOTER TRACKING CODE AREA.


Click SETTINGS --> TRACKING CODE




Now click the FOOTER CODE TAB, and paste your code in:



Now SAVE your page, you are ready to preview and test your new add-on!



Known Conflicts:


The following add-ons do not work with 3 STEP ORDER FORM


  • Does not work with SCROLL TO ERROR



This may not be an all-inclusive list, if you find any conflicting add-ons with this add-on, please let us know at support@cfprotools.com



What To Do Next:


Here Are A Few Other Help Docs You May Wish To Check Out:


Chances are you already have a CF Pro Tools account and you can find all available resoureces, there: app.cfprotools.com


However, if you have do not yet have a CF Pro Tools account, you will need one in order to take the actions in this help doc.   You can sign up at any time here:   www.cfprotools.com


If you have questions, you can also hit us up in support at support@cfprotools.com