Welcome to this step-by-step tutorial on setting up a registration form using Unbounce and AEvent. Whether you want to create the form within a lightbox or on the base page, we'll cover both options. So, let's dive right in!

Step-By-Step Tutorial:

1. Adding the Form to the Page

Start by dragging and dropping a headline element onto the page.

Next, add a form element to capture user information.
Within the form, make sure to include fields for capturing the name, email, and phone number.

2. Customizing Hidden Fields

By default, AEvent captures certain values as hidden fields when a registration is submitted.

To customize these fields, click on the "Hidden Field" option.
Create a custom tag by pasting the desired name into the field.
Similarly, copy the webinar ID and paste it into the "Webinar ID" field.
For the webinar timeline (WTL), paste the value into the appropriate field.

Lastly, add a field for the landing page (LP).

3. Specifying the Form Submission URL

Look for the "action" attribute in the form's code and copy the entire URL.

Select the form and navigate to the "Form Confirmation" section.
Choose the option to "Post form data to a URL" and paste the URL.
Set the target as "parent frame."

4. Including Event Header Code

To ensure proper event tracking, create a JavaScript element.

Copy the registration header code from the "Settings > Code > Header Script" of the registration page.
Paste the code within the JavaScript element.
Click "Done" and then "Save" to complete the setup for one-time registrations.

5. Creating a Dropdown Menu for Webinar Times

Suppose you want to offer multiple webinar times to choose from.

Edit the form fields and remove the webinar ID field.
Add a dropdown menu element and name it "time selection."
Make sure to uncheck the "required" option.
Set the field name and ID as "webinar ID."
Optionally, add a default choice like "Select a time below."
Click "Done" to save the changes.

6. Customizing the JavaScript

Edit the JavaScript element to include additional functionality.

Copy and paste the provided jQuery code above the event code.
Ensure that the custom JavaScript code is copied exactly.
Click "Done" and then "Save" to finalize the changes.

7. Populating the Dropdown Menu

On page load, the dropdown menu will be populated with the next three webinar times.

To modify the displayed times, edit the JavaScript element.

Adjust the values within the script to show the desired webinar intervals.
Separate each value with a comma.

For example, you can display the next webinar, one four webinars later, one eight webinars later, and one ten webinars later.

8. Testing and Completion

☑️ Important ☑️

Save the changes and load the page to see the populated dropdown menu.
Users can now select from the available webinar times when they register.
Remember to adjust the intervals based on your webinar schedule.

jQuery Code (for Multi-Option Dropdown):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Custom JS Code (for Multi-Option Dropdown):

<script>  
window.onload = function() {
     var newOptions = {
       	"{{!webinar-webinar1}}": "{{!webinar-webinar1id}}",
  		"{{!webinar-webinar2}}": "{{!webinar-webinar2id}}",
  		"{{!webinar-webinar3}}": "{{!webinar-webinar3id}}"
};
var $el = $("#webinarid");
$.each(newOptions, function(key,value) {
  $el.append($("<option></option>")
     .attr("value", value).text(key));
});
  };
</script>

Custom JS Code (for Multi-Option Dropdown Displayed in Registrant Time Zone):

<script>
window.onload = function() {
	var newOptions = {       	
		"{{!reg-dayofweek1}}, {{!reg-month1}} {{!reg-dayofmonth1}} -{{!reg-timeZone1}}": "{{!webinar-webinar1id}}",
	  	"{{!reg-dayofweek2}}, {{!reg-month2}} {{!reg-dayofmonth2}} -{{!reg-timeZone2}}": "{{!webinar-webinar2id}}",
	 	"{{!reg-dayofweek3}}, {{!reg-month3}} {{!reg-dayofmonth3}} -{{!reg-timeZone3}}": "{{!webinar-webinar3id}}"
};
	var $el = $("#webinarid");
	$.each(newOptions, function(key,value) {  
		$el.append($("<option></option>")     
		.attr("value", value).text(key));
	});  
};
</script>

UnBounce Compatibility Issue (flag not inside the phone field), CSS fix below:

<style> .flag-container { top: 35px!important; } </style>

Congratulations! You have successfully created a registration form with AEvent in Unbounce.

This tutorial provides a comprehensive guide to setting up a registration form using Unbounce and AEvent. Whether you're a beginner or have some experience, following these steps will ensure you capture user information effectively and offer convenient webinar time options. Enjoy creating engaging registration experiences for your events!