Jump to content

How do I make the contact form be floating and sticky to the scrolling of the screen?

Recommended Posts

Hello! I'm relatively new to Squarespace and CSS coding and am requesting help regarding making a floating form on my website. I'm sure this has been covered before, but so far I haven't quite found the exact solution I'm looking for. I'd like the contact form to be floating and sticky to the scrolling of the screen of each webpage, ideally on the bottom right of the page. Maybe it can "slide" open upon clicking? 

I'm currently testing a button in the footer and a button on the side, the latter of which is currently "coded" to the one page only. This would be the preferred way since the button would appear on all pages while scrolling, as opposed to appearing only in the footer. But I realize I would need to add code to every page (since our current Squarespace plan is a Personal plan so there's no code injection option which may limit what I can do).

I don't really know what the next steps to take are. As mentioned, I'm a relative noob when it comes to coding so I'm not sure if either of these 2 approaches are the best ways to start. Any help is much appreciated! 

Site is ranunculus-fish-fhr3.squarespace.com, password is G5!6p56&46ed!

Edited by Squaredspace
Link to comment
  • Replies 8
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

So you want

  • a button float on right of site (all pages, same button)
  • click button will open Contact Form
  • when users scroll, this button still sticky on right of site

or you want

  • a form float on right of site (all pages, same contact form)
  • when users scroll, this form still sticky on right of site

?

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!)

Link to comment
Posted (edited)

Thanks for replying. Sorry if my post was confusing. I would like:

  • a button float on right of site (all pages, same button)
  • click button will open a "pop-up" Contact Form, but the form stays on the page where the user is scrolling
  • after user clicks to submit form, user is back to the current page where the user was scrolling. The bottom still floats on the right of site
  • when users scroll, this button still on right of site

Hopefully this is possible!

 

Edited by Squaredspace
Link to comment
  • 2 weeks later...
Posted (edited)

So I added the following code block to each webpage:

 

<div id="floating-button">
  <a href="/contact-us2"> Contact Us </a>
</div>

 

And in the Custom CSS, added the following code: 

 

#floating-button {
  position: fixed;
  top: 87%;
  right: 0;
  transform: rotate(90deg) translateX(-45%);
  transform-origin: 100% 0;
  z-index: 99999;
}

#floating-button a {
  background: darkred;
  color: white;
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  font-family: arial;
  font-weight: 400;
  letter-spacing: 0.15em;
  padding: 0px 10px;
  border-radius: 0px 0px 10px 10px;
  transition: ease 0.5s !important;
}

#floating-button a:hover {
    padding: 2px 15px;
  background: #555555;
  }

 

This creates a Contact Us button that scrolls/floats on the bottom right of each page. This works in that the contact form opens when you click on it, and from any page. But this form opens a separate, standalone page. I'm still trying to figure out how to get the form to open (or pop-up) on the same page where the user is currently navigating, i.e., the user doesn't go to another page where the form is.

Any guidance is much appreciated.

 

Edited by Squaredspace
Link to comment

Not sure if you added the code block to every page individually, but making sure you are aware that you can inject the code into the footer on every page (Code Injection/Footer), so you only have to add it once for it to work on the whole site. 

Link to comment

I did actually add the code block to every page individually.

Using the Code Injection method means our company needs to upgrade its subscription plan, which for us as a small company, is currently not in the cards yet. Hopefully in the future. In the meantime, I've been using the Custom CSS feature extensively 🙂

Link to comment
On 3/19/2024 at 9:41 PM, Squaredspace said:

I did actually add the code block to every page individually.

Using the Code Injection method means our company needs to upgrade its subscription plan, which for us as a small company, is currently not in the cards yet. Hopefully in the future. In the meantime, I've been using the Custom CSS feature extensively 🙂

You can add Code Block to Site Footer instead. It will run on All Pages, and Personal Plan still support Code Block in Site Footer.

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!)

Link to comment

Thanks. I tried using a code block to the site footer but since the contact us button won't be seen until the user scrolls down to the bottom of the webpage, I don't know if that achieves what I'm looking for. Unless there's a way to show the button at all times from the bottom of the page, regardless if the user is scrolling to the footer or not? Also, I'm still stuck on getting the form to appear on the same page where the user clicks the button. Just can't find the right code to make this happen 🤦‍♂️

Link to comment
On 3/29/2024 at 4:34 AM, Squaredspace said:

Thanks. I tried using a code block to the site footer but since the contact us button won't be seen until the user scrolls down to the bottom of the webpage, I don't know if that achieves what I'm looking for. Unless there's a way to show the button at all times from the bottom of the page, regardless if the user is scrolling to the footer or not? Also, I'm still stuck on getting the form to appear on the same page where the user clicks the button. Just can't find the right code to make this happen 🤦‍♂️

You can keep code in Code Block in Site Footer, I will check again

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!)

Link to comment

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.