Auto-fill form values based on URL querystring

Community resources Webflow Tips
44

@samliew

Hey mate, this has been a great help to me, but I am having a little trouble with number inputs pulling down from the URL, is there anything I need to add to the code to allow for this?

Thanks,
C

45

First and foremost - this thread has been a tremendous help - thanks so much!

Quick question - is there a way to make a field in the form non-editable in nature, while still pulling data from a specific URL parameter to fill that specific form field.

For example, in the screenshot attached below, you can see that a similar site has brought in an email address from the URL, and prompts you to create an account with that email. It doesn’t let the user edit it, as it is already pulling the email from the URL which the user would have entered in an earlier step.

I hope this makes sense! Please let me know if I can clarify further. Thanks in advance! :grinning_face_with_smiling_eyes:

Screenshot - Circle Comm

46

Yes, but you have to use custom code component to manually code a field with an attribute that does that, or use custom code to set the attribute on page load.

47

At www.cure.finance we have a form on the landing page from where we carry over the e-mail to a form on the survey page. We use @exponent42 's script (from above) as “before-body-tag”

<script>
// This ensures the form has been received by the server
$(document).ajaxStop(function() {

and the other script

<script>
  function getParam(name) { name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), results = regex.exec(location.search); return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); }
  Webflow.push(function() {

in the footer_code section. This works fine for us (thanks btw!). BUT:

Every now and then it happens that the reload is triggered immediately after loading the homepage and not after pressing the submit button of the form. So people that come to our page have no chance to read the homepage because the second page is loaded almost immediately. I can stop this behavior only by deleting all cookies in the browser.

Do you have an idea what’s happening here? Maybe ajaxStop is not what we need, maybe we need something that deletes cookies first?

48

Hi, I know I’m a little late to the party here but I was wondering if I could possibly get some help with my current project if @samliew is available?

On my home page I wanted to upfront the x2 most important text fields for the different user types that may be visiting the page: make a claim or rent a car. I want their form submissions from the home page to appear pre-populated into the actual form on the designated page so that they do not have to re-enter the field. If this is possible please let me know?

Thank you very much, any help is appreciated.

https://preview.webflow.com/preview/omr

49

@ttessss instead of using a redirect, set the designated page under the “Action” field - this is where the form data goes. Then on each of of the subsequent pages, do step 1 mentioned in the first post in this thread, to get the values from the URL into the respective form fields.

Screenshot_2021-06-30_110627

50

Thank you so much @samliew I really appreciate your help! I was able to get the claim number field working :partying_face: Im trying to get the rental pick-up date working now but I fear that I have conflicting code and that is why its not working for me. I wanted the user to be able to use a date picker given the context. If you can please advise that would be amazing!
Thanks again!

51

@samliew
I have created another topic, but I think it is related to this one and I was wondering if you could help me.

How to implement prefill using URL parameter to airtable form embed in webflow

52

@samliew any recommendations for queries that have spaces and commas? (i.e. New York, NY) - the code works great for zip codes but we see the dreaded %20 when introducing spaces

Screen Shot 2021-08-06 at 3.20.27 PM

53

hey boss, hope you are doing well. Can you help me with one little help?
I want to show a popup form after the email field is inputted and the email field will be prefilled with the mail address that was added to the email field. how will it work? any webflow custom code or interactions?

54

@samliew Hi, I need some advice on how to apply this autofill based on url on a one page website
 when I need to fill the field based on CTA under product.
If I enter the url only /?key=value#id
Then it works, but when I click on another button the url does not change and therefore neither does the content of the field
 :frowning: It works partially, only when I complete the url and add / which is not the correct solution.

Thank you very much in advance
Michaela

Here is share read-only link: Webflow - Symvitro

55

I think I got it
!
The key url element is /slug/ and the homepage slug is simply /index.html
I.e. The url structure for HP should be like this: /index.html/?Key=value#id

56

Hi Sam,

Thanks so much for this, I’ve used your solution put forth here before to great success.

I’m now trying to pull through multiple form fields on a 4-step form (email address, name, company name and phone number). My question is, what do I need to change/add to pull through multiple form fields? Only one form field is working at a time at the moment.

Many thanks in advance,
Chloe

57

For anyone still looking to do this, we’ve just released a really easy solution & tutorial - all you need to do is paste one script and then add an attribute to your form field. Super easy!

Here’s a link to the script and the tutorial :slight_smile:

1 Like
58

Another solution to share. We’ve revamped Sygnal Attributes 5, and the data-binding feature can now pull data from querystrings, cookies, webStorage, path parts, etc. and bind it to form fields, selects, checkboxes


Very easy to use, you’d just slap a custom attribute on your form element like wfu-bind = ?name and it would initialize that element to whatever you have in the querystring name param.

https://data-binding.webflow.io/query?code=ID6079&name=Trial+User+1&color=blue&accept=true

Docs;

59

Hey Oanh , Did you get a response to this? I am also needing to do this for a photo site.
The customer will enter their code then i will need the submit button to prefill the website adding the code and ‘.jpg’ at the end. eg. www.website.com/code.jpg
Any help would be hugely appreciated. @samliew

60

@samliew Hello, guys! Please help me to write code to make dropdown preselected. Here is my website on Webflow: Webflow - Getzing
And here is published one: https://www.getzing.pp.ua/
There are three cards offering three different plans. When you click on one of these buttons the pop-up form appears with dropdown, which contains three options with text — one for each plan: “First option”, “Second option”, “Third option”. How can I make the dropdown to be preselected in popup form after pressing one of these three buttons (correspondin to each plan)? I used Finsweet attributes to bond the form select (which is hidden) with stylized dropdown.

61

Hey @Denis_Khramov I recommend creating a new post for this (so it doesn’t get lost). Sounds like a different-enough issue to warrant it’s own post.

62

Hi @Denis_Khramov,

Auto-fill dropdowns (and even checkboxes/radio buttons) are certainly possible.

I can write code for you, just submit a consultation request here:

Top Webflow Expert Web Developer – Samuel Liew

2 Likes
64

I created post here. However I’ve already solved this for me.

1 Like