Grab Parameters From URL Using HTML Only [For Typeform Embedding]

问题

A quick question.

<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>Re-Imagining Business Models</title> <style type="text/css"> html{ margin: 0; height: 100%; overflow: hidden; } iframe{ position: absolute; left:0; right:0; bottom:0; top:0; border:0; } </style> </head> <body> <iframe id="typeform-full" width="100%" height="100%" frameborder="0" src="https://f03.typeform.com/to/AAAAAA?cl=xxxxx"></iframe> <script type="text/javascript" src="https://embed.typeform.com/embed.js"></script> </body> </html>

If you can see the cl=xxxxx, I need the xxxxx to be changed based on the parameters entered in the website.

from example:

www.mywebsite.com/formpage?cl=123121

The iframe will run this website: https://f03.typeform.com/to/AAAAAA?cl=123121

Is it possible using only HTML? because I'm working on Wordpress and don't know much what I can do in it other than builders and editing an HTML.

Thanks

回答1:

This is possible using Typeform Embed API

You can see a working example I made on Glitch

You can edit here.

Steps to reproduce:

Include Typeform Embed SDK in your HTML
Extract parameters from URL

let params = new URLSearchParams(location.search);
Reconstruct your form URL

var url = "https://YOUR_SUBDOMAIN.typeform.com/to/YOUR_TYPEFORM_ID"; url += "?utm_source=" + params.get('utm_source');
Display form in a target div

const embedElement = document.querySelector('.target-dom-node'); window.typeformEmbed.makeWidget( embedElement, url, { hideHeaders: true, hideFooter: true, } );

Hope it helps :)

来源：https://stackoverflow.com/questions/52768860/grab-parameters-from-url-using-html-only-for-typeform-embedding

标签

html

wordpress

iframe

embed

typeform