mixhost等でのWordPress問い合わせフォームの作り方

けーちゃん

こんにちは、管理人のけーちゃんです。

WordPressに限りませんが、最近は問い合わせページが作成されているWebサイトが多いですね。企業だけでなく、個人サイトでも見受けられます。

以前の問い合わせページは、メールアドレスが記載されているだけでした。今は問い合わせフォームが設置されていて、その場で入力して送信します。

そこでここでは、WordPressに問い合わせフォームを作成して設置する方法をお伝えします。またスパム対策にも言及しています。

私はレンタルサーバーのmixhostを使用しているので、mixhostでの例が含まれますが、他のレンタルサーバーでも参考になるように構成しています。

＼目次も見てね！／

お問い合わせフォームは必須です

WordPressサイトに限らず、個人的なWebサイトなら基本的にはお問い合わせフォームは不要です。ですが何らかの収益を得ることを目的としてWebサイトを運営しているなら、お問い合わせフォームは必須です。

信用を得るために必要

理由は幾つかありますが、一番重要なのが「Webサイトの読者に安心感を与えることができる」という点です。

けーちゃん

あれ？このサイト問い合わせ先がないよ？
詐欺サイトかも？

問い合わせ先が記載されていないWebサイトは、読者に不信感を与えます。問い合わせ先の有無が最後の一押しになることがあるので、お問い合わせフォームは設置しておきましょう。

トラブルを大きくしないために必要

またWebサイトの内容によっては著作権や誹謗中傷などのトラブルに発展することがあります。この際に連絡手段があるなら当事者間の話し合いで終わる可能性がありますが、そうでないなら法的手段でレンタルサーバー事業者等に運営者の情報を求める事態に発展する可能性があります。

ここまでくると相手は本気で怒っているため、訴訟も辞さないでしょう。この点においては、個人ブログでも連絡手段の設置が必要かもしれませんね。

メールアドレス公開は危険

お問い合わせフォーム設置は少し手間に感じるため、メールアドレスを掲載しておけばいいと感じる人もいると思います。

けーちゃん

私も一時期、連絡先としてメールアドレスを公開していました

企業等で既にメールアドレスを公開しているのでなければ、個人的なものでなくても絶対にメールアドレスを記載してはいけません。

一度公開するとスパムメールが頻繁に送信されてきます。重要なメールがスパムの中に埋もれてしまったり、メールサーバーの容量を超過して受信できないなどのトラブルがおきます。

非常にメンドクサイです。

メールアドレスの記載を避けるために、問い合わせフォームを設置しましょう。

メールアドレスを用意する

WordPressに問い合わせフォームを設置する前に、送信元となるメールアドレスを用意します。

mixhostも含めて、メールをサポートしているレンタルサーバーの多くは、WordPressサイトのドメインと同じメールアドレスを作成できます。問い合わせ受付用のメールを用意していないときは、レンタルサーバーでメールアドレスを取得しましょう。

次の記事はmixhostでメールアドレスを取得する方法です。他のレンタルサーバーを使用している場合は、それぞれのマニュアルを確認してください。

なお、WordPressと異なるドメインでも問い合わせ用のメールアドレスとして使用できます。

複数のWebサイトを一つのメールで問い合わせる

複数のWordPressサイトを運営しているときは、それぞれのサイト用の問い合わせメールアドレスを作成するのが正攻法です。しかしサイトの数が増えると、メールの管理が煩雑になります。

けーちゃん

メールボックスを一つ一つ確認するのは、とてもメンドクサイですね

そこで問い合わせ用のメールアドレスを一つだけ作成して、各サイトの問い合わせフォームから作成したメールアドレスを使ってメール送信する方法もあります。

注意点は、メールの本文内にサイト名が自動で入るように設定しておく必要があります。そうしないと、どのサイトの問い合わせか判断できません。意外とあるあるな、設定ミスです。

けーちゃん

このサイト「KcMixh」は、問い合わせページ内で別サイトの問い合わせページにリンクを貼っています。

Webサイト内に問い合わせページを設置しないで、他サイトの問い合わせページにリンクさせるのも方法の一つです。

このケースは自動でサイト名をメールに挿入できません。そのため、読者にサイト名を選択してもらう形になります。

正解は無いので、自分のサイトに合う方法を採用してください。

問い合わせフォームはプラグインで設置

お問い合わせフォームの導入手段は「自分でコードを記述する」「専門業者に依頼する」等があります。これらはオリジナルかつニーズに合わせて最適なチューニングを施した問い合わせフォームを作成できますが、時間や費用がかかるため、個人運営のサイトではおススメできません。

けーちゃん

個人でそこまでしちゃダメ。時間がもったいない。
特に元IT技術者とか要注意。

管理人は問い合わせフォームを一週間かけて自分で作成しました。しかし、後から不具合が見つかって苦労しました。

現在はプラグインをインストールすることで、無料かつ最小限の作業で問い合わせフォームを導入しています。

Contact Form 7について

問い合わせフォームのプラグインでおススメは、「Contact Form 7（コンタクトフォーム7）」です。

Contact Form 7は、現在（2024/7)のところ1000万オーバーのインストール数を誇る、最もメジャーなお問い合わせフォームプラグインです。

けーちゃん

作者名を見ると日本の方のようですね。知りませんでした。

WordPressでメジャーなプラグインは、悪意ある攻撃者の標的になりやすいです。プログラムコードを解析して、開発者の想定外の手段で利益を得ようとします。これを脆弱性と呼んでいるのですが、Contact Form 7はこれまで数回、脆弱性を指摘されています。

しかし、どんなプログラムコードでも認識されていない脆弱性があります。メジャーでないという理由で、第三者が攻撃対象としていないだけです。あるいは、メジャーでないために攻撃されていても発覚していない可能性があります。

Contact Form 7は、脆弱性による攻撃の発覚が速いという点でおススメです。

なお、Google reCAPTCHAを導入することで、脆弱性を対象とした機械的な攻撃を防ぐことができます。

SMTPでメールを送信する

WordPressは、メールアプリと異なる方法でメールを送信します。そのため、問題が発生する可能性があります。

WordPress標準メール機能の問題点

レンタルサーバー等にインストールされたWordPressに組み込まれているメール送信機能を使って、メール送信を行うと、次のような問題がおこる可能性があります。

まれに、メールアプリやWebメールで上記のような現象がおこっているケースがあります。まずは、メールアプリで送信確認をしましょう。

メールアプリでの送信で問題が無いなら、WordPress側の問題です。このようなケースでは、WordPressのメール送信方法を、メールアプリと同じ方法にすることで問題解決できます。

メールアプリはSMTPサーバーに接続してメールを送信します。通常はメールアドレスを作成すると、作成したアドレスでSMTPサーバーを使用できるようになります。

SMTPとは

SMTPは「Simple Mail Transfer Protocol」の頭文字で、メールの送信や転送をおこないます。メールサーバーは受信サーバーと送信サーバーの二つに分けることができますが、SMTPは送信サーバーを指します。本来はSMTPサーバーでの送信が正式な手続きです。WordPressは正式でない方法で送信しているため、迷惑メール判定などの問題がおこります。

WordPressはプラグインを使用することで、メールアプリと同じようにSMTPサーバーを利用できます。

けーちゃん

今回はSMTPプラグインとして「WP Mail SMTP by WPForms」を紹介します

SMTPサーバーの情報が必要

WP Mail SMTP by WPFormsは、事前情報としてSMTPサーバーのドメイン名とポート、ユーザーネームとパスワードが必要です。

これらの情報は、メールアドレスを取得したサーバーで確認できます。

けーちゃん

確認できないときは「レンタルサーバー名 メール設定」で検索しましょう

mixhostのSMTPサーバー情報は次のようになっています。

mixhostは「mail」ですが、SMTPサーバーは「smtp」で始まることが多いです。ポートはサーバーによって異なります。ユーザーネームとパスワードはメールアドレスが使用されることが多いです。

サーバーによっては暗号化方式として「TLS」「SSL」「なし」の３種類が用意されてることがあります。この場合は「TLS」を使用します。mixhostは「TLS」と「SSL」のポートが同じですが、暗号化方式毎に異なるポートが用意されていることが多いです。

お問い合わせフォームの作り方

WordPressにお問い合わせフォームを、次の手順で作成していきます。

「Contact Form 7インストール」⇒「WP Mail SMTP by WPFormsインストール」⇒「Contact Form 7設定」⇒「WP Mail SMTPの設定」⇒「固定ページに設置」⇒「Google reCAPTCHA設定」

Contact Form 7をインストールする

WordPressの管理画面にログインして、Contact Form 7をインストールします。

これでContact Form 7のインストール完了です。

WP Mail SMTP by WPFormsをインストールする

続けて、WP Mail SMTP by WPFormsをインストールします。SMTPサーバーを利用しない場合は、この作業は必要ありません。

これでWP Mail SMTP by WPFormsのインストール完了です。

最後の画面で「Let’s Get Started →」を押すと、WP Mail SMTP by WPFormsの設定画面が表示されます。今回は手順の都合で後回しにしていますが、この時点で設定しても問題ありません。

Contact Form 7を設定する

続けてContact Form 7の設定を行います。

送信先は、メールを受け取る、自分のメールアドレスです。[_site_admin_email]は、一般設定の「管理者メールアドレス」を指します。管理者メールアドレスと異なるメールアドレスで受け取る場合は、値を変更します。

送信元は、メールの送信元となる自分のメールアドレスです。名前 <メールアドレス> の形式で入力します。

送信元にWebサイトと異なるドメインのメールアドレスを指定すると「サイトのドメインに属していないメールアドレスが送信元に設定されています。」と表示されます。これは、WordPressの標準メール機能で送信すると、スパム判定される可能性があるからです。

SMTPサーバーを利用して送信する場合は、無視してかまいません。

けーちゃん

この他の設定については、このページの「Contact Form 7のカスタマイズ方法」で解説します

WP Mail SMTPの設定

次に、WP Mail SMTP by WPFormsを設定します。このプラグインの設定は、事前情報としてSMTPサーバーの情報が必要です。SMTPサーバー情報については、このページの「SMTPサーバーの情報が必要」を参照してください。

ここでは、次の情報を使用して解説します。

情報を確認できたら、次の手順でWP Mail SMTP by WPFormsを設定します。

「返信パス」をオンにすると、メール送信に失敗した時にエラーメールが「送信元メールアドレス」に送信されます。ただし、SMTPサーバーの接続失敗でメール送信できないときはエラーメールも受け取ることができません。

また問い合わせ内容を自動返信している場合、スパム等で存在しないメールアドレスが指定されると、大量のエラーメールを受信する可能性があります。

けーちゃん

とはいえエラー把握は重要です

Google reCAPTCHA設定等でスパム対策をしたうえで、「返信パス」をオンにしておき様子を見ることを推奨します。

手順で触れていない項目は規定値で問題ありません。

Contact Form 7で自動送信先を指定したり、フォームを複数指定するときは、強制使用をオンにしておくと、送信元の入力ミスや変更ミスを防ぐことができます。

固定ページに設置する

Contact Form 7とWP Mail SMTPの設定が完了したら、WordPressの固定ページにContact Form 7を表示させます。

WP Mail SMTP by WPFormsの設定手順で最後の送信テストをクリアしていれば、メーラーで受信できるはずです。

受信できない場合は、Contact Form 7の「メール」タブ内の「送信先」と「送信元」設定を確認してください。

Google reCAPTCHA設定

最後にスパム対策として、Google reCAPTCHAを設定します。Google reCAPTCHAはv2とv3の二つのタイプがあります。

v2とv3の違いは、ユーザーに対応を求めるかどうかです。v2は、必要に応じて画像認証のクイズを出します。v3はユーザーの行動を点数化して、一定の基準でスパム認定します。

Contact Form 7はV3に対応しているため、ここではGoogle reCAPTCHA v3の設定作業をおこないます。

なお、Google reCAPTCHAはGoogleアカウントが必要です。あらかじめ取得しておいてください。

サイトキーとシークレットキーの入手

Google reCAPTCHAをWebサイトに適用するために、サイトキーとシークレットキーを入手します。

上記の手順ではラベルにドメインを入力していますが、後で使用目的を判断できるような名前であれば任意の文字でかまいません。

Contact Form 7とGoogle reCAPTCHAを連携させる

Google reCAPTCHAのサイトキーとシークレットキーを入手できたら、Contact Form 7にキーを登録します。

設定後にWebページをブラウザで表示すると、画面右下に次のマークを表示されます。

再度、問い合わせ画面からメール送信をおこなって、メールソフトで受信できるかどうかをテストしてください。

不必要なスクリプトの削除

Contact Form 7は、問い合わせページとサーバーとのやりとりをおこなうために、スクリプトファイルをブラウザで読み込んでいます。

これは必要なファイルのため欠かすことができませんが、問い合わせフォームが設置されていないページでも読み込んでいます。ムダなスクリプトファイルはページの表示速度低下の原因になり、SEOの観点からも可能な限り排除すべきです。

次のコードを、function.phpまたはプラグインに記述することで、不必要なスクリプトをページから削除できます。

add_action( 'wp_enqueue_scripts', function (){
      // 固定ページのスラッグがcontactではない
    if(!is_page( 'contact' )){
    	  // CSSファイルを削除
	wp_deregister_style('contact-form-7');
	  // JavaScriptファイルを削除
        wp_deregister_script('contact-form-7');
        wp_deregister_script('google-recaptcha');
    }
},999);

上記のコードは投稿名（リンク、パーマリンク、スラッグ）が、「contact」の固定ページ以外から、スクリプトを削除しています。問い合わせページの投稿名が異なる場合は、3行目の ‘contact’ を書き換えてください。

けーちゃん

上記のコードをプラグイン化しました

コード記述が難しい人は、次のzipファイルをダウンロードしてWordPressにインストールしてみてください。

単純なコードなので問題ないと思いますが…念のため、免責事項を記述しておきます。
※免責事項：このプラグイン使用によるいかなる損害についても、当方は一切の責任を負いません。

日本語のメールに限定する方法

Google reCAPTCHA v3を導入しても、単発の迷惑な問い合わせを排除できません。機械的なスパム行為には強いですが、通常の手順での迷惑メール送信は判定できないからです。

迷惑な問い合わせは日本語以外の言語が使用されることが多いです。また、日本向けサイトの運営者は、次のような人が多いと思います。

けーちゃん

日本語だけでいいです
というか外国語の問い合わせをもらっても困る

そこで、日本語以外の問い合わせは受け付けないようにContact Form 7をカスタマイズしましょう。

具体的には問い合わせ本文内のひらがなの数をカウントして、規定数以下だったら受付を拒否します。

次のコードを、function.phpまたはプラグインに記述してください。

add_filter('wpcf7_validate_textarea', 'contact_form_hiragana_check_validate', 10, 2);
add_filter('wpcf7_validate_textarea*', 'contact_form_hiragana_check_validate', 10, 2);

function contact_form_hiragana_check_validate($result, $tag){
    $hiragana_num = 5; // ひらがなが数値以下なら受け付けない
    $check_name = 'your-message'; // 本文タグの名前 

    $tag_name = $tag['name'];
    if($check_name !== $tag_name) return $result;

    $value = (isset($_POST[$tag_name])) ? (string) $_POST[$tag_name] : '';
 
    if ( (int)preg_match_all('/[ぁ-ん]/u', $value) < $hiragana_num ) {
        $result['valid'] = false;
        $result['reason'] = array(
            $tag_name => 'ひらがなを'.$hiragana_num.'文字以上入力してください。'
        );
    }
    return $result;
}

このコードは、ひらがなの数が5個未満のときに問い合わせ画面にエラー表示して、送信を拒否します。

けーちゃん

上記のコードをプラグイン化しました

コード記述が難しい人は、次のzipファイルをダウンロードしてWordPressにインストールしてみてください。

初期状態の問い合わせ画面は、本文欄に「メッセージ本文 (任意)」と表示されますが、このプラグインにより入力必須になります。コンタクトフォームの編集画面で、表記を変更しておきましょう。

変更例：

けーちゃん

textarea を textarea* に変更すると、入力必須項目になります

Contact Form 7のカスタマイズ方法

自動返信メールの設定

問い合わせ者に受付確認メールを送信するときは、自動返信メールの設定を行います。

メッセージの変更

問い合わせ完了時に表示されるメッセージなどを、既定のものからオリジナルのものに変更できます。

メッセージタブを開いて、規定メッセージを変更してください。

変更したら「保存」を押して、登録します。

入力項目を増やす

コンタクトフォームのフォームタブを編集することで、問い合わせ画面をカスタマイズできます。

新しい項目を追加するときは、追加した位置にカーソルを置き、情報のボタンを押します。

項目の種類毎に、異なるフォームタグ生成画面が表示されます。次の画面は、「テキストエリア」のフォームタグ生成画面です。

「必須項目」のチェックボックスにチェックを入れると、空欄での送信を拒否できます。

「このテキストを項目のプレースホルダ―として使用する」にチェックを入れると、文字入力時にデフォルト値を上書きします。

「ID属性」と「クラス属性」は、WebページのhtmlタグにIDとクラス属性を出力します。cssで項目の表示スタイルを個別に変更したいときなどに使用します。

けーちゃん

入力項目はタイプによって異なるので、実際に設置して変化を確認してください

項目で一番重要なのが「名前」です。

メールタブに、「名前」を [ ] で囲ったものを入力すると、メール内に入力内容が反映されます。

編集が終わったら忘れずに「保存」を押しましょう。

まとめ

ここでは、WordPressに問い合わせフォームを設置する方法についてお伝えしました。

問い合わせの手段が無いWebサイトは信用されません。また連絡手段が無いことで、大きなトラブルへと発展する可能性があります。

まだ問い合わせフォームを設置していない人は、ぜひWebサイトに設置してみてください。