Creating a Registration Form

Open a Lightbox or on the base page, drag in a form.
Add the name, email and phone fields.

Grab your Form Registration Code from Settings, Code and copy to Notepad.

Unclick 'Auto generate..." name box and retype name field to just 'name'.

Under 'phone number' do the same as 'name' and retype just 'phone'

Add hidden field and add 'custom tag' to 'field name and id'.

Add another hidden field and add 'webinar id' to the same field.

Add another hidden field and add 'wtl' to the same field again.

Add another hidden field and add 'lp' to the same field again.

After hitting done, grab URL from form reg code in notepad.

Enter settings on the right column.

Paste Registration Page Code in Javascript at bottom of page (under 'Header').

For a Dropdown Menu (multiple event times):

In the form, delete the 'Webinar Id' field.

Add 'dropdown menu' field and change field label to 'Time Selection'.

Unclick 'Auto generate..." field and change field name & Id to 'webinar Id'.

Under 'menu choices' write "select a time below".

Click Done.

Head into the Javascript at the bottom of the page and copy the code below.

Paste the Jquery above the Aevent Registration Code.

Paste the Custom JS Code below, after the Aevent Code.

Click Done then Save.

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 TimeZone):

<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>

Is the Flag Image sitting a little high for your phone field? (UnBounce Compatability Issue, CSS fix below)

Paste this clip into a Stylesheet for the related page / lightbox

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