Answered

Use of Hidden Fields in Embedded Forms

  • 27 March 2024
  • 5 replies
  • 31 views

In the web system I am developing, we display a popup-style form using the following code:

<div data-tf-live="XXXX" className="relative" onClick={handleClose}></div>

I have confirmed that the button is displayed correctly, and pressing it will display the form.

Now, I want to use the login information of our web system to pass on to typeform who has submitted this form. Although it's possible to prepare a field for users to enter their names, I want to reduce the user's burden as much as possible. Instead of having a field, I'd prefer to pass the user information to Typeform behind the scenes and link it to the results.

Is such an implementation possible?

Even if I prepare hidden fields, I haven't found a way to pass the data in the case of embedded forms, which is why I wanted to ask here.

Thanks in advance!

icon

Best answer by mathio 27 March 2024, 19:30

View original

5 replies

Userlevel 7
Badge +5

Hi @ryota I believe this should be possible, but it will really depend on how you’ve built the application. You would need to develop your own code to pass that data into the hidden fields. 

@mathio do you know if we have any general examples of using hidden fields in an app?

Userlevel 7
Badge +5

Yes, this is indeed possible. You can use data-tf-hidden attribute on the same HTML tag with data-tf-live. See this help center article for details.

You can also use the Embed SDK directly and pass hidden fields as JavaScript object - see the popup example here.

Userlevel 7
Badge +5

Hi @ryota Did the suggestions from @mathio work for you? Let us know!

I tried the suggestions from @mathio and it works!

Thank you so much!!

Userlevel 7
Badge +5

Glad to hear it, @ryota ! Let us know if there’s anything else we can help with. 😀

Reply