Allow '&' Character in mailto href links

Question

I have an email mailto href link, and when I use a & character in the subject, this prevents any code rendering after this ampersand in the email subject line. ie Oil & Gas , just shows as Oil .

Under normal conditions I would just change the & to the word and , but the subject line is dynamically generated via post titles in Wordpress.

Does anyone know how I can prevent the subject line breaking, or in other words how I can get the & to show as a text character?

A stripped out version of the code is below:

<a href="mailto:joe@example.com?subject=Oil&Gas">Apply</a>

Although in the HTML of the site this is pulled in using:

<a href="mailto:<?php echo $author_email;?>?subject=<?php the_title(); ?>">Apply</a>

Any help or ideas would be fabulous and I'm not sure if this will be html, php or Javascript solution?

Answer 1

You can escape the string so it's safe to use, using the urlencode function, like so:

<a href="mailto:<?php echo $author_email;?>?subject=<?php echo urlencode(the_title()); ?>">Apply</a>

urlencode PHP DOC

Answer 2

You need to urlencode() the title.

<?php
$title = "Gas&Oil";
?>
<a href="mailto:a@mail.com?subject=<?= urlencode($title); ?>">Apply</a>

Demo

Also, since the_title() echos the title by default you need to use get_the_title() , otherwise urlencode() will have no effect. You can see this simulated here:

<?php
function the_title() {
    echo "Gas & Oil";
}
function get_the_title() {
    return "Gas & Oil";
}
?>
<a href="mailto:a@mail.com?subject=<?=urlencode(the_title()); ?>">Apply</a><br> <!-- doesn't work -->
<a href="mailto:a@mail.com?subject=<?=urlencode(get_the_title()); ?>">Apply</a> <!-- works -->

Demo

However, this will encode the whole title, changing other characters that you don't necessarily need encoded. So, to avoid this, only replace & for %26 :

<a href="mailto:a@mail.com?subject=<?=str_replace("&", "%26", the_title()); ?>">Apply</a><br> <!-- doesn't work -->
<a href="mailto:a@mail.com?subject=<?=str_replace("&", "%26", get_the_title()); ?>">Apply</a> <!-- works -->

Answer 3

Try replacing the ampersand with either "%26" or "&":

<a href="mailto:<?php echo $author_email;?>?subject=<?php str_replace('&', '%26', the_title()); ?>">Apply</a>

Answer 4

<a href="mailto:<?php echo $author_email;?>?subject=<?php echo str_replace('&amp;','%26',rawurlencode(htmlspecialchars_decode(the_title()))); ?>">Apply</a>

Use PHP combination: str_replace('&','%26',rawurlencode(htmlspecialchars_decode(the_title())));

Answer 5

The issue is that the & character needs to be escaped in a URL as & is treated as a control character.

You can escape it by using HTML encoding. For example, & is a & character, and &nbsp is a non-breaking space.

In JavaScript you can use "encodeURIComponent" for subject and body. Then it will show all special characters in email.

Example:

    const emailRequest = {
            to: "abc@xyz.com",
            cc: "abc@xyz.com",
            subject: "Email Request - for <CompanyName>",
            body: `Hi All, \r\n \r\n This is my company <CompanyName> 
            \r\n Thanks
        }

    const subject = encodeURIComponent(emailRequest.subject.replace("<CompanyName>",'ABC & ** Company'));
    const body = encodeURIComponent(emailRequest.body .replace("<CompanyName>", 'ABC & ** Company'));

    window.location.href = (`mailto:${emailRequest.to}?cc=${emailRequest.cc}&subject=${subject}&body=${body}`);