Form Submission as Redirect URL Variable

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:

Discover Typeform, where forms = fun

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): Webflow - Augustus

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

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?

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

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.

1 Like

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: javascript - How to pass input field values as a url query string that will be opened on click of a submit button? - Stack Overflow

1 Like

@juhaikonen - thank you! I was overthinking this. I just changed the “Redirect URL” to the URL I wanted, with the UTM parameters.

Here’s a bit more complex solution for anyone who wants to both #1 redirect to a URL with the parameters appended #2 send data via a webhook to zapier or some other external source.

If you need an explanation on what’s going on, just chuck the code into ChatGPT and it will explain…

The short of it is…

  1. Copy this code & place it in the before /body area
  2. Replace the ID’s of your submit button & webflow form
  3. Replace the redirect URL & any parameters you want to be tacked on
  4. Put your Webhook URL in the “action” for the form
  5. Make sure the form is using the POST method

The email validation is not necessary, but I put it in there so you can block common bot email addresses or misspellings of common email domains. That part disables the submit button until they correct their email address.

Hope this helps someone who needs it!

<script>
  $(document).ready(function() {
    var blockedDomains = ['tempormail.com', 'temporary-mail.net', 'temporary-mail.com', 'tempomail.com', 'tes.com', 'test.com', 'favilu.com', 'soremap.com', 'tempo-mail.com', 'tempo-mail.net', 'tempormail.net', 'ratedane.com', 'larland.com', 'ozatvn.com', 'valanides.com', 'peogi.com','farebus.com', 'gmail.co', 'gnail.com', 'ysahoo.com', 'peogi.com', 'pyadu.com'];  // Add blocked domains here

    function validateEmail(email) {
      var domain = email.split('@')[1];
      return !blockedDomains.includes(domain);
    }

    $('input[name="email"]').on('blur', function() {
        var email = $(this).val();
        if (!validateEmail(email)) {
          alert('Invalid email address.');  // Show an alert or customize as needed
          $('#YOUR-SUBMIT-BUTTON-ID').attr('disabled', 'disabled');  // Disable submit button
        } else {
          $('#YOUR-SUBMIT-BUTTON-ID').removeAttr('disabled');  // Enable submit button if email is valid
        }
    });

    $('#YOUR-FORM-ID').on('submit', function (ev) {
        ev.preventDefault();
        
        // original form action url
        var actionUrl = $(this).attr('action');
        console.log(actionUrl);
        
        // get form data
        var formData = $(this).serialize();
        console.log(formData);
        
        var form = $(this);
        
        $.ajax({
        		type: 'POST',
            url: actionUrl,
            data: formData,
            success: function (data) {
                var fname = form.find('input[name="firstName"]').val();
                var email = form.find('input[name="email"]').val();
                var phone = form.find('input[name="phone"]').val();
                window.location.href = "https://yourdomainname.com?firstName="+encodeURIComponent(fname)+"&email="+encodeURIComponent(email)+"&phone="+encodeURIComponent(phone);
            },
            error: function (data) {
            		console.log('Error:', data);
      			}
    		});
    });
  });
</script>```