脱‎Contact Form7！WordPressにプラグインなしでお問合せフォームを実装する方法

脱‎Contact Form7と題して、WordPressにプラグインなしでお問合せフォームを実装する方法を解説していきます。

Contact Form7はワードプレスサイトに「問い合わせフォーム」を設置するためのプラグインで、使用している人も多いと思います。

しかしちょとでも手の込んだカスタマイズをしようとすると結構めんどくさい部分があったりして、それならプラグインを使わずにフォームを設置した方が早かったりします。

メールフォームを実装する

フォーム用のテンプレートファイルを用意する

まずは「mailform」などのスラッグで、固定ページを作成しましょう。

そしてワードプレステーマ内にページテンプレートを用意します。

テンプレートはpage-{slug}.phpのようにすることで、その固定ページ専用のものとして動作します。

例えば固定ページのスラッグがmailformなら、page-mailform.phpというテンプレートファイルを用意すればOKです。

そしてファイルにフォームのHTMLを記載します。

<form action="" method="post">
    <p>お名前</p>
    <input type="text" name="username" />
    <p>メールアドレス</p>
    <input type="email" name="email" />
    <p>お問合せ内容</p>
    <textarea name="content"></textarea>
    <button type="submit">送信する</button>
</form>

この時にactionの属性は記載しなくて構いません。

actionはフォームに入力されたデータの送信先を指定するもので、指定がなければそのまま同一ページのバックグラウンド側で処理が行われます。

function.phpに送信ボタンが押された時の処理を記載する

フォームの送信ボタンが押された時の処理をfunction.phpに記載していきます。

add_action( 'template_redirect', 'mailForm' );
function mailForm() {
    $username = $_POST['username'];
    $email = $_POST['email'];
    $content = $_POST['content'];
    $to = "admin@mail.com";
    $subject = "お問合せがありました";
    $body = "お名前 : {$username}\r\n"
    . "メールアドレス : {$email}\r\n"
    . "お問合せ内容 : {$content}\r\n";
    $fromname = "Contact Form";
    $from = "formsend@mail.com";
    $headers = "From: {$fromname} <{$from}>";
    wp_mail( $to, $subject, $body , $headers);
}

wp_mail()という関数がメール送信を行ってくれるので、そこにフォームのデータを載せれば、自動送信による通知機能がついたお問合せフォームが出来上がります。

ただこれだけだとフォームデータを処理する際にセキュリティ面が心配なので、対策を施していきます。

メールフォームにセキュリティ対策を実施する

ワードプレスにはnonceという不正送信の防止に役立つ機能があるので、これを使いましょう。

<form action="" method="post">
    <?php wp_nonce_field('mailform', 'mailform_nonce') ?>
    <p>お名前</p>
    <input type="text" name="username" />
    <p>メールアドレス</p>
    <input type="email" name="email" />
    <p>お問合せ内容</p>
    <textarea name="content"></textarea>
    <button type="submit">送信する</button>
</form>

そしてfunction.php側にもnonceに対する処置を追加します。

add_action( 'template_redirect', 'mailForm' );
function mailForm() {
    //nonceによるチェック
    if (wp_verify_nonce($_POST['mailform_nonce'], 'mailform')) {
        $username = $_POST['username'];
        $email = $_POST['email'];
        $content = $_POST['content'];
        $to = "admin@mail.com";
        $subject = "お問合せがありました";
        $body = "お名前 : {$username}\r\n"
        . "メールアドレス : {$email}\r\n"
        . "お問合せ内容 : {$content}\r\n";
        $fromname = "Contact Form";
        $from = "formsend@mail.com";
        $headers = "From: {$fromname} <{$from}>";
        wp_mail( $to, $subject, $body , $headers) ;
    }
}

ひとまずこれで、不正送信の発生リスクを抑えてくれます。

もちろんこれだけで完璧ではありません。

さらにエラーチェックやエスケープ処理などを入れていくと、フォームの実用性が上がっていくでしょう。

メールフォームのエラーチェックを行い、実用性を上げていく

エラーチェックで最初にすべきことは、フォームへの入力漏れに対する処置です。

未入力の項目がある場合はエラーで知らせるようにしましょう。

add_action( 'template_redirect', 'mailForm' );
function mailForm() {
    if (wp_verify_nonce($_POST['mailform_nonce'], 'mailform')) {
        //エラーチェック
        if (isset($_POST['username'])) {
            $username = $_POST['username'];
        } else {
            $error['username'] = 'お名前を入力してください';
        }
        if (isset($_POST['email'])) {
            $email = $_POST['email'];
        } else {
            $error['email'] = 'メールアドレスを入力してください';
        }
        if (isset($_POST['content'])) {
            $content = $_POST['content'];
        } else {
            $error['content'] = 'お問合せ内容を入力してください';
        }
        //エラーがなければメール送信
        if ( empty( $error ) ) {
            $to = "admin@mail.com";
            $subject = "お問合せがありました";
            $body = "お名前 : {$username}\r\n"
            . "メールアドレス : {$email}\r\n"
            . "お問合せ内容 : {$content}\r\n";
            $fromname = "Contact Form";
            $from = "formsend@mail.com";
            $headers = "From: {$fromname} <{$from}>";
            wp_mail( $to, $subject, $body , $headers) ;
        }
    }
}

もしエラーがある場合はフォームにその旨を表示してあげます。

<?php global $error; ?>
<form action="" method="post">
    <?php wp_nonce_field('mailform', 'mailform_nonce') ?>
    <p>お名前</p>
    <input type="text" name="username" />
    <?php if (!empty($error['username'])){ echo "<p>" .$error['username'] ."</p>"; } ?>
    <p>メールアドレス</p>
    <input type="email" name="email" />
    <?php if (!empty($error['email'])){ echo "<p>" .$error['email'] ."</p>"; } ?>
    <p>お問合せ内容</p>
    <textarea name="content"></textarea>
    <?php if (!empty($error['content'])){ echo "<p>" .$error['content'] ."</p>"; } ?>
    <button type="submit">送信する</button>
</form>

これで未入力の項目がある時はお問合せ内容が送信できなくなります。

完了ページの表示でユーザーにわかりやすくする

お問合せの送信が完了したことを表示させれば、さらにユーザーに分かりやすいフォームになります。

完了ページの表示は、フォームの処理が終わって最後にページ移動させるようにします。

add_action( 'template_redirect', 'mailForm' );
function mailForm() {
    if (wp_verify_nonce($_POST['mailform_nonce'], 'mailform')) {
        //エラーチェック
        if (isset($_POST['username'])) {
            $username = $_POST['username'];
        } else {
            $error['username'] = 'お名前を入力してください';
        }
        if (isset($_POST['email'])) {
            $email = $_POST['email'];
        } else {
            $error['email'] = 'メールアドレスを入力してください';
        }
        if (isset($_POST['content'])) {
            $content = $_POST['content'];
        } else {
            $error['content'] = 'お問合せ内容を入力してください';
        }
        //エラーがなければメール送信
        if ( empty( $error ) ) {
            $to = "admin@mail.com";
            $subject = "お問合せがありました";
            $body = "お名前 : {$username}\r\n"
            . "メールアドレス : {$email}\r\n"
            . "お問合せ内容 : {$content}\r\n";
            $fromname = "Contact Form";
            $from = "formsend@mail.com";
            $res = wp_mail( $to, $subject, $body , $headers) ;
            //リダイレクト処理
            if ( $res ) {
                wp_safe_redirect( '完了ページのURL' );
            }
        }
    }
}

自動通知メールの送信が成功すると、wp_safe_redirect()によって完了ページのURLにジャンプします。

こうしてお問合せが完了したことを表示すれば、ユーザーも安心ですね。

お問い合わせは単にフォームを設置すればいいわけではなく、問い合わせの履歴を記録・管理するといった他の部分と合わせて運用することが大事です。

‎Contact Form7と一緒に使用することでフォームの機能を強化できるプラグインもあるので、どういうやり方が良いかは、ご自身のサイトに合わせて選択していくと良いでしょう。