**You may find navigation links only work if you have set up your custom domain name on Dubsado – here’s how to set up custom domains.**
On longer Dubsado forms you may find you want to include ‘navigation’ to help people easily reach other parts of the form. We can do this using a little bit of code, called anchor links. Here’s an example. You can see the navigation at the top and the bottom of the form to allow clients to quickly scroll to certain sections of the form.
Setting up your anchors
The first step is to add your anchors to your Dubsado form. To do this you need to assign an ID to where you’d like the navigation to scroll to.
You will add the following code inside a code block, it can be a fresh code block, or you can simply add it to the top of another code block. Wherever this code block is placed is where the navigation will scroll too.
<div id="sample-anchor"></div>
Make sure to change the ID (sample-anchor) to something that makes sense.
When you add this code to a code block it won’t actually display anything, so once you hit save, it look as if the code block is empty. That’s normal.
If you’re setting up multiple anchors within your form, it’s important each one has a unique ID.
You can technically add an ID to any code that’s within a code block, for example you could create a header in a code block. This would then show up as a header and also work as an anchor point.
<h2 id="sample-anchor">This is a Heading</h2>
Setting up your navigation
There are two main ways to set up your navigation.
Navigation links using Dubsado’s Text Editor
The first way is by simply using the Dubsado Text Editor. Each navigation item is set up as a link. The link format is simply a hashtag followed by the ID that you set up earlier in the anchor link.
So in our example above the navigation link target would simply be #sample-anchor, this is known as a relative URL. You could also add it to a button.
Styling your navigation when using the Dubsado text editor will be more limited than if you’re using a code block, but you can definitely create some beautiful styles just within the editor itself. One option for the styling would be to add your links into a table for some structure.
Navigation links using a code block
To have a little more control over the design of your links you can set them up as a code block and use HTML and CSS to set the layout and style.
You would need to set up a HTML link as in the code below.
<a href="#sample-anchor">Navigation Item</a>
You’d then want to add your own style codes to the link to display the links as you’d like. If you don’t know how to create your links in HTML or style them with CSS, you can check out our free course Beautiful Dubsado Forms, which will teach you everything you need to know!
Pre-made Navigation Styles
If you’d rather someone else does the hard work for you, our Dubsado code snippets have some ready-to-go navigation styles. All you’ll need to do is copy & paste them into your form, update the links and you’re good to go!
