Append data from webflow form to URL

Design help Custom code
#1

Hi,

I am trying to find a solution on how to pass form data into a redirect URL by using the webflow form.

To make it simple, my form only consists of an email field and I want the email address of the user to be appended onto the redirect URL. E.g.:

  1. user goes to example.webflow.com
  2. user enters example@test.com in a webflow form and hits submit
  3. user gets redirected to www.redirect.com/?example@test.com

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.

Cheers,
Philip

#2

Something like this perhaps?

Demo: http://sandbox-903b9c.webflow.io/form-pass-field-to-redirect-url

Share link: https://preview.webflow.com/preview/sandbox-903b9c?preview=2a77d4d5446ddad097abb9bf8603288b

<script>
Webflow.push(function() {
  $('form').submit(function() {
    setTimeout(function() {
      location.href = 'https://samliew.com/webflow-expert?email=' + $('#email').val();
    }, 100);
  });
});
</script>

It gets redirected to another form and the target page auto-fills the email.

Another Demo: http://sandbox-903b9c.webflow.io/two-form-test/form-1

5 Likes
#3

@samliew

How would you next attach this email to an email form on the next page?

#4

Hello @DomenVi, have you solve your issue ? I’m interested by the answer… :slight_smile:

#5

Hi @samliew

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.

‘https://samliew.com/webflow-expert?email=’ + $(’#email’).val();

Thanks in advance!

Paul

#6

@samliew I’m guessing its hopefully as easy as adding the other input ID’s to the end of the URL string?

Thanks again!

#7

you’ll need to include the field names as well.

'https://example.com/?email=' + $('#email').val() + '&phone=' + $('#phone').val()

#8

Thanks so much for the help @samliew

#9

Hi @samliew,

how can I create this with two forms linking to different pages from the same page?

am I right in thinking something like the below?

Thanks!

#13

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.

#14

@samliew How to make it open in new tab?

Thanks!

Can I add a search feature or form that redirects you to different URLs based on your search/form query?
#15

Thank you! This was very helpful!

#16

Hi Samliew. How would you do this with two forms on the same page? The script works for the first form, but not the second (lower) one. Thanks :slight_smile:

#17

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.

Here are decent docs on sessionStorage.

#18

This code works for me on web, but not mobile. Has anyone experienced this?

#19

If i do this there is no form submission on the 1st page.

How do i get that?

#20

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.