Pre-Populating the Contact Form with Head Tag

System - Head Tag powers countless features across this site, often in ways you’d never notice—until now! One clever trick happens on all my extension pages: the "Bug Report" buttons auto-fill the contact form subject field, thanks to Head Tag. This simple, two-part setup takes just 5 minutes, using Joomla’s built-in contacts extension—no modifications or overrides needed. Here’s how you can do it too!

The Link and the First Script

Step 1: Create the Link with a Data Attribute

Start by adding a link to your contact form in your article. In Joomla’s editor, go to CMS Content > Contacts, pick your contact, and insert the link. Here’s an example URL (pre-routing) for my bug report page:

<a href="/component/contact/?amp;view=contact&amp;id=1&amp;catid=4">Bug Report</a>

Now, add a custom data attribute to pass the subject:

data-bug-subject="Super-Wham-o-Dyne Subject"

Your updated link becomes:

<a href="/component/contact/?amp;view=contact&amp;id=1&amp;catid=4" data-bug-subject="Super-Wham-o-Dyne Subject"
>Bug Report</a>

And that's it for the link - super easy, barely an inconvenience!

Step 2: Inject the First Script to Encode the Subject

Next, we’ll use Head Tag to inject a script that encodes the subject and appends it to the URL. For my site, I applied this to all pages under the "Software" menu, including child pages, but you can target your entire site or specific access levels (e.g., Public users) depending on your needs.

For me, I used it in a menu item, so that's how I'm going to describe it to you.

Open System - Head Tag
Navigate to the Menu Item Tags tab and click the + icon to create a new item
Select your menu item (e.g., "Software" for me), and check "Children" to include subpages (or choose an access level for broader coverage).
I wanted it to apply to all child menus (and pages), so I checked the "Children" checkbox.
I chose the Type as "Script Declaration"
Insert this script

window.addEventListener('DOMContentLoaded',()=>{
    let bug = document.querySelector('a.btn[data-bug-subject]');
    if(bug){
        bug.href += '#' + btoa(bug.dataset.bugSubject);
    }
});

This script runs on page load, finds the link with the data-bug-subject attribute, encodes the subject using btoa(), and appends it as a hash to the URL (e.g., #encoded-subject). Check the source of this page—it’s there, condensed to one line!

The Second Script

Step 3: Add the Second Script to Populate the Contact Form

Now, let’s inject a script on the contact form page to grab the encoded subject and fill the form’s subject field—no form modifications needed!

Follow these steps:

Return to System - Head Tag and the Menu Item Tags tab.
Click the + icon to create another item.
Select the menu item for your contact form (e.g., "Bug Reports").
Set the Type to "Script Declaration".
Insert this script:

window.addEventListener('DOMContentLoaded',function(){
    if(window.location.hash.length) {
        var subject = atob(window.location.hash.replace('#',''));
        document.getElementById('jform_contact_emailmsg').value = subject;
    }
});

Here’s what happens: on page load, the script checks for a URL hash (e.g., #encoded-subject). If found, it decodes the hash back to the original subject using atob() and populates the form’s subject field (jform_contact_emailmsg). It’s that simple!

Why It’s Awesome

With just two scripts and a data attribute, you’ve created a multi-use contact form that pre-fills subjects dynamically—no overrides, no hassle. This setup showcases the power and flexibility of "System - Head Tag," letting you enhance user experiences effortlessly. Imagine the possibilities: from form tweaks to site-wide scripts, Head Tag unlocks endless creativity. Try it out, and I bet you’ll soon be teaching me new tricks!

Examples