Auto-fill form values based on URL querystring

Community resources Webflow Tips
24

50
501375×687 144 KB

So I need to match the field ID with these 4 parameters?

25

Negative. No changes to the code. What it does is for each parameter (key=value pair) in the url, it looks for a field with the same id as the key, and if found, inserts the value into the field.

1 Like
26

Ahh, in that case - I need to match the ID for both email fields on both pages for it to work?

27

It works! Thank you so much @samliew working now.

Thank you, feels like magic.

28

Hi @samliew

I’ve been having problems with this in that the auto-generate email on querystring is very inconsistent, sometimes it works and sometimes it doesn’t.

I don’t know what might be causing this.

Would you be able to take a look if you have a free 2 minutes?

You’ll see that during incognito session, repeated email entries on homepage sometimes the email will pull through, sometimes it wont.

:confused:

29

Seems like you have multiple fields named trial. Currently the code only works for unique fields.

30

@samliew I see what you mean.

Is there any way to make it dynamic so we can link multiple email fields with one field-ID on the destination page?

Thanks

31

Found a way around it. Thanks @samliew

32

Hi! How did you manage to make it work with several forms? Can you share your solution?

33

Hi! Why do you use “$(document).ajaxStop(function() {” to run the script ?

I used your script and your script runs immediately after the page is loaded, and not after the form is submitted.

Thanks!

34

Means you have some other custom code that is conflicting with mine.

1 Like
35

Hi @samliew

I have this issue where the script runs immediately on page load.

I’d love to work with you on being ables to run my few scripts together so they don’t conflict with each other.

Do you have any availability at all?

Thanks in advance!
Will

36

Hey samliew could you help me with a similar situation? I have a simple single field form. The user inputs a code and and on submission I’d like them to be redirected to a url with the code at the end. Like… https://website.com/code. Can you help? Thanks a bunch for all this =).

1 Like
37

Late to the game, but I just implemented this and I also had the problem of the script running immediately on page load.

The script runs when any ajax request finishes, so if there are any other scripts implemented on the page, then this can interfere with the script above.

The page I am working on doesn’t have any additional scripts but it still fired the script on page load, however that was just for me, not for other people. What I noticed is that if you’re logged into the Webflow editor it will cause the script to run on page load. So if you encounter this issue, make sure to log out of the editor first before troubleshooting anything.

38

Hi @samliew, I see from your comment above that the code only works for unique fields. Any advice on how to have multiple forms on the same page (e.g. “enter your email to signup” on the hero section and footer) that autofill to the same a destination url?

Anyone else that ran into the issue of multiple forms on the same page and was able to fix it? :pray:

Thanks a lot :purple_heart:

39

@dmenchaca

Change

getParam(this.id)

to

getParam(this.name)

40

@samliew that worked, thanks!

41

Works a treat thanks @samliew :+1:

42

Thanks for a great tutorial. Is it possible to use it for fields that don’t have an ID and only have name? Like the one below?
<input type=“text” name=“name” placeholder=“Förnamn” value=“”

Thanks a lot Samliew

43

Hey!

Great tutorial, saved this for later use, if I’d need it…
There’s one thing on my mind though!

It’s considered bad practice to put personal data into the querystring!

Sure, HTTPS does encrypt url parameter but it still creates vulnerabilities:

  • Webserver Logs
  • Browser History
  • Bookmarks
  • Printing
  • Referrer Headers
  • Analytics Tools

Here’s a very detailed article:

I’m not meaning to convey a bad mood, it’s just sprung to my mind after reading the Guide :slight_smile:
Have a nice day!