Прожектор запускается при загрузке страницы, а не при отправке формы
Я внедряю пользовательскую форму в сайт Wix, но Floodlight запускается при загрузке страницы, а не при отправке формы. Кто-нибудь знает, почему это происходит? Wix использует Iframe для размещения веб-страницы /html на сайте, это может быть проблемой?
Форма OW
<!-- ---------------------------------------------------------------------- -->
<!-- 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>
и теги как можно ближе к открывающему тегу. Дата создания: 04.10.2017 -> var axel = Math.random() + ""; var a = axel * 10000000000000; document.write('');
<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>