Anchor-link in global navigation

I have a big contact form in the bottom of all pages (an extended footer). I would like to have a ‘Contact Us’ anchor link in the navigation that goes to the contact form on the current page: site.com/#contact, site.com/category/page2/#contact etc.

I have tried making a template that just redirects to #/contact, but this doesn’t work as the page made gets its own URL so the link ends up being site.com/contact/#contact

What’s the best/easiest way to do this?

Thanks

You want to jump to an anchor on the page right? You can use this:


    <a href="#your-contact-form">Contact form</a>

Make sure that, when you use this method, the contact form has a `id` attribute of `your-contact-form` (or whatever you want to call it :) ):

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

Thanks, Gerard, but it’s actually not the html I’m struggling with, it’s how to handle this in Kirby’s page structure. When I add a new level 1 page in Panel, it becomes a part of the top navigation. How can I add a link to the top navigation that is an anchor-link.

You can simply add it as an extra list item manually after or before the foreach that loops through the top level pages.

<ul class="navigation" role="navigation">
<?php foreach($pages->visible() as $p): ?>
  <li><a href="<?= $p->url() ?>"><?= $p->title()->html() ?></a><li>
<?php endforeach ?>
  <li><a href="#your-contact-form">Contact us</a></li>
</ul>
3 Likes

Oh, yes, that was simple. Thanks a lot, texnixe!

Even if this is some years old, I would like to add an additional question:

Is there an option to add this in a dynamic way by creating a page with an anchor link somehow? I would like to make the anchor links editable through the backend. Thanks a lot!