I use WordPress and copy my dev to prd environment, which copies the Typeform id from dev to prd too. But I’d like to have two Typeforms each for dev and prd. Is there some clever way to configure the Typeform to use the desired form id depending on the domain or environment? I’m thinking it could be harder where I’d have to write script code to do this on my page.
Answered
How can I automatically target different forms between dev and production environments?
Best answer by Ted Cohn
Ok, I’ve discovered I can simply fetch the current web page’s location using document.location.host and insert the result into the hidden source field. Then my back end can differentiate where the form is filled out and take appropriate action.
Here’s my current embedded HTML script that works for me. It inserts both the currently logged in Wordpress user id and the source.
<!-- Present Typeform with hidden user_id and source fields -->
<div id="tf"
data-tf-widget="<your form id here>"
data-tf-iframe-props="title=<Your form title>"
data-tf-medium="snippet"
data-tf-hidden="user_id=xxxxx,source=xxxxx"
style="width:100%;height:600px;">
</div>
<script src="//embed.typeform.com/next/embed.js"></script>
<script>
const user_id = document.cookie.match(/portal_user=([^;]+);/)[1]
const host = document.location.host
const div = document.querySelector('#tf')
div.dataset.tfHidden = "user_id=" + user_id + ",source=" + host
</script>
1 person likes this
+5Life is a series of awkward moments separated by snacks.
1 person likes this
+6- Certified Partner & Champion
- 5267 replies
your web developers should be able to ‘dynamically’ create-push a variable string to replace the -dev/-prod portion of the url string, based on which instance is being viewed by the user..
just a thought..
des
If your third coffee of the day is not helping you with your Typeform, maybe we can help you find your answers...
Ok, I’ve discovered I can simply fetch the current web page’s location using document.location.host and insert the result into the hidden source field. Then my back end can differentiate where the form is filled out and take appropriate action.
Here’s my current embedded HTML script that works for me. It inserts both the currently logged in Wordpress user id and the source.
<!-- Present Typeform with hidden user_id and source fields -->
<div id="tf"
data-tf-widget="<your form id here>"
data-tf-iframe-props="title=<Your form title>"
data-tf-medium="snippet"
data-tf-hidden="user_id=xxxxx,source=xxxxx"
style="width:100%;height:600px;">
</div>
<script src="//embed.typeform.com/next/embed.js"></script>
<script>
const user_id = document.cookie.match(/portal_user=([^;]+);/)[1]
const host = document.location.host
const div = document.querySelector('#tf')
div.dataset.tfHidden = "user_id=" + user_id + ",source=" + host
</script>
Reply
Rich Text Editor, editor1
Editor toolbars
Press ALT 0 for help
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.