Hi
In my custom form with 4 fields, I was wondering how to track for browse and cart abandonment in klaviyo?
Here is the form:
<html>
<head>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-KJ4QK9N');</script>
<!-- End Google Tag Manager -->
<style>
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
</style>
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name='viewport' content='width=device-width,initial-scale=1' />
<meta name='description' content='Love Art? if yes, visit ECOVIB2D (https://ecovib2d.com.au/workfromhome/yourart/yourart.php) to be entertained ! '>
<link rel="icon"
type="image/jpg"
href="logo.jpg">
<?php
$graphic = $_POST['Graphic'];
$Price = $_POST['Price'];
$person = $_POST['Person'];
if (isset($graphic,$Price,$person)){
$graphic=$_POST['Graphic'];
$Price = $_POST['Price'];
$person = $_POST['Person'];
}
?>
<title>Order Form for <?php echo $_POST['Graphic']; ?></title>
<script>
function setvar(){
document.getElementById('paypal').innerHTML ="Your name and email address will not be sold or traded. Your data will be used for product development only. You, the user, can give consent (or otherwise) for your data to used by another third party for processing. It will not be sold or traded. Contact the data controller on ecovib2d@live.com to give consent or otherwise on the use of your data.";
var x = document.getElementById('Title');
x.style.color = '#000000';
x.style.fontSize ='36px';
var t = document.getElementById('paypal');
t.style.color = '#000000';
t.style.fontSize ='24px';
};
</script>
</head>
<body onload="setvar();" style='background-color: #FFFFFF;'>
<script> (function(){ var s = document.createElement('script'); var h = document.querySelector('head') || document.body; s.src = 'https://acsbapp.com/apps/app/dist/js/app.js'; s.async = true; s.onload = function(){ acsbJS.init({ statementLink : '', footerHtml : '', hideMobile : false, hideTrigger : false, disableBgProcess : false, language : 'en', position : 'right', leadColor : '#146FF8', triggerColor : '#146FF8', triggerRadius : '50%', triggerPositionX : 'right', triggerPositionY : 'bottom', triggerIcon : 'people', triggerSize : 'bottom', triggerOffsetX : 20, triggerOffsetY : 20, mobile : { triggerSize : 'small', triggerPositionX : 'right', triggerPositionY : 'bottom', triggerOffsetX : 20, triggerOffsetY : 20, triggerRadius : '20' } }); }; h.appendChild(s); })();</script>
<table class='div' align='center' border='0'>
<tbody>
<tr>
<td bgcolor='#660000'><a href='https://ecovib2d.com.au/index.php'><img height='auto' src='logo.jpg' width='auto' alt='logo tree'/></a></td>
<td><p align='center' id ='Title'>ECOVIB2D©</p></td>
</tr>
</tbody>
</table>
<center>
<h1> Order form for <?php echo $_POST['Graphic']; ?> at (AUD) $ <?php echo $_POST['Price']; ?> </h1>
<br>
<script type="text/javascript">
function validateForm() {
var age = document.forms["Form"]["Age"].value;
if (age == "") {
alert("Your Age for privacy purposes must be filled out");
return false;
}
var fname = document.forms["Form"]["FirstName"].value;
if (fname == "") {
alert("Firstname must be filled out");
return false;
}
var sname = document.forms["Form"]["LastName"].value;
if (sname == "") {
alert("Surname must be filled out");
return false;
}
var email = document.forms["Form"]["EmailAddress"].value;
if (email == "") {
alert("Email must be filled out and in the correct format");
return false;
}
};
</script>
<form action='process_doubleoptin.php' id='Form1' name='Form' autocomplete ='on' onSubmit = 'return validateForm()' method="POST" >
<input type='hidden' id = 'Cost' name='Price' value='<?php echo $Price; ?>' />
<input type='hidden' id = 'pic' name='Graphic' value='<?php echo $graphic; ?>' />
<input type='hidden' id = 'person' name='Person' value='<?php echo $person; ?>' />
<label for='Age_of_Subscriber'>Please enter your Age (in years - Privacy purposes - Must be 16 years old or over): </label>
<input type='number' id= 'AGE1' name='Age' placeholder='Enter your Age' />
<br>
<br>
<label for='First_Name2'>Please enter your First Name:</label>
<input type='text' id='FName' name='FirstName' placeholder='Enter your Firstname' />
<br>
<br>
<label for='Last_Name2'>Please enter your Last Name:</label>
<input type='text' id='SName' name='LastName' placeholder = 'Enter your Surname' />
<br>
<br>
<br>
<label for='email2'>Please enter your Email Address in the following format: example@domain.com </label>
<input type='email' id='Email' name='EmailAddress' placeholder ='Your Email Address' />
<br>
<br>
<p>
View our Terms of Service (https://ecovib2d.com.au/workfromhome/TOC/website_terms_and_conditions_of_use.docx) and
Privacy Policy (https://ecovib2d.com.au/workfromhome/privacy/privacypolicy.php).</p>
<br>
<br>
<input type='submit' id='submit' name="submit_form" value ='Buy your ART- <?php echo $_POST['Graphic']; ?> with PayPal' />
</form>
<br>
<br>
<p id='paypal'></p>
</center>
</body>
</html>
