Streaming live at 10am (PST)

Form Submission as Redirect URL Variable


#1

Hello,

I'm trying to integrate Typeform and Webflow's default form. Typeform has an integration where you can pass parameters to the form directly in the url. An example of this would be:

https://domain.typeform.com/to/abc123456?param1=xxxxx&param2=xxxxx&param3=xxxxx?typeform-collect=0

Likewise, I have a webflow form with 3 fields. Upon 'submitting' the form on my Webflow site, I have a piece of javascript running that redirects the submission. That code is as follows (thanks to this post!):

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  $('.typeform-share').hide();
  $('.hero-schedule').click(function() {
    $('.typeform-share').trigger('click');
    return false;
  });
});
</script>

Is there a way to populate my redirect URL using the form field values submitted by the user?

Example is available on this site (its a read-only link): https://preview.webflow.com/preview/augustus-091802?preview=8d659457b9e7e4ee44972649c4e9729d

I'd like to pass the Street Address, ZIP Code, and Date parameters in the url that calls the typeform.


#2

I’m looking for an answer to this as well. I found another topic that was closed and none with the proper answer. Can someone help?


#3

Looking for the answer to this question too. Has anyone been able to find a solution to it?


#4

You could try not using a Webflow form as such, rather just using the Webflow form elements (you need to hold the alt key and drag them within the designer or you will get the form block error).

Give each of your form inputs a HTML id within the Webflow editor, e.g street-address, zip-code, date.

Add an event listener to your submit button that grabs these values and creates a url string dynamically:

<script>
    var submitButton = document.getElementById('submit-button');

    submitButton.addEventListener('click', createUrl());

    function createUrl() {

        var streetAddress = document.getElementById('street-address').value;
        var zipCode = document.getElementById('zip-code').value;
        var date = document.getElementById('date').value;

        var url = 'https://domain.typeform.com/to/abc123456?streetAddress=' + streetAddress + '&zipCode=' + zipCode + '&date=' + date;
    }

</script>

Of course you should probably have some validation somewhere, this is just a basic example of dynamically creating a url string.


#5

This should be possible with HTML by creating a standard form in Webflow.

Navigate to the “Form Settings” and set Action to your destination url and method to GET. Also, make sure your form’s input fields have names set in the “Input Settings”.

form_action

See: https://stackoverflow.com/questions/30241407/how-to-pass-input-field-values-as-a-url-query-string-that-will-be-opened-on-clic