Is it possible to do it with the webflow form or does one have to use custom code? If custom code is to be used, what would it look like and can one style it?
I’ve been reading plenty of forum threads about the topic and the guides but have not been able to figure out how to do it.
Thank you for your answer to this question, it is very helpful!
Question though, if I am looking to append more than one field to the end of my URL what changes would I make to the custom code? For example sake, say I wanted to append email, name, and phone number to the end of the URL below.
I would seriously not reccomend doing this since it may violate GDPR terms and you might get into serious trouble.
If you have users in the EU and happen to use any third party script that analyses URLs (like google analytics of facebook pixel, just to name very commonly used examples) you are serving pii (personal identifiable information) to that service, which is a very serious violation of GODR terms.
I don’t know what you want this for, but just thought I’d mention it for you to keep it in mind.
Fines for violating GDPR terms go up to 20 million euros.
I wound up using sessionStorage to achieve the outcome I was looking for.
It’s not best practice to store sensitive information in the browser like this and probably violates GDPR unless you disclose what you’re doing with the information. But I’m not passing along anything egregious in my case and at least storing it in the session clears it eventually (as opposed to localStorage). I also clear it after the form submission.
I preferred to use this on .submit() and use webflow’s default form behavior for redirects and response messages.
Thanks for the script, it’s perfectly working on Chrome, but the form is not submitted on Safari and Firefox (with message error, but the new link is well oppened). You can check on your demo.
Do you know how I can fix this issue ?
Thanks for your help.
Hy @samliew! This topic is pretty old but I’m trying to implement URL changing after the Contact Form is submitted and need some help. Your script works fine but after I implemented it my form stopped sending notifications about new submissions and they’re not showing in a form submissions at all. Could you please help me with this?
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…
Copy this code & place it in the before /body area
Replace the ID’s of your submit button & webflow form
Replace the redirect URL & any parameters you want to be tacked on
Put your Webhook URL in the “action” for the form
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>```