Create Sales Leads automatically from the contact form on your website

Haylee Benton Updated by Haylee Benton

This time saving integration will automatically create a new sales lead inside your shopVOX account anytime someone submits the form

Ever get tired of manually entering your leads into shopVOX? 

This integration is for you. By automatically creating a Sales Lead when your lead or prospects submits a form on your site - you'll save a ton of time and reduce mistakes.

Here's how to implement it.

How to add to your Wordpress Website

Here are the steps involved.

  1. Create a contact form page to embed the code
  2. Create a thank you / submission page
  3. Copy / paste the HTML code from this article
  4. Update the "on_success" url to your thank you page url
  5. Update the "pipeline_name" to match your Pipeline from your shopVOX account
  6. Copy / paste the Javascript code from this article
  7. Find your "authToken" and "accountId" from your shopVOX account
  8. Update those values in the Javascript code
  9. Update the page and test!

Step by Step Instructions

In this file there are two main sections of the code, one is the actual form with text fields etc., and second, is the java script code that processes this information.

The html form code is this part.  Copy everything from below to create your sample form for your end customers to enter the data in a form.  Remember this is just a sample, and hence it has only 4 fields, if you want to collect more data then use the API above to see what all info you can push to shopVOX Sales leads and modify your form to have all those fields. If someone in your company understands how to modify this html code, go ahead and make it the way you want it, this is just an example. Optionally, you can skip most of these instructions and get this code straight from your account by going to the Setup Wizard > Advanced button. The code on your account with have the correct AuthToken and accountID, so it is ready to go to add to your website. Unless you would like to modify of course, do that first.

NOTE: Below are sample code snippets. You will need to modify these first before using. See the instructions below.

Form Code Sample (HTML)

<form id="contactForm">
<input type="hidden" name="on_success" id="on_success" value="http://www.shopvox.com">
<input type="hidden" name="pipeline_name" id="pipeline_name" value="Sales Pipeline">
<input type="hidden" name="title" id="title" value="New lead from website">
<input type="hidden" name="lead_source_name" id="lead_source" value="Website Contact Form">
              
<div class="form-group">
  <label for="name">Your Name</label>
  <input type="text" name="primaryContactName" class="form-control" id="primary_contact_name" placeholder="Name">
</div>
<div class="form-group">
  <label for="name">Phone</label>

  <input type="tel" name="phone_number" id="primaryPhone" class="form-control" placeholder="(xxx) xxx-xxxx">
</div>
<div class="form-group">
   <label for="name">Company Name</label>
   <input type="text" name="company_name" class="form-control" id="company_name" placeholder="Company Name">
</div>
<div class="form-group">
   <label for="email">Your Email address</label>
   <input type="email" name="email" class="form-control" id="email" placeholder="Email">
</div>
<div class="form-group">
  <label for="details">Questions or Comments</label>
  <textarea class="form-control" name="details" id="details" rows="3" placeholder="Please enter your questions or comments"></textarea>
</div>
<div class="form-group">
   <label for="asset">Asset</label>
   <input type="file" name="asset" id="asset"></input>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

The above code creates a form that looks similar to this.

Now in the above code there are two lines you should replace with appropriate info to fit the needs of your shop.

<input type="hidden" name="on_success" id="on_success" value="http://www.shopvox.com">

The purpose of the above line is after the data is posted to QB to which URL you want to re-direct the customer.  Put that URL in the place of "http://www.shopvox.com", This could be the URL of your website or your facebook page or what ever web page you want to direct your customer to.          

<input type="hidden" name="pipeline_name" id="pipeline_name" value="Sales Pipeline">

The purpose of the above line is tell shopVOX which "Pipe Line" to use for this sales lead.  Please make sure the name of the pipeline matches with the pipelines you have created in shopVOX and you will find them here. So, in the above code, replace the value which means replacing "Sales Pipeline" with the name of your pipeline. If you need a reminder of what your Pipeline name is, you can find it by following the sequence in this image:

So that those two pieces of data should be modified, and particularly, the pipeline name should match exactly what is in your shopVOX

Javascript Code Sample

The java script code is this part of the code.  What this does is, this basically calls shopVOX to pose the above data to the sales leads.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    
    <script>
    $(function() {
      var authToken = "Insert your authToken here";
      var accountId = "Insert your accountId here";
      
      $("#contactForm").submit(function(e) {
        e.preventDefault();
        var successUrl = $("#contactForm #on_success").attr("value")
        var actionUrl = "https://api.shopvox.com/v1/sales_leads.json?authToken="+authToken+"&account_id="+accountId;
        $.ajax({
          url: actionUrl,
          type: "post",
          dataType: "json",
          processData: false,
          contentType: false,
          data: new FormData($("#contactForm")[0]),
          success: function(data) {
            console.log(data);
            if (successUrl) {
              window.location = successUrl;
            }
          },
          error: function(xhr, status, error) {
            alert(error);
            console.log(xhr, status, error);
          }
        });
      });
    });
    </script>

Just like in the form code in the java script also you need to set two pieces of information from your account and these two lines are

var authToken = "AUTH_TOKEN" and var accountId = "ACCOUNT_ID"

The above token is to tell shopVOX whose credentials to use to post to shopVOX.  And each user in shopVOX will have a "Auth_Token" and you can find it in the User settings here.

The following is how to get to the user settings.

And when you go to that User settings you will see their credentials and also the account ID, both of these pieces of info is needed and will replace the two tags shown (highlighted).

That's it!

  • You can add these two pieces of code to your contact form web page and then test it out to see if the info from the contact form shows up as a sales lead in shopVOX
  • Make sure you add some captcha or some other form of security to make sure bots don't enter bad data to your account.

If you have any questions, chat with us online or send an email to support@shopvox.com.

FAQs

How can I add another field to this contact form?

If you know HTML and Javascript, you could add as many fields as you like to this form. You'll need to ensure they map to the correct fields inside our Sales Lead API. 

If you're not 100% comfortable with HTML and Javascript code - we'd absolutely recommend you hire a web developer to help you with this. 

While we'll try to help you solve any issues, we're not liable for any issues or trouble caused by an improperly setup integration.

How helpful was this doc?

Sales Leads Guide

How do I add a Quote from a Sales Lead?

Contact