Integrating Typeform with hidden fields

Typeform allows you to use data that you already have, in this case the email address linked to a signed-in user's Zapnito account, and link this to specific responses using Hidden Fields. Here's a guide to show you how to set this up.

Create your Typeform

Once you have set up your Typeform to your requirements, navigate to 'Advanced' settings and select 'Hidden Fields'.

In this case we are extracting the user email address so you would input email as your hidden field. Once you have finished setting up your Typeform, make sure that you click the ‘Publish’ button in the top right corner of the page (under the Create tab).

Generate the embed code

Under the Share tab, you will find the option to ‘Embed in a web page’. Here you can select the embed mode that will suit your site best.

Once you have chosen your preferred layout option, click ‘Get the code’ to generate your personalised embed code.

Implement additional code to the Typeform

Now that the code is copied to your clipboard, paste it in the desired location within your site. This can be embedded in a number of different locations in Zapnito, including as a code snippet, within a post or on a page (note that it is only possible to collect email addresses as hidden fields in one Typeform embed instance per page on your Zapnito site).

You will notice that Typeform appends some additional text to the data-url within the embed code. This appears as highlighted in bold below:

data-url="https://form.typeform.com/to/your-id#email=xxxxx"

To ensure that the hidden fields are displayed properly in the Results tab, this text should be removed from the data-url before you continue.

At this stage, you will need to add some additional JavaScript to the code in order to extract the email address of a signed-in Zapnito user. This is as follows:

const zapnitoJsonMetaElement = document.querySelector('meta[name="zapnito:json"]');

const zapnitoObject = zapnitoJsonMetaElement &&
JSON.parse(zapnitoJsonMetaElement.getAttribute("content"));

const currentUserEmail = zapnitoObject.user && zapnitoObject.user.email;

const el = document.querySelector('.typeform-widget');

el.dataset.url = `${el.dataset.url}#email=${currentUserEmail}`;

This script needs to be inserted within the existing embed code provided by Typeform and should match the structure outlined below. Once you have implemented the additional code, ensure that you click ‘Save’ on the code snippet, post or page that you are working on.

<div class="typeform-widget" data-url="https://form.typeform.com/to/your-id" 
style="width: 100%; height: 500px;"></div>
<script>

 (function () {
   const zapnitoJsonMetaElement = document.querySelector('meta[name="zapnito:json"]');

   const zapnitoObject = zapnitoJsonMetaElement &&
   JSON.parse(zapnitoJsonMetaElement.getAttribute("content"));

   const currentUserEmail = zapnitoObject.user && zapnitoObject.user.email;

   const el = document.querySelector('.typeform-widget');

   el.dataset.url = `${el.dataset.url}#email=${currentUserEmail}`;

   var qs,js,q,s,d = document,gi = d.getElementById,ce = d.createElement,
     gt = d.getElementsByTagName,id = "typef_orm",
     b = "https://embed.typeform.com/";
   if (!gi.call(d, id)) {
     js = ce.call(d, "script");
     js.id = id;
     js.src = b + "embed.js";
     q = gt.call(d, "script")[0];
     q.parentNode.insertBefore(js, q);
   }
 })();
</script>

Test the hidden field

Now that the code is set up and ready to go, you will need to test out your Typeform to check that the user email address is being picked up as a hidden field.

Input a test submission, then navigate back to your Typeform and click the Results tab. Here you will find the Responses sub-heading which should display [1] to indicate a submission has been received.

If all is working correctly, Typeform will display both the respondent's answer to your question(s) and the email address linked to their Zapnito account, which can be seen below.

You can filter the results by question, submission time or download a CSV file of all responses.

And that’s it! You can now use the signed-in email address of Zapnito users as a unique identifier within Typeform.

If you have any queries or encounter any issues regarding this process, please contact support@zapnito.com or drop a comment below.