Note: This A/B testing use case is somewhat advanced use of FormAssembly. If you’re not comfortable editing custom code, you might want to build up those skills before attempting this tutorial. Here is some information from our documentation to get you started. Please note that our Success Team does not support custom code help, however we do work with a number of partners who may be able to assist you, please email us at partners@formassemblycom to learn more.
Have you ever needed to A/B test your forms to find out whether one version works better than another? Read on to find out how you can accomplish your A/B testing goals with FormAssembly! Below, find the step-by-step walkthrough.
Creating Your Form
We are going to create a simple stay in touch form with a little twist to demonstrate this A/B testing use case. The purpose of this test is to see whether the respondent is more likely to complete the response with the logo on the form or without it. To start, recreate the following form.
We are going to use a field called “Form Type” to determine whether to show or hide the logo, using JavaScript. Don’t forget to make this field hidden!
Before we can do that, we need to add the logo to the form. To do this, add a Text element, press on HTML, and paste the following. You’ll need to change the source to your logo.
<img src=”https://yoursite.com/logo.png” style=”display: none;”>
Adding Your Custom Code
The custom code below will generate a random number. Based on that number, the Form Type will populate Option A or Option B and will also hide or show the logo.
<script src="https://code.jquery.com/jquery-3.2.0.min.js" integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I=" crossorigin="anonymous"> </script> <script> $(document).ready(function(){ const formVersion = Math.round(Math.random()) === 0? 'Option A' : 'Option B'; if (formVersion === 'Option A') { $('#tfa_X').val('Option A'); } else { $('#tfa_X').val('Option B'); $('.htmlContent > img').css( "display", "block" ) } }); </script>Replace tfa_X with the id of the Form Type field you created.
A/B Testing Use Case Results
That’s it! Now you have two different versions of the form that you can compare by filtering out the responses down to one option.
