Skip to main content
Answered

How do I take form submission data on Webflow and pass that to a hidden field in a Typeform popover embed?


I’ve got a very simple form asking for someone’s job title.  The CTA button is “Start recruiting”.

 

The data they submit then gets passed to a hidden field in Typeform called “jobtitle”.

 

Webflow is causing me some issues because I can’t see an obvious way to take that data and pass it into the embed code for the popover Typeform.

 

Can anyone help?

Best answer by mathio-tf

If you were to embed your form on a different page, your approach will work.

For example you can place your form on /landing-page with a redirect to a different page:

<form action="/recruitment-form" method="GET">
  <input type="text" id="jobtitle" name="jobtitle" placeholder="Enter your job title here">
  <button type="submit">continue</button>
</form>

Submitting the form will take you to URL like this: /recruitment-form?jobtitle=engineer

Then, on the /recruitment-form page you can display the form:

<button 
  data-tf-popup="iKrAInr4" 
  data-tf-opacity="100"
  data-tf-size="100"
  data-tf-iframe-props="title=CB - Sales (hidden fields)"
  data-tf-transitive-search-params="jobtitle"
  data-tf-medium="snippet"
  data-tf-hidden="jobtitle=xxxxx" 
  style="all:unset;font-family:Helvetica,Arial,sans-serif;display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:#0445AF;color:#fff;font-size:20px;border-radius:25px;padding:0 33px;font-weight:bold;height:50px;cursor:pointer;line-height:50px;text-align:center;margin:0;text-decoration:none;"
>Start recruiting</button>
<script src="//embed.typeform.com/next/embed.js"></script>

You can add data-tf-open=”load” to your button to open it automatically on page load.

 

Alternatively you could build this in a single page using Typeform Embed SDK and some JavaScript code:

<input type="text" id="job-title-input" placeholder="Enter your job title here" />

<button id="my-typeform-button" style="all:unset;font-family:Helvetica,Arial,sans-serif;display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:#0445AF;color:#fff;font-size:20px;border-radius:25px;padding:0 33px;font-weight:bold;height:50px;cursor:pointer;line-height:50px;text-align:center;margin:0;text-decoration:none;">Start recruiting</button>

<link rel="stylesheet" href="//embed.typeform.com/next/css/popup.css" />
<script src="//embed.typeform.com/next/embed.js"></script>

<script>
  document.querySelector('#my-typeform-button').onclick = () => {
    window.tf.createPopup('iKrAInr4', {
      size: 100,
      hidden: {
        jobtitle: document.querySelector('#job-title-input').value
      }
    }).open()
  }
</script>

 

View original

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

@mathio do you know if they would need to format the date from webflow specifically to pass in the date in a hidden field? 


mathio-tf
Typeform
Forum|alt.badge.img+5

Hello @James2476 ,

I am no expert on Webflow, but it seems like you can achieve this by building a GET form in your Webflow:
https://discourse.webflow.com/t/form-submission-as-redirect-url-variable/38755/5

 

Or you could just build a simple HTML form without any other tools:
https://stackoverflow.com/questions/30241407/how-to-pass-input-field-values-as-a-url-query-string-that-will-be-opened-on-clic

 

Once the form is submitted you should have the value in URL. Then you can read the value from the URL using data-tf-transitive-search-params option:
https://www.typeform.com/help/a/dynamically-pass-hidden-fields-from-a-url-to-an-embedded-typeform-for-advanced-users-4404652303892/


Hi @mathio and thanks for your advice.  I’m stuck again though…!

The code i’ve built for the popup typeform begins to open the form as a pop up, but then redirects to the URL and opens it as a full page typeform which isn’t what I want to achieve.

Any ideas how I can tweak the code so that the form only opens as a pop up?

<form action="https://6z9wlfhskpm.typeform.com/to/iKrAInr4#jobtitle=xxxxx" method="GET">
    <input type="text" id="jobtitle" name="jobtitle" placeholder="Enter your job title here">

<button type="submit" id="submit" data-tf-popup="iKrAInr4" data-tf-opacity="100" data-tf-size="100" data-tf-iframe-props="title=CB - Sales (hidden fields)" data-tf-transitive-search-params="jobtitle" data-tf-medium="snippet" data-tf-hidden="jobtitle=xxxxx" style="all:unset;font-family:Helvetica,Arial,sans-serif;display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:#0445AF;color:#fff;font-size:20px;border-radius:25px;padding:0 33px;font-weight:bold;height:50px;cursor:pointer;line-height:50px;text-align:center;margin:0;text-decoration:none;">Start recruiting</button><script src="//embed.typeform.com/next/embed.js"></script>

</form>

Thanks

James


mathio-tf
Typeform
Forum|alt.badge.img+5

If you were to embed your form on a different page, your approach will work.

For example you can place your form on /landing-page with a redirect to a different page:

<form action="/recruitment-form" method="GET">
  <input type="text" id="jobtitle" name="jobtitle" placeholder="Enter your job title here">
  <button type="submit">continue</button>
</form>

Submitting the form will take you to URL like this: /recruitment-form?jobtitle=engineer

Then, on the /recruitment-form page you can display the form:

<button 
  data-tf-popup="iKrAInr4" 
  data-tf-opacity="100"
  data-tf-size="100"
  data-tf-iframe-props="title=CB - Sales (hidden fields)"
  data-tf-transitive-search-params="jobtitle"
  data-tf-medium="snippet"
  data-tf-hidden="jobtitle=xxxxx" 
  style="all:unset;font-family:Helvetica,Arial,sans-serif;display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:#0445AF;color:#fff;font-size:20px;border-radius:25px;padding:0 33px;font-weight:bold;height:50px;cursor:pointer;line-height:50px;text-align:center;margin:0;text-decoration:none;"
>Start recruiting</button>
<script src="//embed.typeform.com/next/embed.js"></script>

You can add data-tf-open=”load” to your button to open it automatically on page load.

 

Alternatively you could build this in a single page using Typeform Embed SDK and some JavaScript code:

<input type="text" id="job-title-input" placeholder="Enter your job title here" />

<button id="my-typeform-button" style="all:unset;font-family:Helvetica,Arial,sans-serif;display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:#0445AF;color:#fff;font-size:20px;border-radius:25px;padding:0 33px;font-weight:bold;height:50px;cursor:pointer;line-height:50px;text-align:center;margin:0;text-decoration:none;">Start recruiting</button>

<link rel="stylesheet" href="//embed.typeform.com/next/css/popup.css" />
<script src="//embed.typeform.com/next/embed.js"></script>

<script>
  document.querySelector('#my-typeform-button').onclick = () => {
    window.tf.createPopup('iKrAInr4', {
      size: 100,
      hidden: {
        jobtitle: document.querySelector('#job-title-input').value
      }
    }).open()
  }
</script>

 


@mathio - that worked!  thank you so much.

 

James


Reply