Connecting TypeForm Forms

Due to the way that TypeForm forms are created and processed, SharpSpring is unable to capture them as form captures. Connecting TypeForm forms to SharpSpring allows you to establish tracking. This article will detail how to connect TypeForm forms.

The following user roles can connect TypeForm forms:

• Administrators

Article Contents

• Regarding TypeForms and Form Fill Events
• Establishing Tracking with TypeForm
• Connecting Embedded Tracking TypeForm Forms
• Regarding Established URLs
• Creating Redirect Pages
• Mapping and Connecting Zaps in Zapier
• Ready to Learn More? 

Regarding TypeForms and Form Fill Events

The main difference between TypeForm forms and a form fill event is that TypeForm forms will not leave a record on the Life of the Lead, and any associated automations would need to be triggered by a field changing rather than by way of a form fill event. 

Establishing Tracking with TypeForm

To establish tracking with a TypeForm form, do the following:

1. Create a hidden field in TypeForm.
2. Name the hidden field as TrackingID.
3. Connect a TypeForm form that is linked (but not embedded) with tracking.
   
   The link on your site that leads to your Typeform form should look something like this:
   <a target="_blank" href="https://mycompany.typeform.com/to/H6ptOZ">Text shown for link here.</a>
4. Give the <a> tag an ID.
   
   The following example has the tag ID listed as typeform-link. 

   <a target="_blank" id="typeform-link" href="https://mycompany.typeform.com/to/H6ptOZ">Text shown for link here.</a>

5. Add the following code to the page just above the form, or anywhere beneath the SharpSpring site tracking code: 

<script type="text/javascript"> var callThisOnReturn = function(resp) { if (resp) { document.getElementById('#typeform-link').setAttribute('href','https://mycompany.typeform.com/to/H6ptOZ?trackingID=' + 'resp.TrackingID'); console.log('set'); } }; _ss.push(['_setResponseCallback', callThisOnReturn]); </script>

If your TypeForm code does not appear similar to the example code, or if you are tracking multiple TypeForm forms on the same page, contact SharpSpring support for assistance.

Connecting Embedded Tracking TypeForm Forms

Embedded TypeForm forms show that the URL in the browser remains your domain while the form is being filled out. Embedded TypeForm forms require the SharpSpring tracking code on the page as well. To connect embedded TypeForm Forms, do the following:

1. Procure the embedded code.
   
   Example code is as follows:

   <div class="typeform-widget" data-url="https://mycompany.typeform.com/to/Z5mdUO?typeform-welcome=0" data-transparency="50" data-hide-headers=true style="width: 100%; height: 500px;"></div><script>(function(){var qs,js,q,s,d=document,gi=d.getElementById,ce=d.createElement,gt=d.getElementsByTagName,id="typef_orm",b="https://s3-eu-west-1.amazonaws.com/share.typeform.com/";if(!gi.call(d,id)){js=ce.call(d,"script");js.id=id;js.src=b+"widget.js";q=gt.call(d,"script")[0];q.parentNode.insertBefore(js,q)}})()</script>

2. Copy and retain the data-url parameter’s URL.
   
   In the example code, this URL is as follows:
   https://mycompany.typeform.com/to/Z5mdUO
   
   
3. Remove the data-url section from the <div>.
   
   The <div> should appear similar to the following example code: 

   <div class="typeform-widget" data-transparency="50" data-hide-headers=true style="width: 100%; height: 500px;"></div>

4. Paste the following script after the <div> code.
   

   <script type="text/javascript"> var callThisOnReturn = function(resp) { if (resp) { // In the line below, the URL should be the data-url from above, plus ‘?TrackingID=’ document.getElementsByClassName('typeform-widget')[0].setAttribute('data-url','https://mycompany.typeform.com/to/Z5mdUO?TrackingID=' + 'resp.trackingID'); } else { // In the line below, the URL should be the data-url from above with no changes document.getElementsByClassName('typeform-widget')[0].setAttribute('data-url','https://franchiselens.typeform.com/to/Z5mdUO’); } (function(){var qs,js,q,s,d=document,gi=d.getElementById,ce=d.createElement,gt=d.getElementsByTagName,id="typef_orm",b="https://s3-eu-west-1.amazonaws.com/share.typeform.com/";if(!gi.call(d,id)){js=ce.call(d,"script");js.id=id;js.src=b+"widget.js";q=gt.call(d,"script")[0];q.parentNode.insertBefore(js,q)}})(); }; _ss.push(['_setResponseCallback', callThisOnReturn]); </script>

5. Paste the retained data-url URL in the appropriate section of the code.

If your TypeForm code does not appear similar to the example code, or if you are tracking multiple TypeForm forms on the same page, contact SharpSpring support for assistance.

Regarding Established URLs

If your URL already is already established and followed by data, change the URL in the code  by appending an ampersand and the TrackingID to the end of the URL.

Consider the following example URL:

https://mycompany.typeform.com/to/H6ptOZ?typeform-welcome=0

As ?typeform-welcome=0 follows the URL, the following line of code would be changed:

document.getElementById('#typeform-link').setAttribute('href','https://mycompany.typeform.com/to/H6ptOZ?trackingID=' + 'resp.TrackingID');  
That code would be changed to appear as follows:

document.getElementById('#typeform-link').setAttribute('href','https://mycompany.typeform.com/to/H6ptOZ?typeform-welcome=0&TrackingID=' + 'resp.TrackingID'); <br>

If your TypeForm code does not appear similar to the example code, or if you are tracking multiple TypeForm forms on the same page, contact SharpSpring support for assistance.

Creating Redirect Pages

There are ways to establish tracking on a non-embedded TypeForm form. To link to a TypeForm form which is not embedded on your own page externally (such as a comment on another page, a Facebook post, or a Twitter link), you can still establish tracking by setting up a redirect page. To do so, do the following:

1. Create a page on your own domain that contains the SharpSpring tracking code and the code to append the tracking cookie.
2. Add the page to the TypeForm code.
   
   Using the same example form from above, the code would look like this:

   <script type="text/javascript"> var callThisOnReturn = function(resp) { if (resp) { window.location = 'https://mycompany.typeform.com/to/H6ptOZ?trackingID=' + 'resp.TrackingID'; } }; _ss.push(['_setResponseCallback', callThisOnReturn]); </script>

3. Share the URL of the created page you created anywhere that links to the form from a page that is unable to be tracked in SharpSpring. 

Mapping and Connecting Zaps in Zapier

Once a form is established, set up a Zap in Zapier. When mapping the fields to SharpSpring, map the one called TrackingID to SharpSpring’s Tracking ID field.

After the Zap is set up and the form is filled out, the contact should have a tracked device under their Memberships tab. This will also pull in their previous site visit data as any normal form fill would.

When using Zapier, you can create and update leads, as well as establish tracking. That said, if you do not need to establish tracking, set up a Zap in Zapier. That way, a TypeForm form fill triggers a Create/Update Lead action in SharpSpring.

Ready to Learn More?

• Zapier Integration Overview
• Integrating Gravity Forms
• Integrating PieSync