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:
1<form action="/recruitment-form" method="GET">2 <input type="text" id="jobtitle" name="jobtitle" placeholder="Enter your job title here">3 <button type="submit">continue</button>4</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:
1<button 2 data-tf-popup="iKrAInr4" 3 data-tf-opacity="100"4 data-tf-size="100"5 data-tf-iframe-props="title=CB - Sales (hidden fields)"6 data-tf-transitive-search-params="jobtitle"7 data-tf-medium="snippet"8 data-tf-hidden="jobtitle=xxxxx" 9 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;"10>Start recruiting</button>11<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:
1<input type="text" id="job-title-input" placeholder="Enter your job title here" />23<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>45<link rel="stylesheet" href="//embed.typeform.com/next/css/popup.css" />6<script src="//embed.typeform.com/next/embed.js"></script>78<script>9 document.querySelector('#my-typeform-button').onclick = () => {10 window.tf.createPopup('iKrAInr4', {11 size: 100,12 hidden: {13 jobtitle: document.querySelector('#job-title-input').value14 }15 }).open()16 }17</script>
+5
+5Hello
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
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?
1<form action="https://6z9wlfhskpm.typeform.com/to/iKrAInr4#jobtitle=xxxxx" method="GET">2 <input type="text" id="jobtitle" name="jobtitle" placeholder="Enter your job title here">34<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>56</form>Thanks
James
+5If 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:
1<form action="/recruitment-form" method="GET">2 <input type="text" id="jobtitle" name="jobtitle" placeholder="Enter your job title here">3 <button type="submit">continue</button>4</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:
1<button 2 data-tf-popup="iKrAInr4" 3 data-tf-opacity="100"4 data-tf-size="100"5 data-tf-iframe-props="title=CB - Sales (hidden fields)"6 data-tf-transitive-search-params="jobtitle"7 data-tf-medium="snippet"8 data-tf-hidden="jobtitle=xxxxx" 9 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;"10>Start recruiting</button>11<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:
1<input type="text" id="job-title-input" placeholder="Enter your job title here" />23<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>45<link rel="stylesheet" href="//embed.typeform.com/next/css/popup.css" />6<script src="//embed.typeform.com/next/embed.js"></script>78<script>9 document.querySelector('#my-typeform-button').onclick = () => {10 window.tf.createPopup('iKrAInr4', {11 size: 100,12 hidden: {13 jobtitle: document.querySelector('#job-title-input').value14 }15 }).open()16 }17</script>
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.