Embedded JSON Tutorial: How to show the most relevant response at the top
Imagine that you a website with a number of service pages that also get traffic. For example, think about a pest control site with pages like, "Termite inspection, rodent control, bed bug control, etc..)
One way to boost conversions with LeadForms is to show the most relevant response at the top of the form. So for example, if your pest control site has a Termite Inspection page, then you might want to show "Termite Inspection" at the very top of the list.
There are two ways to do this:
1) Create a new LeadForm for each service page
2) Override the form programmatically using a script (embedded JSON)
The benefit of option #2, is that you won't have to create multiple forms. The script will automatically adjust the responses for you. Allowing you to continue to work from one form.
For this tutorial, we'll walk through option #2 - JSON.
In the example below, we're going to make a couple of updates to the landing page so the LeadForm automatically shows the most relevant answer as the top, in this case it will be Termite Inspection.
Notice that the first response is "Pest & Insect Control"
By the end of this tutorial, the first response will be "Termite Inspection"
Step #1:
To override the step responses, you will just need to make some updates to this script, place it before the closing tag.
<script type="application/json" id="leadFormEmbeddedParams">
{
"steps": {
<b> "Your step name": {</b>
"answerOptions": [
<b>"Response 1",</b>
"Response 2",
"Response 3"
]
}
}
}
</script>
You will need to replace the items in bold: step names and response names. Which you can get inside of the LeadForm Builder.
Step #2:
-
Login to your LeadForms dashboard, access your form, and go to "Add to Site"
-
Within the "Add to Site" section, scroll down and click on the "generate embedded JSON settings"
After you click on "generate embedded JSON settings" you should see a bunch of code like in the image below:
The embedded JSON allows you to override almost every element of your form at the page level. This may seem like an overwhelming amount of code, but don't worry. You will only need to copy a small section of this code block to accomplish what we are trying to do here.
Step #3:
Since we're looking to adjust the services step in this example, scroll down to the section labeled service type. Important note: The code that you see will look a bit different for you, depending upon how you setup and named the steps and responses in your form.
You will just need to add the step name and the responses to the script that we provided in step #1. so the script may end up looking something like this:
<script type="application/json" id="leadFormEmbeddedParams">
{
"steps": {
<b> "</b>service type"<b>": {</b>
"answerOptions": [
"Pest & Insect Control",
"Bee & Wasp Control",
"Termite Inspection",
"Mosquito Control",
"Flea & Tick Control",
"Rodent Control"
]
}
}
}
</script>
Now we just need to adjust the order of the responses. We will move Termite Inspection up to the top. So the script now looks like this:
<script type="application/json" id="leadFormEmbeddedParams">
{
"steps": {
<b> "</b>service type"<b>": {</b>
"answerOptions": [
"Termite Inspection",
"Pest & Insect Control",
"Bee & Wasp Control",
"Mosquito Control",
"Flea & Tick Control",
"Rodent Control"
]
}
}
}
</script>
Step #4:
Go back to your site and paste the script before the closing tag. Here's how it looks in my wordpress instance.
Step #5:
Publish your code and reload the page.
As you can see, Termite Inspection is now at the top.
Repeat this process for any page that you'd like to override.