How to merge field information in Zoho Forms

How to merge field information after Zoho Form submitted

1/2/2020

The above question came through today. We hope we provide a helpful answer. Our goal is to help as many of you as possible feel more empowered with the Zoho platform.

If you were not aware, Zoho Forms allows you to direct the person that submits information in a form to a landing page you choose. That is nice. What is even nicer, is it allows you to send information that was entered into the form to the landing page. In this video we answer the question by showing how you can set this up with Zoho Forms, a website and some basic Javascript.

We simply implemented the 'redirect' setting within Zoho Form and included a few parameters when sending it to the thank you web page.

Click below to watch the answer demonstrated like you're looking over our shoulder:

Good news is you do not have to know how to type the code "www.pool-spa.zohosites.com/thank-you?i=${zf:UniqueId}&s=${zf:Address.AddressLine1}&c=${zf:Address.City}&st=${zf:Address.Region}&z=${zf:Address.ZipCode}".

Just click the little pencil next to it and you'll see the following:

Then its just a matter of selecting the fields you want to include from the form in the dropdowns on the right side. The left side lists the "parameters" you use in the web address.

Once someone completes the form you would see a web address like this:

http://pool-spa.zohosites.com/thank-you?i=R-52648919&s=123+Main+St&c=Anaheim&st=CA&z=92802

You then use that to pull in the "parameters" to the web page. Below you will find the javascript used in the video to pull in the information.

go to zocademy to learn more

The Javascript used in the video:

<script>
function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);

}
function myFunction()
{
var thez = getQueryVariable("i");
document.getElementById("id").innerHTML = thez.toString();

var thestreet = getQueryVariable("s");
document.getElementById("street").innerHTML = thestreet.toString().replace(/\+/g," ");

var thecity = getQueryVariable("c");
var thestate = getQueryVariable("st");
var thezip = getQueryVariable("z");
var thereplacedcity = thecity.toString().replace(/\+/g," ");
var thecitystatezip = thereplacedcity.concat(", ",thestate," ",thezip);
document.getElementById("city").innerHTML = thecitystatezip;
}
</script>
<body onLoad="myFunction()">
<div style="text-align:center">
<div style="display:inline-block;width:300px">
<div style="padding:10px;font-size:2em;margin-top:20px;text-align:center">
Personal ID
</div>

<div style="font-size:2em;color:green;font-weight:bold;line-height:1.25em;text-align:center" id="id">
</div>
</div>
<div style="display:inline-block;width:300px">
<div style="font-size:2em;margin-top:20px;text-align:center">
Address
</div>
<div>
<div style="font-size:1.5em;color:green;font-weight:bold;line-height:1.5em;text-align:center" id="street"></div>
<div style="font-size:1.5em;color:green;font-weight:bold;line-height:1.5em;text-align:center" id="city">
</div>
</div>
</div>
</div>

Go to Zocademy for more

Comments

News, Features and Tutorials

How to merge field information after Zoho Form submitted

The Javascript used in the video:

Archives

Categories