Pushing Convert Experiences Data to Formstack Submissions

Formstack is an advanced form builder service that enables you to create and embed custom forms on your website with little or no technical experience.

This quick guide will walk you through how to send Convert Experiences Project and Variation data along with visitor submissions using hidden fields and more.

Step 1: Create Your Form Fields 

Create a new form in Formstack: Create the field(s) you want to use to send the Convert Experiences data, and set it as hidden. This could be CE project data, variation, goal or experiment data.




Setting hidden allows you to pass data through the submission without the visitor seeing or being confused by it.


Step 2: Embed the Form in Your Website

This integration only works with the Embed Form option. Convert Experiences can’t be embedded into URL Links pages so we’ll avoid using that for now. For more advanced users, any embed method that parses the HTML form in the same page that has the Convert Experiences project code can be made to work as well.

For simplicity sake, we’ll stick with the embed form for this guide.

 

 

Copy and paste that code into the HTML of the page on your website where you want the form to show.


Step 3: Embed the Integration Script


In order to populate the form fields we’ll need to
add this script to the bottom of the page before </body>, after all other scripts:



<script>
// Update this to your own settings

 var formstackSetFields = {

   "Experiment Variation": convert.currentData.experiments[10007967].variation_name,

 };

 

 // Don’t edit this code below

 (function customFormstackCEVars() {

   var arrFields = function settingsToArray() {

     var fields = [];

     

     for(var label in formstackSetFields) {

       fields.push({

         label: label.toLowerCase(),

         value: formstackSetFields[label]

       });

     }

     

     return fields;

   }();

   

   var labels = {};

   

   $(".fsPage label").each(function() {

     var elm = $(this);

     var label = elm.text().trim().toLowerCase();

     

     labels[label] = elm.attr("id").replace("label", "field");

   });

   

   var populateFields = function populateFields() {

     arrFields.forEach(function(field) {

       var label = field.label;

       var loaded = labels[label] && ($("#" + labels[label]).length !== 0);

       

       if(loaded) {

         $("#" + labels[label]).val(field.value);

       } else {

         console.error("Custom Fieldstack CE: Field " + label + " does not exist.");

       }

     });

   };

   

   populateFields();

 }());
</script>


To set the field value of the hidden field you added to your form, add the label text in the formstackSetFields Javascript object. It will look like this:

 

var formstackSetFields = {
	“My Label”: “Custom Value”
};

 

So if you want to add the variation name, as I have done here, setting the name of your label as the object key. Using Convert’s Javascript Experiment Data, we point to the value we want to pass to the label:

 


var formstackSetFields = {
  "Experiment Variation": convert.currentData.experiments[YOUR_EXPERIMENT_ID_HERE].variation_name,
  };

 

Replace YOUR_EXPERIMENT_ID_HERE with your experiment ID which can be found in the URL(going to Experiments in your Convert Experiences Account and clicking on an Experiment):

 

 

 

For example, my experiment ID in this case is the last number in the URL (the number after experiments_report/)

 

So now my field labelled “Experiment Variation” will have the variation name which, when submitted, shows up in my Formstack submissions.

 

Submit the form to test it out:



After submitting your form. Go to submissions in Formstack:



And make sure your hidden variable is not empty:



As I can see, my hidden field was passed “Variation 2”, the name of my CE Experiment Variation that was triggered when I submitted the form.

 

Step 4: Debugging

 

Fields not being populated

To make sure the labels you specified in the formstackSetFields were typed correctly and found by the Javascript, open up your browser console. If there was an error, you will see something like this:

I added “x” as a field label but since it doesn’t exist in my form, it’s gave me this error.

 

 

Project settings required to make the integration work

If you get an error that JQuery is not found or you can’t get variation, goal or experiment names, it’s most likely that you need to turn off “Data Anonymization” and “Do Not Include JQuery” switches in your project settings.

Have more questions? Submit a request

Comments