GoSquared Forms

Start using GoSquared Forms as the first step to turn visitors into customers. GoSquared Forms are simple lead gen forms that automatically push leads directly into People CRM.


Why use a GoSquared Form?

Capturing leads through a GoSquared Form has two huge benefits over traditional lead forms:

  1. Lead Analytics – GoSquared will automatically associate the visitor's past and future session activity with their lead profile. You can view everything they did before signing up and track if they come back in the future.
  2. Company and Social data enrichment – GoSquared will automatically enrich lead profiles with as much information as possible, such as their job title, avatar, company name etc.

Why can't I use my existing forms?

If you use an alternative form, it won't be integrated with GoSquared Analytics. This means you won’t be able to track any of the lead's session activity.

The recommended workflow is to first capture a lead though a GoSquared Form – then pass them from GoSquared into you email provider of choice (i.e. MailChimp, Drip, etc.).


How does Lead Analytics work?

GoSquared Analytics automatically tracks every anonymous visitor on your site. When a visitor submits their details through a GoSquared Form, we can associate all their past anonymous data with their new lead profile. This lets you know everything they did before signing up – including activity from previous sessions!

  • Which site originally referred them.
  • Which paid campaign originally drove them to your site.
  • The original landing page that the visitor arrived at.
  • How many visits a user made to your site before they converted.
  • What pieces of content or products a they've already viewed while on your site.


How to add a GoSquared Form to your site

Assuming you've already installed GoSquared Analytics, all you need to do is copy any paste our example code below. If you want to ask for less fields, just delete them from the code. However you must at least include an email field because GoSquared uses this to enrich their lead profile.

The example code below includes the following default fields:

  • email
  • first name
  • last name
  • phone number
  • company name
  • ​company position (job role)
  • company size
  • company industry
  • an example of adding a custom property

You can copy and paste this code on your site:

 

<div>

    <div style="font-family: 'Avenir Next',Avenir,'Helvetica Neue',Helvetica,Arial,sans-serif; color: #444F57; font-weight: normal; margin: 5% auto 15% auto; border-radius: 5px; width: 33%;">

<!-- Form Success Modal -->
        <div id="gsModal" class="modal" style="display:none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto;
        background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4);">

        <div class="modal-content" style="background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 25%;">

        <span class="close" style="color: #aaa; float: right; font-size: 28px; font-weight: bold;">&times;</span>

<!-- Form fubmission success message -->

        <p>Thanks! We've received your details</p>

    </div>

    </div>

    <div style="position:relative; float:right; bottom: 10px; color:black;"><span>*</span>indicates required </div>

      <form id="gsForm">

        <label style="color:white;"><b> Email </b> <span> * </span></label>

        <input type="email" placeholder="Enter email" name="email" style="width: 100%; padding: 12px 20px; margin: 8px 0; border: 1px solid #ccc; border-radius: 5px;required; box-sizing:border-box;">

        <label style="color:white;"><b> First Name </b></label>

        <input type="text" placeholder="Enter First Name" name="first_name" style="width: 100%; padding: 12px 20px; border: 1px solid #ccc; border-radius: 5px; box-sizing:border-box;">

        <label  style="color:white;"><b> Last Name </b></label>

        <input type="text" placeholder="Enter Last Name" name="last_name" style="width: 100%; padding: 12px 20px;  border: 1px solid #ccc; border-radius: 5px; box-sizing:border-box;">

        <label style="color:white;"><b> Phone </b></label>

        <input type="text" placeholder="Enter Phone Number" name="phone" style="width: 100%; padding: 12px 20px;  border: 1px solid #ccc; border-radius: 5px; box-sizing:border-box;">

        <label style="color:white;"><b> Company Name </b></label>

        <input type="text" placeholder="Enter Company Name" name="company_name" style="width: 100%; padding: 12px 20px;  border: 1px solid #ccc; border-radius: 5px; box-sizing:border-box;">

        <label  style="color:white;"><b> Company Size </b></label>

        <input type="text" placeholder="Enter Company Size" name="company_size" style="width: 100%; padding: 12px 20px;  border: 1px solid #ccc; border-radius: 5px; box-sizing:border-box;">

        <label style="color:white;"><b> Company Industry </b></label>

        <input type="text" placeholder="Enter Company Industry" name="company_industry" style="width: 100%; padding: 12px 20px; border: 1px solid #ccc; border-radius: 5px; box-sizing:border-box;">

        <label style="color:white;"><b> Company Position </b></label>

        <input type="text" placeholder="Enter Company Position" name="company_position" style="width: 100%; padding: 12px 20px; border: 1px solid #ccc; border-radius: 5px; box-sizing:border-box;">

        <label style="color:white;"><b>Custom Field </b></label>

        <input type="text" placeholder="Enter Custom field" name="new_custom_field" style="width: 100%; padding: 12px 20px; border: 1px solid #ccc; border-radius: 5px; box-sizing:border-box;">

        <button type="submit" style="background-color: #0095FF; color: white; padding: 12px 20px; margin: 20px 0; border: none; cursor: pointer; width: 100%; border-radius: 5px; box-sizing:border-box;"> Submit </button>

      </form>
    </div>
</div>

<script>
//Add GoSquared submit event to form
var myForm = document.getElementById("gsForm");
myForm.addEventListener('submit', function(e) {
  if (!_gs.v ) {
    return;
  }
goSquaredIdentify();
e.preventDefault();
successModal()
});


//Success Modal
var modal = document.getElementById('gsModal');
var span = document.getElementsByClassName("close")[0];
var successModal = function () {
modal.style.display = "block";
}
span.onclick = function() {
    modal.style.display = "none";
}
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

//GoSquared Identify Function
var goSquaredIdentify = function (){

function gsID() {
  var length = 16;
  var id = '';
  for (; length--;) {
    id += (0 | Math.random() * 16).toString(16);
  }
  return id;
}

var properties = {
  custom : {}
}

var standard_properties= ['id', 'first_name','last_name','email','username','description','avatar','phone',
  'created_at','company_name','company_size','company_industry','company_position']

var elements = myForm.querySelectorAll('input');

for (i=0; i < elements.length; i++){
  if ( elements[i].type != "text" && elements[i].type != "email") { continue; }
    if (elements[i].name == "" || elements[i].value == "") {
      continue;
    }
    if (standard_properties.indexOf(elements[i].name) >= 0) {
      properties[elements[i].name]=elements[i].value
    } else {
      properties.custom[elements[i].name]=elements[i].value
    }
}
properties['id']=gsID()
_gs('identify', properties)
}

</script>

 

Did you find this article helpful?