wordpress

wordpressでプラグインを使わずにフォームを自作する手順

確認画面用の固定ページを作成する

入力画面の場合と同様に、ページテンプレートの作成と固定ページへの適用という作業で確認画面用の固定ページを作成します。

確認画面用のページテンプレートを作成する

page.phpに、confirm.phpの内容を組み込む形で確認画面用のページテンプレートを作成します。内容は以下のようにします。

twentysixteen-custom/contact/contact-confirm.php
<?php
/**
 * Template Name: contact-confirm
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages and that
 * other "pages" on your WordPress site will use a different template.
 *
 * @package WordPress
 * @subpackage Twenty_Sixteen
 * @since Twenty Sixteen 1.0
 */

////////////////////////////////////////////////////////
 // ここから下がconfirm.phpのソース引用部分
 ////////////////////////////////////////////////////////
 
 // ファイル読み込み
 require_once('common/init.php');

 // セッションデータ取得
$contact_data = isset($_SESSION["contact_data"]) ? $_SESSION["contact_data"] : array();
// セッションデータの有無をチェック
if (count($contact_data) == 0) {
	header("Location: http://localhost:8888/testsite/contact-error/"); // データ取得できない場合はエラー画面へ遷移
	exit;
}

$name = isset($contact_data["name"]) ? $contact_data["name"] : "";
$email = isset($contact_data["email"]) ? $contact_data["email"] : "";
$message = isset($contact_data["message"]) ? $contact_data["message"] : "";

//操作アクションを取得
$act = isset($_POST["act"]) ? intval($_POST["act"]) : 1;

// 送信ボタンを押下された場合
if ($act == 3) {
	// メール送信
	 $result_to_admin = sendMailtoAdmin($contact_data);
	 $result_to_customer = sendMailtoCustomer($contact_data);
	// $result_to_admin = 1;
  // $result_to_customer = 1;


	if ($result_to_admin && $result_to_customer) { // 送信成功
		$_SESSION = array();  // セッションに格納された情報をカラにします。
		header("Location: http://localhost:8888/testsite/contact-done/");
		exit;
	} else { // 送信失敗
		$_SESSION = array();  // セッションに格納された情報をカラにします。
		header("Location: http://localhost:8888/testsite/contact-error/");
		exit;
	}
}

////////////////////////////////////////////////////////
 // ここから上がconfirm.phpのソース引用部分
 ////////////////////////////////////////////////////////

get_header(); ?>

<div id="primary" class="content-area">
	<main id="main" class="site-main" role="main">

  <?php while ( have_posts() ) : the_post(); ?>
    <h1><?php the_title(); ?></h1>
  <?php endwhile; ?>

////////////////////////////////////////////////////////
 // ここから下がconfirm.phpのソース引用部分
 ////////////////////////////////////////////////////////
<div class="page-content">
	<p class="mb30">
		この内容でよろしければ送信するボタンを押してください。<br>
		メールアドレスに間違いがあると回答の返信ができませんので十分にご確認ください。
	</p>

	<form class="form-horizontal" name="contactform" role="form" method="post" action="">
		<table class="table table-bordered confirm">
			<tr>
				<th>お名前</th>
				<td><?php echo htmlspchar($name); ?></td>
			</tr>
			<tr>
				<th>メールアドレス</th>
				<td><?php echo htmlspchar($email); ?></td>
			</tr>
			<tr>
				<th>お問い合わせ内容</th>
				<td><?php echo nl2br(htmlspchar($message)); ?></td>
			</tr>
		</table>

		<div class="btn-area">
			<button type="button" class="btn btn-default" onclick="contactform.action='/testsite/contact/';contactform.submit();">戻る<i class="fa fa-reply"></i></button>
			<button type="submit" class="btn btn-success">送信する<i class="fa fa-envelope-o"></i></button>
			<input type="hidden" name="act" value="3">
		</div>
	</form>

</div>
////////////////////////////////////////////////////////
 // ここから上がconfirm.phpのソース引用部分
 ////////////////////////////////////////////////////////

	</main><!-- .site-main -->

	<?php get_sidebar( 'content-bottom' ); ?>

</div><!-- .content-area -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

上記のコードのコメントに書いているconfirm.phpの引用部分以外の変更点は以下になります。

  • contact-confirm.phpの冒頭でTemplate Name :contact-confirmを記述
  • 以下の部分でエラー画面のURLを指定
  • header("Location: http://localhost:8888/testsite/contact-error/"); // データ取得できない場合はエラー画面へ遷移

    お問い合わせフォームの送信失敗時に表示するエラー画面のURLを指定します。ここで指定したURLをエラー画面用の固定ページ作成時に使います。

  • 以下の部分で完了画面のURLを指定
  • header("Location: http://localhost:8888/testsite/contact-done/");

    お問い合わせフォーム送信完了後に表示する完了画面のURLを指定します。まだ完了画面の固定ページを作成していないので、ここで指定したURLに合わせて完了画面の固定ページを作成します。

  • 上記の95行目で入力画面のURLを指定
  • <button type="button" class="btn btn-default" onclick="contactform.action='/testsite/contact/';contactform.submit();">戻る<i class="fa fa-reply"></i></button>

    上記のように、戻るボタンで戻る先となる固定ページのURLを指定する必要があります。ここでは、入力画面のURLである/testsite/contact/を指定しています。各環境に合わせて変更してください。

なお、このお問い合わせフォームではお問い合わせがあったことを知らせるメールを指定したメールアドレスへ自動送信できます。そしてそのメールアドレスは、contactフォルダ内のcommonフォルダの中にあるinit.phpで設定できるので、各環境に合わせて変更してください。また、同じフォルダ内のutility.phpでは自動送信するメールの内容を返す関数などがあるので、これを修正することで色々とできます。また、validate.phpは入力項目のバリデーション用の関数が記述されています。

上記のcontact-confirm.phpを以下のようにtwentysixteen-customのテーマフォルダに置いて、後は固定ページへ適用します。
add-contact-confirm

確認画面用のページテンプレートを固定ページに適用

以下のように「お問い合わせ内容のご確認」というタイトルで固定ページを新規追加し、作成したcontact-confirm.phpを適用します。以下の画像内の1つ目の赤枠のように、確認画面のURLとしてhttp://localhost:8888/testsite/contact-confirm/を指定しています。なお、当然ながらここで指定したURLはcontact-index.phpで指定した確認画面のURLと同じ必要があります。また、2つ目の赤枠のように「ページ属性」→「テンプレート」で作成したcontact-confirmを適用しています。
set-contact-confirm

そして実際に入力画面からフォーム入力して確認ボタンを押してこの画面にアクセスしてみると、以下のように表示されると思います。なお、contact-confirm.phpの中で、入力内容がない場合はエラー画面に遷移するよう指定しているため、この固定ページをプレビューしてもエラーが表示されてしまいます。
view-confirm

なお、このお問い合わせフォームではバリデーション機能もあり、入力項目が空でないか、メールアドレスの形式が正しいかなどのチェックを行えます。試しに何も入力しない状態で「確認する」ボタンを押すと、以下のようにエラーメッセージが表示されます。
view-validate

続いて完了画面とエラー画面用の固定ページを作成します。

SPONSORED LINK

2 thoughts on “wordpressでプラグインを使わずにフォームを自作する手順

コメントを残す

メールアドレスが公開されることはありません。