How to populate a fied in form based on data from collection item

Design help General
1

Hi guys,

I looked into the forum but I believe it’s Jquery related but I couldn’t find a suitable solution.

I’m building a website where you can rate cities. Each cities page have a button that lead to a form page to rate it.

I would like for the form to populate with the city name (from the previous page). It has to have the exact same name because when the form is submited, the data imputed go in a CMS collection (via Zapier) and has to match the right city.

Thanks a lot,

Nick

2

Hey @Nick101, I would use localStorage() for this. Code will look something like this.

$(window).on('load', function(){
  localStorage.setItem('city', $('.city-name').val())
})

and on the form page.

$(window).on('load', function(){
  $('.input#cityname').val(localStorage.getItem('city'))
})

I wrote that on the fly, if there are any errors let me know :slight_smile:

3

Hi @dennyhartanto,

Thanks for the reply !

I’m not an expert in coding :sweat_smile: Where do I need to put these pieces of code specifically?

4

For specific page, there is a Custom Code section in Page settings, scroll down.

For all pages, in site settings there is a custom code tab.

5

Found it. Which variable I need to change I your code to adapt for my structure?

6

Do you mind sharing your read-only link so that I can help with it more effectively?

7

@dennyhartanto Had the same question as Nick101 above, not sure which variables to change to make it work on my page. I can kind of follow but get lost with the ‘.____’ values.

I’m trying to collect an address on landing page and then use it to populate address field on the next page the CTA clicks through to. If it helps the text input field (on both pages) is “address”

Is the way I’ve updated below correct? Thanks in advance!

Copy the following snippet into initial capture page code:

$(window).on(‘load’, function(){
localStorage.setItem(‘streetaddress’, $(‘.address’).val())
})

And then copy this into the larger form page’s code.

$(window).on(‘load’, function(){
$(‘.input#address’).val(localStorage.getItem(‘streetaddress’))
})

8

Hi @nm788, I realise the code that I have written previously is not right. If you can share your published webflow.io link I’ll help you with it.

9

Hi @dennyhartanto !
I have the same question as nm. Here’s the read-only link: Webflow - Brett's Wholesale Business

I have a text input field on the landing page where the user can fill in their Address. When they click submit, it takes them to a separate form for them to fill out additional information. I’d like the Address field on this new form to be already filled out with what they entered on the landing page. Is this something I can do with localStorage?

Thanks!
Brett

10

Hi @Brett_Mecham, yes you can.

Use this on the landing page:

$('#submitButton').on(‘click’, function(){
localStorage.setItem(‘streetaddress’, $(’#gpa’).val())
})

On the next page:

$(window).on(‘load’, function(){
$(’.input#address’).val(localStorage.getItem(‘streetaddress’))
})

You will need to change the .input# with the ID of the input element on the second page.

Let me know if that works!

11

Hey Denny thanks so much for the reply. Unfortunately I couldn’t get it to work.

I replaced ‘.input#address’ with ‘.input#propertyAddress’ but otherwise left everything else the same (propertyAddress is the ID of the field on the contact form). I put these snippets “before tag” on both the landing page and Contact page.

Your syntax looks different than other examples I’ve found online but I figured there could be multiple ways to write it. Any other thoughts on what I might need to change?

12

Hi @Brett_Mecham, if you’ve not solved it can you share the published webflow.io link so that I can help you troubleshoot?

13

https://preview.webflow.com/preview/bretts-wholesale-business?utm_medium=preview_link&utm_source=designer&utm_content=bretts-wholesale-business&preview=8ec5a0c3f466950a10c681fd522377b4&pageId=60906fb03ba1f5216b531d72&workflow=preview

Much appreciated, thank you!

14

Hi @Brett_Mecham, I’m not 100% sure this is the issue. but I think the single quote marks were copied correctly from the forum post. The stuff in ‘…’ should be green like #gpa. so I’ve added a new code for you to try. Also note that Element IDs are case sensitive so .input#propertyAddress should be .input#Property-Address

Screen Shot 2022-04-08 at 23.09.04
Screen Shot 2022-04-08 at 23.09.27

$("#submitButton").on("click’" function(){
localStorage.setItem("streetaddress", $("#gpa").val())
})

$(window).on("load", function(){
$(".input#Property-Address").val(localStorage.getItem("streetaddress"))
})