Jump to content

[Share] How to link a button on header to a form on the home page

Recommended Posts

Posted

If you need to click button on header and it scrolls to form on homepage, you can follow these.
#1. Add a Code Block next to Form

image.thumb.png.7d40d3f1d54d043bae136d481eff5328.png

#2. Paste this code into Code Block

<div id="contact-form"></div>

image.png.574d69970544588990ebd610c7b3a346.png

#3. Edit Site Header

image.png.15f7a2900e723a1615c00443829ff658.png

#4. Edit Header button > Enter URL

#contact-form

and make sure "Open in New Tab" is disabled

image.png.f498ad3c7bc66888e4d67897c411c702.png

#5. Done. When users click Header button, it will scroll to Form
if you want a slow scroll effect, you can use this code to Custom CSS box

html {
  scroll-behavior: smooth;
}

#6. Note
If you are on other pages, when clicking Header button, it will do nothing, you will need to edit Header Button to this url
 

/#contact-form

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • Replies 0
  • Views 424
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.