ウェブサイトにContact Form 7などのプラグインを入れて「お問い合わせフォーム」を作るのも面倒。

それならいっそのこと、相手が普段使っているメールフォームからこちらにメールできるようにしよう！

と言う場合の方法をお伝えします。

HTMLとCSSの設定方法

ウェブサイトにボタンを設置するには、HTMLとCSSの設定が必要です。

HTMLとは？CSSとは？

HTML (HyperText Markup Language)とは、ウェブページの「骨格」や「構造」を作るためのマークアップ言語です。例えるなら、家の設計図のようなものです。CSS (Cascading Style Sheets)とは、HTMLで作られたウェブページの「見た目」や「装飾」を定義するためのスタイルシート言語です。例えるなら、家の内装や外装、色、家具の配置などを決めるインテリアデザインのようなものです。

簡単に言えば「HTMLで構造を設定し、CSSで見た目や動きを整える」となります。

世界中で利用されているWordPressでは、このHTMLとCSSで簡単にボタンを設定できます。以下、WordPressにおけるHTMLとCSSを使ったボタンの設置方法を解説します。

HTMLの設定方法

任意の場所にボタンを設定する方法をお伝えします。基本形の制作例を設定することとします。

固定ページ（または投稿ページ）を開いて、任意の場所をクリックし、左側の「カスタムHTML」をクリックします。

以下のようなボックスが任意の場所に挿入されます（お使いのテーマなどで表示形式は違ってきます）

そのボックス内にHTMLのコードを貼り付けて、ページの保存をします。

ページのプレビューなどで確認すると、HTMLのコードが以下のようなリンクに変わります。

お問い合わせ

以上でHTMLの設置は終了ですが、まだCSSの設定がされていないのでボタンの形になっていません。
次はCSSの設置に移ります。

CSSの設定方法

先ほどHTMLを張り付けたページの下部などに、「カスタムCSS設定」といった枠があります（WordPressのテーマなどによって表示場所、形式は異なります）

その枠内にCSSのコードを張り付けて、ページの保存をします。

ページのプレビューなどで確認すると、先ほどは文字だけだったものが、以下のようなボタンになります。

お問い合わせ

以上でHTMLとCSSの設定は完了です。

直接メールクライアントに飛ばすリンクボタンの設置例

※ your‗email@gmail.com　の部分は、ご自身のメールアドレスに変更してください。

【基本形】クリックするとメールクライアントが起動するボタン

【HTML】
<a href="mailto:your‗email@gmail.com">お問い合わせ</a>

上記のHTMLコードをウェブサイトに設置すると、訪問者が「お問い合わせ」と言うボタンをクリックした際に、ユーザーのPCやスマートフォンのデフォルトのメールクライアント（Gmailがデフォルトに設定されていればGmail）が起動し、指定したメールアドレスが「To」フィールドに自動的に入力されたメール作成画面が表示されます。

＜制作例＞

お問い合わせ
【HTML】
<center><a href="mailto:your‗email@gmail.com" class="button01">お問い合わせ</a></center>

【CSS】
.button01 {
  background-color: #fff;
  border: solid 2px #191970;
  color: #191970;
  border-radius: 20px;
  padding: 10px 30px;
  text-decoration: none;
  font-size: 1em;
  box-shadow: 0 5px 0 #191970;
  display: inline-block;
  transition: .3s;
}
.button01:hover {
  color: #191970;
  transform: translateY(5px);
  box-shadow: 0 0 0 #191970;
}

【応用例-1】件名を自動入力する

<a href="mailto:your‗email@gmail.com?subject=ウェブサイトからのお問い合わせ">お問い合わせ</a>

?subject=の後に件名を入力します。

＜制作例＞

お問い合わせ
【HTML】
<center><a href="mailto:your‗email@gmail.com?subject=ウェブサイトからのお問い合わせ" class="button02">お問い合わせ</a></center>

【CSS】
.button02 {
  background-color: #fff;
  border: double 6px #3cb371;
  color: #3cb371;
  border-radius: 10px;
  padding: 10px 30px;
  text-decoration: none;
  font-size: 1em;
}
.button02:hover {
  color: #fff;
  background-color: #3cb371;
}

【応用例-2】本文を自動入力する

<a href="mailto:your‗email@gmail.com?body=お問い合わせ内容をご記入ください:">お問い合わせ</a>

?body=の後に件名を入力します。

＜制作例＞

お問い合わせ
【HTML】
<center><a href="mailto:your‗email@gmail.com?body=お問い合わせ内容をご記入ください:" class="button03">お問い合わせ</a></center>

【CSS】
.button03 {
  display: inline-block;
  background: linear-gradient(to right, #00bfff 0%, #7fffd4 45%, #fffacd 100%);
  background-size: 200% auto;  
  color: #fff;
  border-radius: 20px;
  padding: 10px 30px;
  text-decoration: none;
  font-size: 1em;
  transition: .5s;
}
.button03:hover {
  color: #fff;
  background-position: right center;
}

【応用例-3】件名と本文の両方を自動入力する

<a href="mailto:your‗email@gmail.com?subject=ウェブサイトからのお問い合わせ&body=お問い合わせ内容をご記入ください:">お問い合わせ</a>

上記を使ったボタン設置例

お問い合わせ
【HTML】
<center><a href="mailto:your‗email@gmail.com?subject=ウェブサイトからのお問い合わせ&body=お問い合わせ内容をご記入ください:" class="button04">お問い合わせ</a></center>

【CSS】
.button05 {
  display: inline-block;
  background-image: linear-gradient(45deg, #ff1493 0%, #dda0dd 100%);
  color: #fff;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  line-height: 100px;
  text-align: center;
  font-size: 1em;
  text-decoration: none;
}
.button05:hover {
  color: #fff;
  opacity: 0.6;
}

参考サイト

以下のブログを参照にこちらの記事は作成しています。
多くの作成事例が記載されていますので、是非ご参照してみてください。

https://blog.frankul.net/2022/10/07/button/#toc17

まとめ

プラグインによる詳細なフォームと、mailto:による簡単なメールリンク。どちらにも一長一短があります。

どちらの方法があなたのビジネスにとって最適でしょうか？

「自動でThanksメールを送る機能が必要か？」「お問い合わせ件数を増やすことを優先するか？」など、ウェブサイトの目的に合わせて最適なツールを選び、訪問者の行動を促す導線を作ることが成功の鍵です。

それぞれのシーンにおいて最適な返信ツールを設定したいですね。