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. Article Contents Establishing Tracking with TypeForm Connecting Embedded Tracking TypeForm Forms Regarding Established URLs Creating Redirect Pages Mapping and Connecting Zaps in Zapier			Available with:
			Marketing Automation	✓
			CRM Ultimate	✓
			CRM PRO	✓
			CRM Free	✓
			Toolbar:
			Users:
			Administrators	✓
			Company Managers
			Marketing Managers
			Sales Managers
			Salespersons
			Jr. Salespersons

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 following is example code:
   

   <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 is example code:
   

   <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. The following is an example of embedded code:
   

   <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. The following is an example parameter:
   

   https://mycompany.typeform.com/to/Z5mdUO<br>

3. Remove the data-url section from the <div>. The following is an example of what this should appear as:
   

   <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. The following is example code:
   

   <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.