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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

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

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

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

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

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

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

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

国内最大級の広告サービスでエンジニア職

⇒ 今すぐ募集内容をチェック - 株式会社ファンコミュニケーションズ【AD】 -

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

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

<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

- 超快速なワードプレスを運営しませんか?【AD】-

【今すぐ無料プラグインを手に入れる】
無料ダウンロードはこちら

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください