Scroll to contact form block via email icon in header

Site URL: https://www.tastenweise.de

Hi, is there a way to press the email icon (envelope icon) in the header to send/scroll visitors down to a contact block form? I do not want to open the mail app by pressing the email icon – instead I want a visitor to got scrolled down to my contact block form. Any idea (CSS)? Thanks for helping.

Hi,

Where is email icon? I don't see it on header

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.

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

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

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

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?

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

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!

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!

 

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

12 minutes ago, tuanphan said:

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

 

Okay – I added temporarily an email to my website to try your code – thanks.

@tuanphan: May you help me with your code, please? 🙂