How can I capture UTM Parameters from the homepage URL and pass them to a hidden field in a full width embedded Typeform on the landing page using Webflow?

To capture UTM parameters from the homepage URL and pass them to a hidden field in a full-width embedded Typeform on the landing page using Webflow, you will need to follow these steps:

1. Start by creating the form in Typeform:

• Sign in to your Typeform account and create a new form or select an existing one.
• Add a hidden field to collect the UTM parameters. You can do this by clicking on the "+" button in the form builder and selecting "Hidden Field" from the list of available form fields.
• Give the hidden field a name, such as "utm_source", "utm_medium", etc. Note that the names should match the UTM parameter names you want to capture.

1. Generate the full-width embedded Typeform code:

• Once your form is ready, click on the Share button in the top-right corner of the Typeform builder.
• In the sharing options, select the Embed option.
• Choose the Full page option to ensure the embedded form occupies the full width of the screen.
• Copy the generated embed code.

1. Go to Webflow and add a custom embed element where you want the Typeform to be displayed:

• Open your Webflow project and go to the page where you want to display the Typeform.
• Drag and drop a custom embed element onto the desired section of the page.

1. Paste the Typeform embed code into the custom embed element:

• Double click on the custom embed element to open the embed code editor.
• Paste the Typeform embed code that you copied in the previous step.

1. Modify the Typeform embed code to capture and pass the UTM parameters from the homepage URL:

• Locate the embed code that contains the URL of the Typeform. It should be in the form of src="https://your-typeform-url".
• Append the UTM parameters to the URL using Webflow's dynamic data feature. For example, if you want to capture the utm_source parameter, you would modify the URL as src="https://your-typeform-url?utm_source={{query.utm_source}}". Replace your-typeform-url with the actual URL of your Typeform.

1. Update the Typeform hidden field with the passed UTM parameters:

• In the Typeform builder, go to the Settings tab.
• Select the Logic Jump option.
• Create a new rule that says, "If Hidden Field is...", and set the condition based on the UTM parameter you want to capture.
• Set the outcome to assign the UTM value to the hidden field you created in step 1.

1. Save and publish your Webflow site:

• Once you have made all the necessary changes, save and publish your Webflow site to make the modifications visible on your live site.

By following these steps, you will be able to capture UTM parameters from the homepage URL and pass them as hidden fields to a full-width embedded Typeform on your landing page using Webflow.

Additional Questions:

1. How do I embed a Typeform in Webflow?
2. Can I use dynamic data in the embed code of a Typeform in Webflow?
3. What other platforms can I use to integrate forms with UTM parameters in Webflow?