Put a mailto link in the header

I have been trying to create a Mailto link in the header navigation of my Future-themed site and I seemingly can’t do it using any built-in page types. Am I missing something? Please help.

Unfortunately RapidWeaver no longer allows you to provide a ‘mailto’ link against an offsite page type, otherwise this solution would’ve been perfect for your needs.

Stacks like ActionHost exist for manimulating links, but these will only work on a Stacks page type; not styled text, blog, markdown or anything like that.

The next solution is to use Javascript to change the link href value dynamically. Certainly not ideal, but it’s probably the best we have to work with.

So add an offsite page type to the website. Give the page a name like “Contact Me” and then give it any random link of like https://example.com/ in the Page Inspector.

Then copy and paste this code into Settings > Code > Body:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		var contactmelink = $('nav a').filter(function(index) { return $(this).text() === "Contact Me"; });
		$(contactmelink).attr("href", "mailto:example@example.com");
	});
</script>

Like this:

This uses jQuery Javascript. It uses the filter method to look through all your links in the navigation menu. It looks for the link specially labeled Contact Me. It replaces the existing href value with the new one, in this case mailto:example@example.com

So hopefully even if you don’t fully understand the code, you can see the parts you might need to change.

Regretfully this solution requires pulling-in the entire jQuery Library from Google APIs. A pure Javascript ‘find and replace’ function would be lighter, but would likely be far more complicated.

If you used a better theme that already loads jQuery (for things like ExtraContent), then you could possibly omit this jQuery call and save yourself about 90KB of code.

As a side note - obfuscate your email address if you want to protect it from spam bots.

-Will.

2 Likes

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.