Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
cleo inacio
169 PointsFloodlight Fire on page load and not Form submission.
Can someone please tell me why the floodlight is firing on pageload and not form submission? I cant seem to figure out what I am missing here. Il buy you a coffee if you can help me haha. Please note that this is being implemented into a wix site via html/iframe - perhaps this is an issue?
<html>
<head>
<title>OW Form</title>
<!-- ---------------------------------------------------------------------- -->
<!-- NOTE: Please add the following <META> element to your page <HEAD>. -->
<!-- If necessary, please modify the charset parameter to specify the -->
<!-- character set of your HTML page. -->
<!-- ---------------------------------------------------------------------- -->
<META HTTPS-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ---------------------------------------------------------------------- -->
<!-- NOTE: Please add the following <FORM> element to your page. -->
<!-- ---------------------------------------------------------------------- -->
<style>
body{
font-size: 18px;
font-weight: 400;
font-family: Arial, Helvetica, sans-serif;
}
.form-wrapper {
min-width: 180px;
max-width: 980px;
position: absolute;
width: 100%;
text-align: center;
}
.row-wrapper{
display:flex;
margin: 0px;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
}
.ow-input:hover{
border-bottom: 1.1px solid rgba(181, 156, 109, 1);
transition: all 1s ease;
}
.ow-input{
outline: none;
-webkit-appearance:none ;
border-bottom: 1px solid #333;
border-top: none;
border-left: none;
border-right: none;
padding: 10px;
display: flex;
font-family: sans-serif !important;
font-size: 20px !important;
font-weight: 400 !important;
color: #5E5E5E !important;
margin: 0 0 5px;
margin-left: 0px;
width: 100%;
-webkit-transition: 0.5s ease all;
transition: 0.5s ease all;
background-color: transparent;
-webkit-appearance: none;
-moz-appearance: none;
font: normal normal normal 20px/1.4em proxima-n-w01-reg,sans-serif;
-webkit-appearance: none;
border-radius: 0;
box-sizing: border-box;
}
.ow-input::placeholder {
color: #000;
font-size: 18px;
font-weight: 400;
}
.ow-label{
display: flex;
position: absolute;
font-weight: 400;
font-family: sans-serif;
}
.ow-label.last{
margin-top: -20px;
display: flex;
position: absolute;
font-weight: 400;
font-family: sans-serif;
}
.row-wrapper.leadsource{
display:flex;
margin: 20px;
margin-left: 0px !important;
margin-right: 0px !important;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
}
.ow-input.leadsource{
padding: 5px;
cursor: pointer;
font-weight: 400;
display: flex;
border: none;
border-bottom: 1px solid rgba(94, 94, 94, 1);
color: #5E5E5E;
margin-top: 30px;
width: 100%;
-webkit-transition: 0.5s ease all;
transition: 0.5s ease all;
background-color: transparent;
-webkit-appearance: none;
-moz-appearance: none;
font: normal normal normal 20px/1.4em proxima-n-w01-reg,sans-serif;
-webkit-appearance: none;
border-radius: 0;
box-sizing: border-box;
}
.ow-label.leadsource{
display: flex;
position: absolute;
font-weight: 400;
padding-left: 10px;
font-family: sans-serif;
}
.ow-submit{
font-family: sans-serif;
text-transform: capitalize;
letter-spacing: 1.3;
font-size: 20px;
font-weight: 400;
padding:0px 15px;
background:#fff;
border:0 none;
cursor:pointer;
-webkit-border-radius: 5px;
border-radius: 5px;
}
/*---------------------*/
.dropdown {
position: absolute;
left: 50%;
top: 25%;
width: 200px;
margin-left: -100px;
}
.dropdown span {
padding: 1em;
font-size: 16px;
background-color: #1c222a;
color: #a9a9a9;
display: block;
}
.dropdown span:after {
content: '';
display: block;
float: right;
width: 0;
height: 0;
margin-top: 5px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid rgba(0,0,0,0.2);
}
.dropdown span:hover {
cursor: pointer;
}
.dropdown span.active:after {
content: '';
display: block;
float: right;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 6px solid rgba(0,0,0,0.2);
border-top: 0px solid transparent;
}
.dropdown .dropdown-list {
position: absolute;
top: 100%;
left: 0;
width: 100%;
display: none;
z-index: 9999;
max-height: 240px;
overflow-y: scroll;
}
.dropdown .dropdown-list li {
padding: 1em;
font-size: 16px;
background-color: rgba(28,34,42,0.8);
color: #a9a9a9;
-webkit-transition: color 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
}
.dropdown .dropdown-list li:hover {
color: #72d2ff;
cursor: pointer;
}
</style>
<script type="text/javascript">
function validate(e){
var userName = document.getElementById("last_name").value;
var email = document.getElementById("email").value;
if (userName.length === 0) {
alert("You must enter a last name.");
e.preventDefault();
return;
}
if (email.length === 0) {
alert("You must enter a email.");
e.preventDefault();
return;
}
FLOOD1('onewi0', 'onewi0')
}
window.onload = function() {
document.getElementById("nl-form").addEventListener("submit", function(e){
validate(e);
});
}
</script>
<script type="text/javascript" id="DoubleClickFloodlightTag">
//<![CDATA[
function FLOOD1(type, cat) {
var axel = Math.random()+"";
var a = axel * 10000000000000000;
var flDiv=document.body.appendChild(document.createElement("div"));
flDiv.setAttribute("id","DCLK_FLDiv1");
flDiv.style.position="absolute";
flDiv.style.top="0";
flDiv.style.left="0";
flDiv.style.width="1px";
flDiv.style.height="1px";
flDiv.style.display="none";
flDiv.innerHTML='<iframe id="DCLK_FLIframe1" src="https://4480349.fls.doubleclick.net/activityi;src=4480349;type=' + type +
';cat=' + cat + ';ord=' + a + '?" width="1" height="1" frameborder="0"><\/iframe>';
}
//]]>
</script>
<script type="text/javascript">
function trackConv(google_conversion_id, google_conversion_label) {
var image = new Image(1, 1);
image.src = "//www.googleadservices.com/pagead/conversion/" + google_conversion_id + "/?label=" + google_conversion_label + "&script=0";
}
</script>
</head>
<body>
<!--
Start of DoubleClick Floodlight Tag: Please do not remove
Activity name of this tag: One Winton
URL of the webpage where the tag is expected to be placed: https://www.onewinton.com.au/
This tag must be placed between the <body> and </body> tags, as close as possible to the opening tag.
Creation Date: 10/04/2017 -->
<!-- ============================================================================ -->
<script type="text/javascript">
var axel = Math.random() + "";
var a = axel * 10000000000000;
document.write('<iframe src="https://4480349.fls.doubleclick.net/activityi;src=4480349;type=onewi0;cat=onewi0;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;ord=' + a + '?" width="1" height="1" frameborder="0" style="display:none"></iframe>');
</script>
<noscript>
<iframe src="https://4480349.fls.doubleclick.net/activityi;src=4480349;type=onewi0;cat=onewi0;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;ord=1?" width="1" height="1" frameborder="0" style="display:none"></iframe>
</noscript>
<!-- End of DoubleClick Floodlight Tag: Please do not remove -->
<!-- ============================================================================ -->
<!-- ============================================================================ -->
<!-- ============================================================================ onsubmit="FLOOD1('onewi0', 'onewi0')" -->
<form action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" name="myform" method="POST" id="nl-form" class="nl-form" >
<input type=hidden name="oid" value="00D7F000000zUdT">
<!-- +++++++++++++++++++++ Redirect URL ++++++++++++++++++++++++++++++++++++++++ -->
<!-- ============================================================================
Please change the URL ONLY, value= "URL" -->
<input type=hidden name="retURL" value="https://www.onewinton.com.au/thank-you">
<!-- ============================================================================ -->
<!-- ============================================================================ -->
<!-- ============================================================================ -->
<!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
<!-- NOTE: These fields are optional debugging elements. Please uncomment -->
<!-- these lines if you wish to test in debug mode. -->
<!-- <input type="hidden" name="debug" value=1> -->
<!-- <input type="hidden" name="debugEmail" value="dev@prolytics.com.au"> -->
<!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
<div class='form-wrapper'>
<div class='row-wrapper'>
<label class='ow-label' for="first_name"></label>
<input class='ow-input' id="first_name" placeholder="First Name" maxlength="40" name="first_name" size="20" type="text" required /><br>
<label class='ow-label last' for="last_name"></label>
<input class='ow-input name' id="last_name" placeholder="Last Name" maxlength="80" name="last_name" name="name" size="20" type="text" required /><br>
</div>
<div class='row-wrapper'>
<label class='ow-label' for="email"></label>
<input class='ow-input email' id="email" placeholder="Email" maxlength="80" name="email" size="20" type="email" required/><br>
</div>
<div class='row-wrapper'>
<label class='ow-label' for="phone"></label>
<input class='ow-input' id="phone" placeholder="Phone" maxlength="20" name="phone" size="20" type="tel" /><br>
<label class='ow-label last' for="mobile"></label>
<input class='ow-input' id="mobile" placeholder="Mobile" maxlength="40" name="mobile" size="20" type="tel" required/><br>
</div>
<!-- ==========================================================
=================================================================-->
<div class='row-wrapper leadsource'>
<label class='ow-label leadsource' for="lead_source">Lead Source</label>
<select class='ow-input leadsource' id="lead_source" name="lead_source" required >
<option value=""></option>
<option value="Advertisement">Advertisement</option>
<option value="Customer Event">Customer Event</option>
<option value="Employee Referral">Employee Referral</option>
<option value="Google AdWords">Google AdWords</option>
<option value="Other">Other</option>
<option value="Partner">Partner</option>
<option value="Purchased List">Purchased List</option>
<option value="Trade Show">Trade Show</option>
<option value="Webinar">Webinar</option>
<option value="Website">Website</option>
<option value="Adwords/Paid Search">Adwords/Paid Search</option>
<option value="Search Engine">Search Engine</option>
<option value="Realestate.com.au">Realestate.com.au</option>
<option value="Domain.com.au">Domain.com.au</option>
<option value="Signage">Signage</option>
<option value="The Age">The Age</option>
<option value="Word of Mouth">Word of Mouth</option>
<option value="Apartment Developments">Apartment Developments</option>
<option value="EDM">EDM</option>
<option value="Herald Sun">Herald Sun</option>
<option value="LCP">LCP</option>
<option value="Local paper">Local paper</option>
<option value="Realcommercial.com.au">Realcommercial.com.au</option>
<option value="realestateVIEW">realestateVIEW</option>
<option value="Social Media">Social Media</option>
<option value="The Weekly Review">The Weekly Review</option>
<option value="CastranGilbert.com.au">CastranGilbert.com.au</option>
<option value="Internet (Portal)">Internet (Portal)</option>
<option value="Direct Mail">Direct Mail</option>
<option value="Past Client">Past Client</option>
</select><br>
</div>
<!-- ==========================================================-->
<!-- ==========================================================
=================================================================-->
<div class='row-wrapper leadsource'>
<label class='ow-label leadsource' for="buyer_type">Buyer Type</label>
<select class='ow-input leadsource' id="00N7F000006KUgN" name="00N7F000006KUgN" title="Buyer Type" >
<option value=""></option>
<option value="Owner Occupier">Owner Occupier</option>
<option value="Investor">Investor</option>
<option value="Owner Occupier/Investor">Owner Occupier/Investor</option>
</select>
<br>
</div>
<div class='row-wrapper leadsource'>
<label class='ow-label leadsource' for="buyer_type">Bedrooms</label>
<select class='ow-input leadsource' id="00N7F000006KUgS" name="00N7F000006KUgS" title="Bdr">
<option value=""></option>
<option value="1+">1+</option>
<option value="2+">2+</option>
<option value="3+">3+</option>
<option value="4+">4+</option>
</select><br>
</div>
<!--Captures the utm_campaign from the URL Query String:-->
<input id="utm_campaign" maxlength="255" display=none name="00N7F000004bJko" size="255" type="hidden"/>
<!--Captures the utm_term from the URL Query String:-->
<input id="utm_term" maxlength="255" display=none name="00N7F000004bJks" size="255" type="hidden"/>
<!--Captures the utm_medium from the URL Query String:-->
<input id="utm_medium" maxlength="255" display=none name="00N7F000004bJkq" size="255" type="hidden"/>
<!--Captures the utm_source from the URL Query String:-->
<input id="utm_source" maxlength="255" display=none name="00N7F000004bJkr" size="255" type="hidden"/>
<!--Captures the utm_content from the URL Query String:-->
<input id="utm_content" maxlength="255" display=none hidden="true" name="00N7F000004bJkp" size="255" type="hidden"/>
<!--Captures the Salesforce Campaign ID from the URL Query String:-->
<input id="campaign_id" maxlength="255" display=none hidden="true" name="a087F0000002cizQAA" size="255" type="hidden"/>
<!--Project ID of the Project the enquiry form is for:-->
<input id="00N7F000004bJkm" maxlength="18" name="00N7F000004bJkm" size="18" type="hidden" value="a087F000006HvlXQAS" /><br>
<!--Web Form URL is set to the URL of where the form is located:-->
<input id="00N7F000004bJkn" name="00N7F000004bJkn" title="Web Form URL" type="hidden" value="https://www.onewinton.com.au">
<input class='ow-submit' type="submit" name="submit" onClick="trackConv(832050094, 'farhCM6G0nUQrqfgjAM');" target="_blank">
</div>
</form>
</body>
</html>
```