wordpressブログ・コピペでOK!自作問い合わせフォーム

Web開発
この記事は約19分で読めます。

こんにちは、@Manabu です。

今回は、テンプレートファイルにコピペするだけで実装できる問い合わせフォームについて、紹介します。

こちらの情報は自由に使用してもらって大丈夫なので、参考にしてください。

この記事はこんな方にお勧めです。

・WordPressに問い合わせページを実装したい
・その際にプラグインを使用したくない
・入力確認ページ、送信完了ページも一つのテンプレートで完了したい。
ぜひ、参考にして下さい。

テンプレートページを作成

使用されているテーマのディレクトリに”page-contact.php”ファイルを作成し、以下のコードをコピペするだけで実装可能です。

こちらのテンプレート一つで、以下のページも対応できます。

・入力ページ
・入力確認ページ
・送信完了ページ

<?php
/*
Template Name: 問い合わせページ
*/


// 入力された特殊文字の無効化
function e($str){
  return htmlspecialchars($str, ENT_QUOTES, 'UTF-8', false);
}

// メールフォームのバリデーションチェック関数
function validation($data) {
  $error = array();

  //氏名のバリデーション
  if( empty($data['user'])) {
    $error['user'] = "氏名は必ず入力して下さい";
  }

  //メールアドレスのバリデーション
  if( empty($data['mail'])) {
    $error['mail'] = "メールアドレスは必ず入力して下さい";
  }else if (!preg_match("/^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/", $data['mail'])){
    $error['mail'] = "メールアドレスを正しく入力して下さい";
  }

  //題名のバリデーション
  if( empty($data['title'])) {
    $error['title'] = "題名は必ず入力して下さい";
  }

  //お問合せ内容のバリデーション
  if( empty($data['text'])) {
    $error['text'] = "お問合せ内容は必ず入力して下さい";
  }

  return $error;
}

// メール送信処理用の関数
function sendmail($data){

  // PHP5.1.0以上はタイムゾーンの定義が必須
  date_default_timezone_set('Asia/Tokyo');

  // ドメイン(リファラチェックと送信元メールアドレスに利用)
  $domain = home_url()."/contact" ;

  // フォームからのからのデータを取得
  if(isset($data['user'])){ $user = $data['user']; }
  if(isset($data['mail'])){ $mail = $data['mail']; }
  if(isset($data['title'])){ $title = $data['title']; }
  if(isset($data['text'])){ $text = $data['text']; }

  // リファラチェック
  if(strpos($_SERVER['HTTP_REFERER'], $domain) !== false){

    // メールタイトル
    $subject = '件名を入力します';

    //送信先のメールアドレス(複数可能)
    $to = ["test1@gmail.com","test2@gmail.com"];

    // 本文
    $message ='問合せ者情報'."\n\n";
    $message.='お問い合わせ日時:'.date( "Y/m/d (D) H:i:s", time() )."\n";
    $message.='名前:'.$user."\n";
    $message.='メール:'.$mail."\n";
    $message.='題名:'.$title."\n";
    $message.='お問合せ内容:'.$text."\n";

    //メール送信
    wp_mail($to,$subject,$message);
  }
}

// データの初期化
$data = [];
$data['user'] = !empty($_POST['user']) ? e($_POST['user']) : null;
$data['mail'] = !empty($_POST['mail']) ? e($_POST['mail']) : null;
$data['title'] = !empty($_POST['title']) ? e($_POST['title']) : null;
$data['text'] = !empty($_POST['text']) ? e($_POST['text']) : null;

// ページの切り替え
$page_flag = !empty($_POST['page_flag']) ? e($_POST['page_flag']) : 0;

if ($page_flag == 2){
  sendmail($data);
}else if ($page_flag == 1) {
  $error = validation($data);
  if( !empty($error)) {
    $page_flag = 0;
  }
}

if (!is_amp()) {
  get_header();
} else {
  get_template_part('tmp/amp-header');
}
?>

<div class="Form">
<h1>お問合せ</h1>

<?php if ($page_flag == 1) : ?> <!-- 確認ページの内容 -->

  <form id="mailform" method="post" action="">
    <div class="Form-Item">
      <p class="Form-Item-Label">
        <span class="Form-Item-Label-Required">必須</span>氏名
      </p>
      <input type="hidden" name="user" value="<?= $data['user'] ?>">
      <p class="Form-Item-content"><?= $data['user'] ?></p>
    </div>
    <div class="Form-Item">
      <p class="Form-Item-Label">
        <span class="Form-Item-Label-Required">必須</span>メールアドレス
      </p>
      <input type="hidden" name="mail" value="<?= $data['mail'] ?>">
      <p class="Form-Item-content"><?= $data['mail'] ?></p>
    </div>
    <div class="Form-Item">
      <p class="Form-Item-Label">
        <span class="Form-Item-Label-Required">必須</span>題名
      </p>
      <input type="hidden" name="title" value="<?= $data['title'] ?>">
      <p class="Form-Item-content"><?= $data['title'] ?></p>
    </div>
    <div class="Form-Item">
      <p class="Form-Item-Label">
        <span class="Form-Item-Label-Required">必須</span>お問い合わせ内容
      </p>
      <input type="hidden" name="text" value="<?= $data['text'] ?>">
      <p class="Form-Item-content Form-Item-Text"><?= $data['text'] ?></p>
    </div>
    <input type="hidden" name="page_flag" value="2">
    <div class="Form-btn">
      <input type="submit" value="送信 »" class="Form-Btn" name="btn_submit" id="sendmail_btn"> 
      <input type="submit" value="修正 »" class="Form-Btn" name="btn_back" id="back_btn">
    </div>
  </form>

  <script>
    document.addEventListener("DOMContentLoaded", function() {
      // back_btnボタンの要素を取得
      var backButton = document.getElementById("back_btn");

      // back_btnボタンがクリックされた時の処理
      backButton.addEventListener("click", function() {
        var pageFlagInput = document.getElementsByName("page_flag")[0];
        pageFlagInput.value = "0";
      });
    });
  </script>

<?php elseif ($page_flag == 2) : ?> <!-- 完了ページの内容 -->

  <h2>お問い合わせ完了</h2>
  <p class="Form-Item-content">お問い合わせありがとうございます。</p>
  <input type="submit" value="トップページへ »" onclick="location.href='<?= home_url(); ?>'" class="btn_mail">

<?php else : ?> <!-- 入力ページの内容 -->

  <form method="post" action="">
    <div class="Form-Item">
      <p class="Form-Item-Label">
        <span class="Form-Item-Label-Required">必須</span>氏名
      </p>
      <input type="text" name="user" class="Form-Item-Input" value="<?php if (!empty($data['user'])) {echo $data['user'];} ?>" placeholder="例)名前">
    </div>
  <?php if (!empty($error['user'])) { ?>
    <div>
      <p class="error_list"><?= $error['user'] ?></p>
    </div>
  <?php } ?>
    <div class="Form-Item">
      <p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>メールアドレス</p>
      <input type="text" name="mail" class="Form-Item-Input" value="<?php if (!empty($data['mail'])) {echo $data['mail'];} ?>" placeholder="例)example@gmail.com">
    </div>
  <?php if (!empty($error['mail'])) { ?>
    <div>
      <p class="error_list"><?= $error['mail'] ?></p>
    </div>
  <?php } ?>
    <div class="Form-Item">
      <p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>題名</p>
      <input type="text" name="title" class="Form-Item-Input" value="<?php if (!empty($data['title'])) {echo $data['title'];} ?>" placeholder="例)〇〇について">
    </div>
  <?php if (!empty($error['title'])) { ?>
    <div>
      <p class="error_list"><?= $error['title'] ?></p>
    </div>
  <?php } ?>
    <div class="Form-Item">
      <p class="Form-Item-Label isMsg"><span class="Form-Item-Label-Required">必須</span>お問い合わせ内容</p>
      <textarea name="text" class="Form-Item-Textarea"><?php if (!empty($data['text'])) {echo strip_tags($data['text']);} ?></textarea>
    </div>
  <?php if (!empty($error['text'])) { ?>
    <div>
      <p class="error_list"><?= $error['text'] ?></p>
    </div>
  <?php } ?>
    <input type="hidden" name="page_flag" value="1">
    <input type="submit" class="Form-Btn" value="確認 >>" name="btn_confirm">
  </form>

<?php endif; ?>
</div>

<?php
  get_footer();
?>

スタイルの設定

テンプレートページを作成したら、以下のスタイルを”style.css”に追加します。

.Form {
  margin-left: auto;
  margin-right: auto;
  max-width: 720px;
}
@media screen and (max-width: 480px) {
  .Form {
    margin-top: 40px;
  }
}
.Form-Item {
  border-top: 1px solid #ddd;
  padding-top: 24px;
  padding-bottom: 24px;
  width: 100%;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 480px) {
  .Form-Item {
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 16px;
    padding-bottom: 16px;
    flex-wrap: wrap;
  }
}
.Form-Item-Label {
  width: 100%;
  max-width: 248px;
  letter-spacing: 0.05em;
  font-weight: bold;
  font-size: 18px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Label {
    max-width: inherit;
    display: flex;
    align-items: center;
    font-size: 15px;
  }
}
.Form-Item-Label.isMsg {
  margin-top: 8px;
  margin-bottom: auto;
}
@media screen and (max-width: 480px) {
  .Form-Item-Label.isMsg {
    margin-top: 0;
  }
}
.Form-Item-Label-Required {
  border-radius: 6px;
  margin-right: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  width: 48px;
  display: inline-block;
  text-align: center;
  background: #939393;
  color: #fff;
  font-size: 14px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Label-Required {
    border-radius: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    width: 32px;
    font-size: 10px;
  }
}
.Form-Item-Input {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-left: 40px;
  padding-left: 1em;
  padding-right: 1em;
  height: 48px;
  flex: 1;
  width: 100%;
  max-width: 410px;
  background: #eaedf2;
  font-size: 18px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Input {
    margin-left: 0;
    margin-top: 18px;
    height: 40px;
    flex: inherit;
    font-size: 15px;
  }
}
.Form-Item-Textarea {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-left: 40px;
  padding-left: 1em;
  padding-right: 1em;
  height: 216px;
  flex: 1;
  width: 100%;
  max-width: 410px;
  background: #eaedf2;
  font-size: 18px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Textarea {
    margin-top: 18px;
    margin-left: 0;
    height: 200px;
    flex: inherit;
    font-size: 15px;
  }
}
.Form-Btn {
  border-radius: 6px;
  display: block;
  letter-spacing: 0.05em;
  background: #555555 !important;
  color: #fff !important;
  font-weight: bold;
  font-size: 20px;
  margin-top: 30px !important;
}
@media screen and (max-width: 480px) {
  .Form-Btn {
    margin-top: 24px;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 160px;
    font-size: 16px;
  }
}
.error_list{
  color: #ff0000;
  margin-bottom: 10px;
}
.Form-btn{
  display: flex;
}

フォームのスタイルは、以下サイトから情報をいただいています。

問い合わせフォームのデザイン9選!コピペで使えるhtmlとCSSを紹介 | formLab
入力フォームの作り方を中心に、作成後の流れや運用を成功させるコツなどを紹介します。入力フォームの設置でCV率をアップさせたい、できるだけ効果の高いフォームを作りたい方はぜひ参考にしてください。

管理画面から設定

固定ページに、新規ページを追加し「ページの属性」のテンプレートを選択します。
作成した「問い合わせページ」を選択して公開すれば完了です。

まとめ

上記の設定をすることで、自作の問い合わせページを作成することができます。
スタイルなどは、自分のサイトにあった形に変更して下さい。

メールが送信されない場合は、メールサーバーの設定が上手くできていない場合があるので、そちらをよく見るようにして下さい。