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