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