Communication between embedded typeforms | Community
Skip to main content
Answered

Communication between embedded typeforms

  • September 13, 2023
  • 9 replies
  • 168 views
S

Hi. I would like to pass data between multiple embedded forms through hidden fields in WebFlow. 

We’ve created a multiform questionnaire that communicates from one section to the other with hidden fields. This works well if the forms are typeform links, since the hidden fields are added to the slug, but this breaks down when we want to embed those forms on website pages (in our case webflow).Is there a way to pass hidden fields, from one form embedded on one page, to another form embedded on a different page? 

Best answer by mathio-tf

If you were to use single typeform, it can autosave progress and preserve their answers even when they leave the form.

If you want to split the user journey between multiple typeforms you will need to take care of preserving their session yourself. If the data is not sensitive, the simplest solution might be saving the data in a cookie. Each page with a typeform could save the data from query parameters info a cookie. When users returns to the page later, it could load the data from cookie as a fallback solution when query parameters are not available. You will need to pass those values to embedded form via embed SDK yourself.

 

User journey:

  • page1
    • form 1 will redirect to page 2 and pass hidden fields as query string params
  • page 2
    • custom JavaScript will load the values from query string
    • store the values in cookies
    • pass those values as hidden fields to form 2
    • display form 2
    • form 2 will redirect to page 3 and pass hidden fields as query string params
  • page 3
    • same as page 2...

If user returns to a page later, eg page 2:

  • custom JavaScript will try to read the values from query string (but it will be empty)
  • read the values from cookies instead
  • pass those values as hidden fields to form 2
  • display form 2
  • …

 

The JavaScript code could look like this:

function getHiddenFields() {
  let { search } = window.location;
  if (search) {
    // loading values from query string, saving to cookie
    document.cookie = `hidden=${JSON.stringify(search)};`;
  } else {
    const match = document.cookie.match(/hidden=([^;]+)/);
    if (match && match[1]) {
      // loading previously saved values from cookie
      search = JSON.parse(match[1]);
    }
  }
  const params = new URLSearchParams(search);

  // list all your hidden fields below
  return {
    foo: params.get("foo"),
    bar: params.get("bar"),
  };
}

window.tf.createWidget("Cqrg7cgL", {
  container: document.querySelector("#form"),
  hidden: getHiddenFields(),
});

You can find a full working example here: 
https://glitch.com/edit/#!/luxurious-mulberry-occupation

View original

Liz
Community Team
Forum|alt.badge.img+5
  • Liz
  • Tech Community Advocate
  • September 13, 2023

Hi @studio35design Thanks for stopping by the community! Have you followed the instructions in our article here for hidden fields on embedded forms? 

Life is a series of awkward moments separated by snacks.
S

Yes, I’ve gone through those instructions, but unless I’m missing something, they don’t resolve our issue.
 

In those intructions, they specify to use a specific value for those hidden fields, like #email=xxxxx and replace the xxxxx with a specific email. But how would that work in an embedded form? Each user will have their own email. Same with name/last name, or any of the other variables we are wanting to pass from one form, to the other.

For example, we want to collect the name, last name, and email in form one. Then, when a user goes to a second page, where we’ve embedded form two, we would like that form to recall that information so that they don’t need to input it once more.

So ultimately, page 1 will have form A. page 2 will have form B. page 3 will have form C, and we need certain info to be recognized through out their form journey.

We’ve been able to make this work using drip, and linking the forms directly from type form. But it does not work for us when embedding the forms on different website pages. 

S

Thank you for your response, @Liz. This schematic should help better explain our objectives. I’m hoping we are just missing something simple. 

 

Liz
Community Team
Forum|alt.badge.img+5
  • Liz
  • Tech Community Advocate
  • September 14, 2023

Thanks, @studio35design ! Could you share the URL where you have the forms embedded?

Life is a series of awkward moments separated by snacks.
S

Sure. Here are 3 test forms. Ideally, we would like hidden field info to pass from one, to the other, to the other….

https://www.resonategroup.com/test-form-1
https://www.resonategroup.com/test-form-2
https://www.resonategroup.com/test-form-3

 

So for example, someone fills out their name/email. That name/email is recalled on test form 2, and further recalled on test form 3. 

 

Liz
Community Team
Forum|alt.badge.img+5
  • Liz
  • Tech Community Advocate
  • September 14, 2023

Tagging @mathio to help take a look at the embeds for this!

Life is a series of awkward moments separated by snacks.
mathio-tf
Typeform
Forum|alt.badge.img+5
  • mathio-tf
  • Typeform
  • September 15, 2023

Hello @studio35design 

in order to link your embedded typeforms you need to:

  1. embed using our Embed SDK 
  2. redirect to the page with embedded typeform
  3. dynamically pass hidden fields to embedded typeform with data-tf-transitive-search-params option - see docs: https://www.typeform.com/help/a/dynamically-pass-hidden-fields-from-a-url-to-an-embedded-typeform-for-advanced-users-4404652303892/

 

In your case:

  • form 1 on page 1 will redirect to page 2 and pass hidden fields as query string params
  • form 2 on page 2 will load those values via data-tf-transitive-search-params
  • form 2 on page 2 will redirect to page 3 and pass hidden fields as query string params
  • form 3 on page 3 will load those values via data-tf-transitive-search-params
Liz
1 person likes this
  • Liz
    Liz
S

Thank you @Liz and @mathio. Question. If I manage to set this up, will this only work at the moment of redirect? Or for example, could they be redirected to form 3, not fill it out at the moment, but later come back to that same page? That is the heart of the issue, because while the test forms are small, we ultimately want to build a large multi question typeform, across 7 or so pages. The ideal scenario would allow a user to fill it out partially, and then come back at a later time to continue filling it out.

So they would be able to complete page 1 and page 2, and at a later time complete page 3.

 

 

mathio-tf
Typeform
Forum|alt.badge.img+5
  • mathio-tf
  • Typeform
  • September 18, 2023

If you were to use single typeform, it can autosave progress and preserve their answers even when they leave the form.

If you want to split the user journey between multiple typeforms you will need to take care of preserving their session yourself. If the data is not sensitive, the simplest solution might be saving the data in a cookie. Each page with a typeform could save the data from query parameters info a cookie. When users returns to the page later, it could load the data from cookie as a fallback solution when query parameters are not available. You will need to pass those values to embedded form via embed SDK yourself.

 

User journey:

  • page1
    • form 1 will redirect to page 2 and pass hidden fields as query string params
  • page 2
    • custom JavaScript will load the values from query string
    • store the values in cookies
    • pass those values as hidden fields to form 2
    • display form 2
    • form 2 will redirect to page 3 and pass hidden fields as query string params
  • page 3
    • same as page 2...

If user returns to a page later, eg page 2:

  • custom JavaScript will try to read the values from query string (but it will be empty)
  • read the values from cookies instead
  • pass those values as hidden fields to form 2
  • display form 2
  • …

 

The JavaScript code could look like this:

function getHiddenFields() {
  let { search } = window.location;
  if (search) {
    // loading values from query string, saving to cookie
    document.cookie = `hidden=${JSON.stringify(search)};`;
  } else {
    const match = document.cookie.match(/hidden=([^;]+)/);
    if (match && match[1]) {
      // loading previously saved values from cookie
      search = JSON.parse(match[1]);
    }
  }
  const params = new URLSearchParams(search);

  // list all your hidden fields below
  return {
    foo: params.get("foo"),
    bar: params.get("bar"),
  };
}

window.tf.createWidget("Cqrg7cgL", {
  container: document.querySelector("#form"),
  hidden: getHiddenFields(),
});

You can find a full working example here: 
https://glitch.com/edit/#!/luxurious-mulberry-occupation

Liz
1 person likes this
  • Liz
    Liz

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs