mailto into mailto into mailto

56 Views Asked by At

I'm struggling with a simple task/workflow-system based on a contact form.

The only thing I want to do is to send an e-mail to a predefined recipient with a button with "Accept" and the automatic link to a new e-mail. This works so far, but now the sent e-mail should also contain this button with the linked mailto and go to another predefined sender. The whole thing should be able to be repeated two or three more times. In other words, an email should be generated from the email, which then generates another email. A chain of emails. Unfortunately, the problem is that even the second mailto link destroys the whole process. Image and code attached. The whole thing should function as a lightweight task system/approval system for a non-profit organisation.

Inside the html are some shortcodes { } from the online form with the content.

Does anyone have an idea how I could solve the problem? Or an idea which tool I could use to do this?

Annotated screenshot of rendered HTML

<a href="mailto:[email protected]?subject=Best%C3%A4tigung%20Ehrung%3A%20f%C3%BCr%20{element|id:17|Vorname des zu...enden Mitglieds}%20{element|id:18|Nachname des z...enden Mitglieds}%20{element|id:20|Auswahl des Verdienstorden}
&body=Sehr%20geehrter%20Herr%20Pr%C3%A4sident%2C%20%20%0A%20%0A%20%20%0Ahiermit%20bitte%20ich%20um%20Freigabe%20der%20Ehrung.%20Ich%20habe%20die%20Voraussetzungen%20nach%20meinen%20Mitteln%20gepr%C3%BCft%20und%20Best%C3%A4tige%20diese.%20%20%20%0A%20%0A%20%0AAnbei%20die%20Daten%20zur%20Ehrung%3A%20%20%0A%20%0A%20%0AMitgliedsnummerverein%3A%20{element|id:3|Mitgliedsnummer}  %20%0ABezirk%3A%20{element|id:43|Bezirk} %20%0AName%20des%20Vereins%3A%20{element|id:4|Name des Vereins%20%20%0AE-Mail-Antragsteller%3A%20%20%20%20%0AName%20Antragsteller%3A%20{element|id:5|Vorname Antragsteller}%20{element|id:6|Nachname Antragsteller}  %20%0ATelefon%20Antragsteller%3A%20{element|id:29|Telefonnummer Antragsteller} %20%0A%0AVersandadresse%20f%C3%BCr%20den%20Orden%3A%20{element|id:33|Straße}{element|id:35|PLZ}{element|id:34|Hausnummer}{element|id:36|Ort}%0A%0AZu%20ehrendes%20Mitglied%3A%0AName%3A%20{element|id:17|Vorname des zu...enden Mitglieds}{element|id:18|Nachname des z...enden Mitglieds}%20%0AVereinszugeh%C3%B6rigkeit%3A%20{element|id:13|Name des Verei...enden Mitglieds} 
%0A%0AVereinzugeh%C3%B6rigkeit%20in%20Jahren%3A%20{element|id:39|Zugehörigkeit Verein in Jahren%20%0AAmt%3A%20{element|id:42|Ausgeführtes Amt/Ämter}%20%0AWelche%20Ehrung%3A%20{element|id:20|Auswahl des Verdienstorden}%20%20%0A%0AVoraussetzungen%20erf%C3%BCllt%3F%3A%20Erf%C3%BCllt%20%20%0A%0A%0AJahr%20der%20letzten%20Ehrung%3A%20{element|id:27|Jahr der Ehrung}%20%20%0A%0A%0AZus%C3%A4tzliche%20Informationen%20{element|id:38|Zuästzliche Informationen}
<a href="mailto:[email protected]?subject=Best%C3%A4tigung%20Ehrung%3A%20f%C3%BCr%20{element|id:17|Vorname des zu...enden Mitglieds}%20{element|id:18|Nachname des z...enden Mitglieds}%20{element|id:20|Auswahl des Verdienstorden}
&body=Sehr%20geehrter%20Herr%20Pr%C3%A4sident%2C%20%20%0A%20%0A%20%20%0Ahiermit%20bitte%20ich%20um%20Freigabe%20der%20Ehrung.%20Ich%20habe%20die%20Voraussetzungen%20nach%20meinen%20Mitteln%20gepr%C3%BCft%20und%20Best%C3%A4tige%20diese.%20%20%20%0A%20%0A%20%0AAnbei%20die%20Daten%20zur%20Ehrung%3A%20%20%0A%20%0A%20%0AMitgliedsnummerverein%3A%20{element|id:3|Mitgliedsnummer}  %20%0ABezirk%3A%20{element|id:43|Bezirk} %20%0AName%20des%20Vereins%3A%20{element|id:4|Name des Vereins%20%20%0AE-Mail-Antragsteller%3A%20%20%20%20%0AName%20Antragsteller%3A%20{element|id:5|Vorname Antragsteller}%20{element|id:6|Nachname Antragsteller}  %20%0ATelefon%20Antragsteller%3A%20{element|id:29|Telefonnummer Antragsteller} %20%0A%0AVersandadresse%20f%C3%BCr%20den%20Orden%3A%20{element|id:33|Straße}{element|id:35|PLZ}{element|id:34|Hausnummer}{element|id:36|Ort}%0A%0AZu%20ehrendes%20Mitglied%3A%0AName%3A%20{element|id:17|Vorname des zu...enden Mitglieds}{element|id:18|Nachname des z...enden Mitglieds}%20%0AVereinszugeh%C3%B6rigkeit%3A%20{element|id:13|Name des Verei...enden Mitglieds} 
%0A%0AVereinzugeh%C3%B6rigkeit%20in%20Jahren%3A%20{element|id:39|Zugehörigkeit Verein in Jahren%20%0AAmt%3A%20{element|id:42|Ausgeführtes Amt/Ämter}%20%0AWelche%20Ehrung%3A%20{element|id:20|Auswahl des Verdienstorden}%20%20%0A%0AVoraussetzungen%20erf%C3%BCllt%3F%3A%20Erf%C3%BCllt%20%20%0A%0A%0AJahr%20der%20letzten%20Ehrung%3A%20{element|id:27|Jahr der Ehrung}%20%20%0A%0A%0AZus%C3%A4tzliche%20Informationen%20{element|id:38|Zuästzliche Informationen}
%20%20">Freigabe</a>
 
%20%20">Freigabe</a>
1

There are 1 best solutions below

2
Álvaro González On

I can't conceive what use case this design can possibly address, but mailto: URLs are the least reliable way to have email delivered, and you want to pile up several nested levels for HTML messages. This is more or less the equivalent of using cardboard to build a railway suspension bridge. So short answer is: please don't!

Said that, it looks like a funny abuse so let's see how to do it. Two notes:

  1. I'll be using PHP to emulate this because I'm not masochistic, but I guess this can be done with pen and paper and typed directly in your HTML editor.

  2. I'm using runnable snippets to provide source and clickable links, but they won't work unless you open links in a new tab (typically done with middle click) because it's a sandboxed iframe.

We'll start with some research about the format. It doesn't explicitly mention a way to send HTML, but it says "any standard mail header fields can be added to the mailto URL you provide". So we can try and see what happens:

$to = '[email protected]';
$headers = [
    'Subject' => 'This is a test',
    'Content-Type' => 'text/html',
    'body' => '<a href="https://www.google.com/">Open Google</a>'
];
printf(
    '<a href="mailto:%s?%s">Email link</a>',
    htmlspecialchars($to),
    htmlspecialchars(http_build_query($headers))
);

This renders:

<a href="mailto:[email protected]?Subject=This+is+a+test&amp;Content-Type=text%2Fhtml&amp;body=%3Ca+href%3D%22https%3A%2F%2Fwww.google.com%2F%22%3EOpen+Google%3C%2Fa%3E">Email link</a>

I only have Gmail to test and it doesn't work at all for me:

Gmail composer screenshot that shows HTML tags as plain text

I've also tried providing a full HTML document with, to no avail. It's possible that some other email client behaves differently and honours the HTML formatting. But, well, this is the magic of mailto:, it's up to visitor's locally available email client to decide what works and what doesn't.

For the sake of science, let's assume there's some email client that will render HTML. Then, we just need to nest our links. Will move previous code to a function and chain several calls:

function generateMailtoLink(string $to, string $subject, string $body): string
{
    $headers = [
        'Subject' => $subject,
        'Content-Type' => 'text/html',
        'body' => $body,
    ];
    return sprintf(
        '<a href="mailto:%s?%s">Email link</a>',
        htmlspecialchars($to),
        htmlspecialchars(http_build_query($headers))
    );
}

$link = '<a href="https://www.google.com/">Open Google</a>';
for ($i = 0; $i < 5; $i++) {
    $link = generateMailtoLink('[email protected]', 'Test subject', $link);
}

echo $link;

Output:

<a href="mailto:[email protected]?Subject=Test+subject&amp;Content-Type=text%2Fhtml&amp;body=%3Ca+href%3D%22mailto%3Atest%40example.com%3FSubject%3DTest%2Bsubject%26amp%3BContent-Type%3Dtext%252Fhtml%26amp%3Bbody%3D%253Ca%2Bhref%253D%2522mailto%253Atest%2540example.com%253FSubject%253DTest%252Bsubject%2526amp%253BContent-Type%253Dtext%25252Fhtml%2526amp%253Bbody%253D%25253Ca%252Bhref%25253D%252522mailto%25253Atest%252540example.com%25253FSubject%25253DTest%25252Bsubject%252526amp%25253BContent-Type%25253Dtext%2525252Fhtml%252526amp%25253Bbody%25253D%2525253Ca%25252Bhref%2525253D%25252522mailto%2525253Atest%25252540example.com%2525253FSubject%2525253DTest%2525252Bsubject%25252526amp%2525253BContent-Type%2525253Dtext%252525252Fhtml%25252526amp%2525253Bbody%2525253D%252525253Ca%2525252Bhref%252525253D%2525252522https%252525253A%252525252F%252525252Fwww.google.com%252525252F%2525252522%252525253EOpen%2525252BGoogle%252525253C%252525252Fa%252525253E%25252522%2525253EEmail%25252Blink%2525253C%2525252Fa%2525253E%252522%25253EEmail%252Blink%25253C%25252Fa%25253E%2522%253EEmail%2Blink%253C%252Fa%253E%22%3EEmail+link%3C%2Fa%3E">Email link</a>

As I said, it doesn't work for me so I cannot test it directly. But I'll verify indirectly by using Stack Overflow runnable snippets to run each HTML version, clicking in links and grabbing the HTML from Gmail body:

<a href="mailto:[email protected]?Subject=Test+subject&amp;Content-Type=text%2Fhtml&amp;body=%3Ca+href%3D%22mailto%3Atest%40example.com%3FSubject%3DTest%2Bsubject%26amp%3BContent-Type%3Dtext%252Fhtml%26amp%3Bbody%3D%253Ca%2Bhref%253D%2522mailto%253Atest%2540example.com%253FSubject%253DTest%252Bsubject%2526amp%253BContent-Type%253Dtext%25252Fhtml%2526amp%253Bbody%253D%25253Ca%252Bhref%25253D%252522mailto%25253Atest%252540example.com%25253FSubject%25253DTest%25252Bsubject%252526amp%25253BContent-Type%25253Dtext%2525252Fhtml%252526amp%25253Bbody%25253D%2525253Ca%25252Bhref%2525253D%25252522https%2525253A%2525252F%2525252Fwww.google.com%2525252F%25252522%2525253EOpen%25252BGoogle%2525253C%2525252Fa%2525253E%252522%25253EEmail%252Blink%25253C%25252Fa%25253E%2522%253EEmail%2Blink%253C%252Fa%253E%22%3EEmail+link%3C%2Fa%3E">Email link</a>

<a href="mailto:[email protected]?Subject=Test+subject&amp;Content-Type=text%2Fhtml&amp;body=%3Ca+href%3D%22mailto%3Atest%40example.com%3FSubject%3DTest%2Bsubject%26amp%3BContent-Type%3Dtext%252Fhtml%26amp%3Bbody%3D%253Ca%2Bhref%253D%2522mailto%253Atest%2540example.com%253FSubject%253DTest%252Bsubject%2526amp%253BContent-Type%253Dtext%25252Fhtml%2526amp%253Bbody%253D%25253Ca%252Bhref%25253D%252522https%25253A%25252F%25252Fwww.google.com%25252F%252522%25253EOpen%252BGoogle%25253C%25252Fa%25253E%2522%253EEmail%2Blink%253C%252Fa%253E%22%3EEmail+link%3C%2Fa%3E">Email link</a>

<a href="mailto:[email protected]?Subject=Test+subject&amp;Content-Type=text%2Fhtml&amp;body=%3Ca+href%3D%22mailto%3Atest%40example.com%3FSubject%3DTest%2Bsubject%26amp%3BContent-Type%3Dtext%252Fhtml%26amp%3Bbody%3D%253Ca%2Bhref%253D%2522https%253A%252F%252Fwww.google.com%252F%2522%253EOpen%2BGoogle%253C%252Fa%253E%22%3EEmail+link%3C%2Fa%3E">Email link</a>

<a href="mailto:[email protected]?Subject=Test+subject&amp;Content-Type=text%2Fhtml&amp;body=%3Ca+href%3D%22https%3A%2F%2Fwww.google.com%2F%22%3EOpen+Google%3C%2Fa%3E">Email link</a>

<a href="https://www.google.com/">Open Google</a>