In this tutorial, you will learn how to use AEvents Registration Form Code inside ClickFunnels 1.0, and with some extra tweaks, create a two-step registration flow.
Why would you want to do this? Perhaps you want to collect just the name and email on the first step and offer different date/time options on the second.
Or perhaps, the opposite. First, offer the times for your event, then after that selection is made, collect the lead's information.
Either way, below we cover this setup step by step.
Prerequisite: You've already set up a timeline with ClickFunnels 1.0, have set up your registration form, and have implemented our multi-option dropdown menu.
Step 1: Adding an additional step, and identifying fields inside ClickFunnels Page Builder
Open your registration page within ClickFunnels, and Click on 'Edit Page'. Then Pop Up -> Show Pop Up.
Currently, on our popup, there is a headline, 4 input elements, and a submit button
First, we need to combine all these elements into the same row (a row in ClickFunnels is the Blue outlined element in the picture below).
In our popup, we can see that our headline and the submit button are outside of the row. We will need to drag them into the same row.
Now that everything is within a single row, we need to click the copy button to duplicate it.
Once duplicated, we have two sets of our Headline, 4 input fields, and our button.
We now need to decide what to show on the first step and what to show on the second step.
In our example, we will have Name, Email, and Phone on the first input and a webinar selection on the second. So, we've removed the unneeded input fields from the two steps, as well as changed the headline and button text on the second step.
Now, is a good time to copy the CSS ID's from both of our 'Rows' into your text editor (we will be using these with the JavaScript).
To obtain those, click on the settings cog wheel for each row, then CSS button (on the bottom). From the CSS Info popup, please copy the entire CSS ID Selector.
Once you have copied the CSS IDs from both your rows. It is time to change the Action for your Step #1.
Click on the settings cog wheel, for the first button, then Set Action, and select Show/Hide Action. You do not need to make any other selection here.
Click back. The last thing we need to do is obtain this button's CSS ID for our JavaScript. Click CSS Info, then copy your button's CSS ID to your text editor.
And lastly, confirm that your Button #2, is Set Action for Submits the Page.
You've made it through Step 1! Your popup and page are ready to have the JavaScript customized and installed. Now, on to Step #2!
Note: As you saw above, both step 1 and step 2 will still be visible at this point. The JavaScript is what makes the magic happen!
Step 2: Configuring and Installing the JavaScript Snippet
Now that you've set up your popup and obtained the Row CSS IDs and your Button#1 CSS ID, let's customize and install the JavaScript!
Copy the code below into your text editor, and edit the top 3 var fields, with your Row#1 (Step 1), Row#2 (Step 2), and Button#1 (First step button) into the corresponding portions of the first lines of the script.
Var Row1, Var Row2, Var Button1, replace XXXXXX with the corresponding values you copied from the previous step and INCLUDE the #. (Row2 has 2 areas to replace the XXXXXX).
<script
src="https://code.jquery.com/jquery-3.6.3.min.js"
integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
crossorigin="anonymous"></script>
<script>
jQuery(document).ready(function(){
var row2 = "XXXXXX";
//Secondary Row CSS Name
$(row2).hide();
});
jQuery(function(){
var row1 = "XXXXXX";
var row2 = "XXXXXX";
var button1 = "XXXXXX";
//Button ID Name
jQuery(button1).click(function(){
var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
var email = $(".elInputIEmail").val();
if(!filter.test(email)){
$(".elInputIEmail").css("border-color","red");
return false;
}
//First Row CSS Name
$(row1).hide();
//Secondary Row CSS Name
$(row2).show();
});
});
</script>
Once you've customized the JavaScript code, copy and paste it into your Registration page's 'Tracking Code' section, below the previously installed AEvent Header Script.
Then close the Tracking Code popup, and click Save.
Step 3: Testing your new setup
If your timeline already has upcoming events scheduled, navigate to your registration page in your browser, and click the button to initiate your popup.
If you've followed our steps, your pop-up is now set up as a 2-step Registration process for your event!
Live Example