メーラーを立ち上げる「mailto:」に件名と本文を差し込む方法

ワードプレスでは「Contact Form 7」を導入すればカンタンにお問い合わせフォームを設置可能です。ただ、状況や仕様によってはお問い合わせフォームではなくて「クリックで閲覧者側のメーラー（メールソフト）を立ち上げたい」といったシチュエーションがあります。ウェブサイトから手軽にお問い合わせしてもらうための１つにクリックでメールを立ち上げる方法があるので本日は解説させていただきます。

メーラーを立ち上げる「mailto:」に件名と本文を差し込む方法

htmlではリンク（aタグ）に「mailto:」を差し込むと来訪者がクリックした際にメールソフトを起動可能です。

<a href="mailto:info@example.com">メールでのお問い合わせはこちら</a>

ちなみに一般的なリンクは以下です。

<a href="/sample">サンプルページに移動する</a>

リンク先の書き方を「mailto:」とするだけで、指定したメールアドレスあてにメールを送る準備ができます。さらに「mailto:」には他にもオプションが準備されています。

件名をあらかじめ仕込む方法

件名を設定するときは以下の書き方にしてください。

<a href="mailto:info@example.com?subject=件名を入力">メールでのお問い合わせはこちら</a>

本文をあらかじめ仕込む方法

本文を設定するときは以下の書き方です。

<a href="mailto:info@example.com?body=本文を指定できます">メールでのお問い合わせはこちら</a>

件名と本文を同時に指定する場合の書き方

もし件名と本文を一緒に仕込む際は以下となります。

<a href="mailto:info@example.com?subject=件名を指定&body=本文を指定">メールでのお問い合わせはこちら</a>

差し込んだ文字が化けてしまう場合の対策

上記の手順通りに件名や本文に「日本語を差し込む」とクリックする環境によっては「文字化け」という現象が発生する場合があります。理由は「aタグ」の処理方法はブラウザに依存しているからです。subjectやbodyを正しく処理できないブラウザに対しては文字化けしないようにエスケープ処理をしなければなりません。

もし『サンプル』という文字をエスケープした場合は以下となります。

%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB

エスケープしたあとは「パーセントや英文字や数字」の組み合わせになるのでかなり長くなります。つまり本文に「サンプル」という文字を仕込みたかったら以下のように書く必要があります。

<a href="mailto:info@example.com?body=%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB">メールでのお問い合わせはこちら</a>

文字化けを考慮しない場合は以下の書き方です。

<a href="mailto:info@example.com?body=サンプル">メールでのお問い合わせはこちら</a>

実際に「文字化けが発生するかどうか」はクリックする利用者をどこまで想定するかに左右されます。SafariやChromeなど『優秀なブラウザでの使用を前提とする』ならエンコードする必要もありません。

まとめ

本日ご紹介した内容では「お問い合わせフォームを設置しない場合」に使えます。htmlのaタグに使えるオプション「mailto:」なら手軽に設置できます。さらに「aタグ」のなかには「件名や本文を仕込める」ので利用者を悩ませることなくメールを送信してもらえます。この機会にぜひお試しくださいませ。

▼日本語をエスケープするためのエンコードツールはこちら
https://tech-unlimited.com/urlencode.html