Question

Hidden fields of new layout

  • 1 February 2021
  • 17 replies
  • 333 views

I’ve faced the issue that new layout doesn’t support hidden fields the way it was in classinc layout. I’m wondering if this option is completely gone or it’s moved somewhere else. I’m trying to find an effective API connection to my website. 


17 replies

Userlevel 7
Badge +5

Hi @William Kirby . Thanks for joining the community! The hidden fields are in the new builder, but in a different location. :) You can find them under the Logic tab, and our article here can provide instructions on where to locate them, too. Hope that helps!

That was helpful. Thanks for the quick response! 

Userlevel 7
Badge +5

Not a problem! Let me know if you think of any other questions. :) 

Hello, 

I still cannot find this setting. I think I have duplicated a typeform from classic that has hidden fields, but I cannot edit them in the builder. 

Userlevel 7
Badge +5

Hey @smileco. Welcome to the Community! =)

I've recorded this quick video showing where you can find it. You can remove/edit them, and also create new ones. If this is not what you see on your side, do you mind sharing a screenshot? That would be really helpful! 

Hi @Mariana, I sorted out what was wrong. We are still using classic mode. The strange utms I was seeing were coming from somewhere else. 

Userlevel 7
Badge +5

I see, @smileco thanks for letting us know that. Glad it was sorted 🥳

I don’t seem to find the hidden fields under the Logic tab. Please help.

Userlevel 7
Badge +5

 Hi @gideon ! Are you in the new builder? If so, you can find them following the same steps as in the gif below. :) 

 

 

I’m new to Typeform and guess I’m using the new builder. Could you resend the gif please

Userlevel 7
Badge +5

Hey @gideon. Actually, it seems you're using the classic builder for now. Here is the image showing where you can add hidden fields: 

 

Let me know if you can find it! =)

Thanks @Mariana, unfortunately still can’t find it. However, I found the article below on Hidden Fields. It appears I’ll have to add the information at the end of the typeform URL.

https://help.typeform.com/hc/en-us/articles/360029571951-What-are-Hidden-Fields-

I have outlined the scenario for looking to use the hidden fields feature.

  • customer enters their email address on my website to join a waitlist
  • customer selects the sign-up button and proceeds to the typeform to submits form

Do you think it’s possible for the email address to be added to the typeform results?

Userlevel 7
Badge +5

Hi @gideon Would you mind sharing a photo of your builder? We can then point out in the photo where the hidden fields can be found. :) 

As for passing the email into the typeform, this can be done, and the method will vary depending on how you are adding the button to your site. If the signup button on the site will be the Typeform button, you will need have access to the code so you can edit our embed snippet. You can watch this video (06:31) or follow the steps below.

 

Please note that this doesn't currently work with Wix built websites, the reason for this is explained by Wix here.

 

1. Access your website code and go to the place where you form is embedded:

 

?name=inline522856659.png

 

2. Place the cursor after the URL text and add the following:

data-transferable-url-parameters="name-of-the-field"

 

3. Change the "name of the field part" for the name of your field. So if in your URL it shows as name like in this example:

 

?name=inline-3558246.png

 

 

4. Make sure you don't break the code. Pay attention to the syntax, every pair should be like this: name="value"

 

5. This is how the whole thing would look using our name=Tony example above:

 

 

Before:

----------

 

<div class="typeform-widget" data-url="https://form.typeform.com/to/t6YZgb" 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://embed.typeform.com/"; if(!gi.call(d,id)) { js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() </script> <div style="font-family: Sans-Serif;font-size: 12px;color: #999;opacity: 0.5; padding-top: 5px;"> powered by <a href="https://admin.typeform.com/signup?utm_campaign=t6YZgb&utm_source=typeform.com-01D8JX5ZB0JZHVVXMR5KCMBWFX-premium&utm_medium=typeform&utm_content=typeform-embedded-poweredbytypeform&utm_term=EN" style="color: #999" target="_blank">Typeform</a> </div>

 

 

After

------

<div class="typeform-widget" data-url="https://form.typeform.com/to/t6YZgb" data-transferable-url-parameters="name" 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://embed.typeform.com/"; if(!gi.call(d,id)) { js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() </script> <div style="font-family: Sans-Serif;font-size: 12px;color: #999;opacity: 0.5; padding-top: 5px;"> powered by <a href="https://admin.typeform.com/signup?utm_campaign=t6YZgb&utm_source=typeform.com-01D8JX5ZB0JZHVVXMR5KCMBWFX-premium&utm_medium=typeform&utm_content=typeform-embedded-poweredbytypeform&utm_term=EN" style="color: #999" target="_blank">Typeform</a> </div>

 

Hopefully this helps a bit! Let us know if you’re still not able to locate the hidden fields in the form. 

I cannot seem to find this Logic tab (only Logic Jump) in any of my settings. Can you please tell me where to find it? This is what I see in my account (no wrench icon). Or please let me know how to find the hidden fields if there’s a different path.

 

Userlevel 7
Badge +5

Hi @bslck ! It looks like you’re working in our classic builder, so I created a gif for you below to walk you through adding hidden fields. 

Let me know if you can’t find them still! 

Hi @gideon Would you mind sharing a photo of your builder? We can then point out in the photo where the hidden fields can be found. :) 

As for passing the email into the typeform, this can be done, and the method will vary depending on how you are adding the button to your site. If the signup button on the site will be the Typeform button, you will need have access to the code so you can edit our embed snippet. You can watch this video (06:31) or follow the steps below.

 

Please note that this doesn't currently work with Wix built websites, the reason for this is explained by Wix here.

 

1. Access your website code and go to the place where you form is embedded:

 

?name=inline522856659.png

 

2. Place the cursor after the URL text and add the following:

data-transferable-url-parameters="name-of-the-field"

 

3. Change the "name of the field part" for the name of your field. So if in your URL it shows as name like in this example:

 

?name=inline-3558246.png

 

 

4. Make sure you don't break the code. Pay attention to the syntax, every pair should be like this: name="value"

 

5. This is how the whole thing would look using our name=Tony example above:

 

 

Before:

----------

 

<div class="typeform-widget" data-url="https://form.typeform.com/to/t6YZgb" 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://embed.typeform.com/"; if(!gi.call(d,id)) { js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() </script> <div style="font-family: Sans-Serif;font-size: 12px;color: #999;opacity: 0.5; padding-top: 5px;"> powered by <a href="https://admin.typeform.com/signup?utm_campaign=t6YZgb&utm_source=typeform.com-01D8JX5ZB0JZHVVXMR5KCMBWFX-premium&utm_medium=typeform&utm_content=typeform-embedded-poweredbytypeform&utm_term=EN" style="color: #999" target="_blank">Typeform</a> </div>

 

 

After

------

<div class="typeform-widget" data-url="https://form.typeform.com/to/t6YZgb" data-transferable-url-parameters="name" 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://embed.typeform.com/"; if(!gi.call(d,id)) { js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() </script> <div style="font-family: Sans-Serif;font-size: 12px;color: #999;opacity: 0.5; padding-top: 5px;"> powered by <a href="https://admin.typeform.com/signup?utm_campaign=t6YZgb&utm_source=typeform.com-01D8JX5ZB0JZHVVXMR5KCMBWFX-premium&utm_medium=typeform&utm_content=typeform-embedded-poweredbytypeform&utm_term=EN" style="color: #999" target="_blank">Typeform</a> </div>

 

Hopefully this helps a bit! Let us know if you’re still not able to locate the hidden fields in the form. 


Thank you very much for such a detailed explanation. Even though it looks promising and is exactly what I am looking for, it seems like this solution doesn’t work for me.

Can it happen because I’m using the classic builder?

When I’m adding UTM parameters (like name) in the URL I’m receiving an error message: “Sorry, we couldn't find what you're looking for. “

Here’s the code I use to embed the form:

 

<div class="typeform-widget" data-url="https://form.typeform.com/to/BVTA5eDD" data-transferable-url-parameters="name" style="width: 100%; height: 600px;"></div> <script> (function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm", b="https://embed.typeform.com/"; if(!gi.call(d,id)) { js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() </script>


If I am using a generic typeform URL, the parameter adds easily with an addition of ?name=, but not if it is embedded on a website. May Wordpress be the problem?

https://form.typeform.com/to/BVTA5eDD

UPD: for some reason it seems like “name” parameter is reserved by Wordpress and returns 404 page when you try to use it. However, changing it to anything else would do the trick!

Reply