Append data from webflow form to URL

Design help Custom code
23

@Philip_Kornmann This looks like what you need…

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 for 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>```