wordpress

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

完了画面用の固定ページを作成する

入力画面、確認画面と同じ手順で完了画面用の固定ページを作成します。

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

ページテンプレートのファイル名はcontact-done.phpとして、以下のようにします。

twentysixteen-custom/contact/contact-done.php
<?php
/**
 * Template Name: contact-done
 *
 * 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
 */

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

////////////////////////////////////////////////////////
 // ここから上がdone.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; ?>

////////////////////////////////////////////////////////
 // ここから下がdone.phpのソース引用部分
 ////////////////////////////////////////////////////////
<div class="page-content">
    <p class="mb30">
		お問い合わせを送信しました。<br>
		改めて担当者からご連絡を差し上げます。今しばらくお待ちくださいませ。
	</p>
</div>
////////////////////////////////////////////////////////
 // ここから上がdone.phpのソース引用部分
 ////////////////////////////////////////////////////////

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

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

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

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

完了画面は特に修正点はなく、単純にdone.phpの一部をpage.phpに追加しただけになります。
以下のようにcontact-done.phpをtwentysixteen-customのテーマフォルダに置いて、後はwordpressの管理画面から固定ページへ適用します。
add-contact-done

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

以下のように「お問い合わせありがとうございました」というタイトルで固定ページを新規追加し、固定ページのURLはhttp://localhost:8888/testsite/contact-done/、テンプレートをcontact-doneにしています。
set-contact-done

そして実際にこの固定ページにアクセスしてみると、以下のように表示されると思います。
view-done

あとはエラー画面用の固定ページを作成して完了です。

エラー画面用の固定ページを作成する

最後にエラー画面用の固定ページを作成します。

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

ページテンプレートのファイル名はcontact-error.phpとして、以下のようにします。

<?php
/**
 * Template Name: contact-error
 *
 * 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
 */

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

////////////////////////////////////////////////////////
 // ここから上がerror.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; ?>

////////////////////////////////////////////////////////
 // ここから下がerror.phpのソース引用部分
 ////////////////////////////////////////////////////////
<div class="page-content">
      <p class="mb30 text-danger">
    		予期せぬエラーが発生しましたため、お問い合わせが完了しませんでした。
    	</p>
</div>
////////////////////////////////////////////////////////
 // ここか上がerror.phpのソース引用部分
 ////////////////////////////////////////////////////////
 
	</main><!-- .site-main -->

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

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

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

上記もerror.phpの一部をpage.phpに追加しただけになります。
以下のようにcontact-error.phpをtwentysixteen-customのテーマフォルダに置いて、後はwordpressの管理画面から固定ページへ適用します。
add-contact-error

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

以下のように「お問い合わせでエラーが発生しました」というタイトルで固定ページを新規追加します。固定ページのURLはhttp://localhost:8888/testsite/contact-error/、テンプレートをcontact-errorにしています。
set-contact-error

そして実際にこの固定ページにアクセスしてみると、以下のように表示されると思います。
view-error

これで必要な固定ページの作成は全て完了しました。

まとめ

長くなりましたが、基本的に同じ作業を繰り返しているだけになります。ここでは最低限のお問い合わせフォームでしたが、これをベースにカスタマイズすることで色々なお問い合わせフォームを作成できると思います。見た目についても、任意のcssを読み込ませたりすることで自由に変更できます。

SPONSORED LINK

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

コメントを残す

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