Jump to content

Scroll to contact form block via email icon in header

Recommended Posts

  • Replies 11
  • Views 401
  • Created
  • Last Reply

Top Posters In This Topic

You are right – there is no email icon in the header, because I couldn't figure out, how to make it scrollable to the contact form block at the bottom of the same page.

I tried to change a text-link in the header (which scrolls downwards) into a simple envelope-emoji (✉️), which looks not very professional.

I tried also to customize a specific text-link in the header via CSS (with a custom icon), but it looked not right as well.

I would love to use the default header email envelope icon of Squarespace itself.

Edited by KEYdance
Link to comment
On 9/21/2022 at 4:52 PM, KEYdance said:

You are right – there is no email icon in the header, because I couldn't figure out, how to make it scrollable to the contact form block at the bottom of the same page.

I tried to change a text-link in the header (which scrolls downwards) into a simple envelope-emoji (✉️), which looks not very professional.

I tried also to customize a specific text-link in the header via CSS (with a custom icon), but it looked not right as well.

I would love to use the default header email envelope icon of Squarespace itself.

To add email icon, you can add a Link item to Navigation, then we can give the code to change it to email.

To make it scrollable to contact form, in Link item URL, use this url

/#page-section-61ebf61793d4dd4d553a6680

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
On 9/23/2022 at 3:25 PM, KEYdance said:

Thanks for your workaround. I still want to use the default email envelope icon in the header – without opening any mail app or making my email public – so it should scroll down to the contact form.

I've found this video, which shows this idea:

https://youtu.be/W5r2PeInS7M

Or you can enable email, then we will give the code to remove email link from header

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
2 hours ago, tuanphan said:

Or you can enable email, then we will give the code to remove email link from header

Sure – I would love to try … and how do I get scrolled to the bottom of the page (contact form) with this "dead" envelope link?

Did you watch the video? It's on Squarespace version 7.0. Is this feature gone in version 7.1, that the email envelope icon can send me directly to a contact form?

Edited by KEYdance
Link to comment
On 9/23/2022 at 2:46 PM, tuanphan said:

To add email icon, you can add a Link item to Navigation, then we can give the code to change it to email.

To make it scrollable to contact form, in Link item URL, use this url

/#page-section-61ebf61793d4dd4d553a6680

You can add this link to icon. It is contact form ID

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
8 hours ago, tuanphan said:

You can add this link to icon. It is contact form ID

I tried, but it doesn't work.

The email icon envelope link asks for an email-address or social-link-URL. If I fill in your URL, I get a link symbol (see below), which I do not want.

If I fill in my email-address, I get the envelope symbol I want (see below), but it is impossible to make it scrollable to my contact form – instead it opens my mail app (but I don't want to use my email-address).

Hm … still my question: How to make this envelope icon (in headers) scrollable to a contact form (like in the video)?

Thank you for helping!

 

Bildschirmfoto von Google Chrome (26-09-22, 18-42-55).png

Bildschirmfoto von Google Chrome (26-09-22, 18-44-38).png

Edited by KEYdance
Link to comment
16 hours ago, KEYdance said:

I tried, but it doesn't work.

The email icon envelope link asks for an email-address or social-link-URL. If I fill in your URL, I get a link symbol (see below), which I do not want.

If I fill in my email-address, I get the envelope symbol I want (see below), but it is impossible to make it scrollable to my contact form – instead it opens my mail app (but I don't want to use my email-address).

Hm … still my question: How to make this envelope icon (in headers) scrollable to a contact form (like in the video)?

Thank you for helping!

 

Bildschirmfoto von Google Chrome (26-09-22, 18-42-55).png

Bildschirmfoto von Google Chrome (26-09-22, 18-44-38).png

As I said above, you can add email, then we can Give The Code to change email link to scroll link.

 

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.