Answered

Include hidden fiel after load

  • 25 March 2022
  • 4 replies
  • 141 views
A

Hi all,

I’m struggling now to pass an hidden value into a field with Typeform.

My actual value is loaded not on the loading of the page but after a loading of one external javascript and create a parameter to my url : example : ?custom=XXXXX

But when I create some script with PHP or Javascript to catch this parameter, it’s blank because the value is created after the page loading.

Is there any chance to pass this value into my form. If yes how could it be done ?

Thanks by advance for your help

 

icon

Best answer by mathio 29 March 2022, 11:13

View original

4 replies

Liz
Rank
Userlevel 7
Badge +5

Hi @AurelienB Could you send the URL where you have the form/script so we can take a look at your set up? Thanks!

@mathio may also be able to help with this one

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

Hi @AurelienB Could you send the URL where you have the form/script so we can take a look at your set up? Thanks!

@mathio may also be able to help with this one

 

Hi @Liz hope you’re doing well.

Here’s an example of my typeform with an hidden field and the javascript loading on the page.

But I’m struggling to put in because the code loads after the typeform html.

 

https://sms-s.fr/type.html

 

Thanks by advance

Liz
Rank
Userlevel 7
Badge +5

Thanks @AurelienB ! In the URL, I don’t see an option for a hidden field. How is it being passed through the Javascript? I’m not seeing that either (though I could be completely missing it). 

Life is a series of awkward moments separated by snacks.
mathio
Rank
Userlevel 7
Badge +5

Hello @AurelienB 

you will need to use out embed SDK to embed your typeform asynchronously when your hidden field value is available. You can use JavaScript code like this one:

<div id="wrapper"></div>
<link rel="stylesheet" href="//embed.typeform.com/next/css/widget.css" />
<script src="//embed.typeform.com/next/embed.js"></script>
<script>
  function loadMyHiddenFields(callback) {
    fetch('/api/hidden-field')
      .then(res => res.json())
      .then(callback)
  }
  function initTypeform(data) {
    window.tf.createWidget('<form-id>', {
      container: document.getElementById('wrapper'),
      hidden: { myHiddenField: data.value },
    })
  }

  loadMyHiddenFields(initTypeform)
</script>

 

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs