One form on multiple sections

[Dushaan]

Hello,

I am creating a pricing form with each individual question, on different sections, all on the same page.

I would like the user to fill out each question (each on a different section) and then submit one form at the end. How can I make this possible?

Should I change each form block on each section, to the same class?

I have attached a link to my site below. What I am referring to is under the “packages page”.

https://preview.webflow.com/preview/ivy-and-aspen?preview=121435b28fd03739ff02cb13befdd95e

Thank you!

[billvdh (Bill)]

If all the page contents are wrapped within a form it should work ok. I put together a quick 2 section test to see if it would work. You should be able to match the page structure, I wrapped each section within the form itself.
Love the design, nice work!
https://preview.webflow.com/preview/multi-section-form?preview=bbd0c3bc9da4d3db85e6b0974188d8ee

[Dushaan]

Thanks for the kind words.

So essentially what you did was make a form block cover the entire page, and then within that from block you added multiple div blocks to create sections? Is this correct?

[billvdh (Bill)]

@Dushaan you got it. I just put the form block in as the first element on the page and then continued building the page within it

[Dushaan]

Perfect, I will give it a try. Thank you so much for your help.

[Dushaan]

I have another question that you can possibly help me out with.

On the same page, where I have multiple events (Question #2) How can I have user be able to click on and select each event? I would like the user to be able to click on each event, and for it to look like how it looks when you hover over each option.

I currently used the checkbox, and stylized the field.

[billvdh (Bill)]

@Dushaan if you created a duplicate button with the hover style as its default style (updated border color) you could absolutely position it over the top and display it on click with an interaction and it would hold its new colors.

Hope that helps!
Bill

[Dushaan]

Hey @billvdh I have tried your suggestion and It seems to work, but since I am overlaying the duplicate button over the actual button, every time I click the actual button the duplicate button appears on top, and I am no longer able to click on the actual button underneath to un-click the selection. In other words, the interaction causes the Duplicate button to be on top and not allow me to click on the actual button.

How will I be able to overcome this?

Thank you in advance.

[billvdh (Bill)]

@Dushaan - I could see that becoming a problem with certain designs, an alternate method would be to use custom code to toggle a class and change the design, you can create a separate element on the page and design it to look like what it should appear as after being clicked and then use jquery to add that class on click - I haven’t built it with a checkbox but have used in other cases successfully with this code to change layouts

$(“#elementID”).click(function(){
$(“.elementToChange”).toggleClass(“newClassName”);