Form website personalization

Form website personalization


If you haven't been able to identify the web visitor via utm_hyperef parameters from your campaigns, or reverse IP lookups, or with a cookie from a prior session, your next best option is to ask the visitor for some information and then personalising based on that input.


Of course there are many ways ask a user for information, such as chatbots (see our Landbot guide if that's your bag), but for this example lets keep it simple with a form.




To pass collected data to Hyperise, to enable enrichment and personalisation, simply use the following Javascript call in your form or web calls, passing the collected data:



hyperise.personalize({email: ''});



Simply replace the email value with the input field ID. In the above GIF example we have a simple form, an input field called email and a button to trigger the form.  Finally we see in the form action the Javascript call to Hyperise, sending the email value direct from the input form.



<form action="javascript:hyperise.personalize({email: document.getElementById('email').value});" method="POST" >
  <input type="email" value="" name="email" id="email"  placeholder="email address" >
  <button >See Personalisation Demo</button>
</form>



You can pass any collected data; the example above is passing an email to Hyperise, the example below is passing the first name:



hyperise.personalize({first_name: document.getElementById('fname').value});



You can also pass multiple values, by using commas to separate each name: value pair:



hyperise.personalize({first_name: '', website: '', email: ''});



You can reset any personation in the users session by triggering the following Javascript command:



hyperise.revert();


You can also add a listener event, to attach to an existing form, that will uninterrupted the core form function.  Adding the following javascript snippet to your page will enable Hyperise to attach to the form:


<script>
document.querySelector("#myForm").addEventListener("submit", function(e){
    hyperise.personalize({
      email: document.getElementById('email').value , 
      first_name: document.getElementById('fname').value , 
      last_name: document.getElementById('lname').value , 
    });
})
</script>


Remember to change the myForm  and the email  ,  fname ,  lname input field IDs, to the actual values from your form.