【Web制作過程】WordPressから仮のお問い合わせフォームを設置する

プログラミング
Photo by Volodymyr Hryshchenko on Unsplash

こんにちは、コンスキです。

WordPressのプラグインを使ってお問い合わせフォームを設置します。

今回は、プラグインを入れると付いているデフォルトのコンタクトフォームを表示することを目的にやっていきます。

次回、そのコンタクトフォームの見た目を整えていけたらいいです。

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

今回使うのは「Contact Form 7」というプラグインです。

このプラグインは人気があり、多くの人に使われています。

1.管理画面から「プラグイン > 新規追加」のように選択します。

2.検索欄に「Contact Form 7」と入力します。

3.「今すぐインストール」を押してインストールします。

4.イントールが終わっても有効化されなかった場合は、自分で有効化します。

プラグイン一覧からContact Form 7を見た時に、「無効化」が表示されていれば有効化できています。

または、管理画面のサイドメニューに「お問合せ」と表示されていた場合も有効化できています。

デフォルトのお問い合わせフォームを設置する

お問合せフォーム見た目や内容は後から設定できるため、まずはデフォルトであるフォームを設置してみます。

1.お問合せフォームを表示する固定ページを作っておきます。

2.この固定ページクリックして編集画面に行き、「+」マークを押します。

3.検索欄から「Contact Form 7」と検索して出てきたやつを選択します。

選択すると次のようになります。

4.「公開」ボタンを押します。

表示する

固定ページに設置することはできました。

しかし、固定ページを表示するテンプレートファイルで固定ページの内容は出力していません。

そのため、ページを表示してもまだお問合せフォームは表示されません。

そこで表示したい部分に次のスクリプトを加えて、固定ページの内容を表示させます。

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<div class="page_container">
  <?php the_content(); ?>
</div>
<?php endwhile; endif; ?>

今回は固定ページを表示するために「page-contact.php」というテンプレートファイルを使っているため、このファイルを編集していきます。

<?php get_header(); ?>
<div class="page_wrap w_inner">
  <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
  <div class="page_container">
    <?php the_content(); ?>
  </div>
  <?php endwhile; endif; ?>
</div>
</div>
<div id="FAQ">
  <h2>よくある質問</h2>
  <hr>
  <div id="FAQ_content">
    <div class="FAQ_column">
      <div class="FAQ_frame"><p>冷暖房はどのようになってますか?</p></div>
      <div class="FAQ_frame"><p>何歳から入園できますか?</p></div>
      <div class="FAQ_frame"><p>子どもたちは自由遊びにどんな遊びをするのですか?</p></div>
      <div class="FAQ_frame"><p>園の見学はできますか?</p></div>
      <div class="FAQ_frame"><p>給食のアレルギー対策はできていますか?</p></div>
    </div>
    <div class="FAQ_column">
      <div class="FAQ_frame"><p>冷暖房は全室に完備しておりますので、暑い日でも寒い日でも、快適に過ごすことができます。冷暖房だけでなく、乾燥機と加湿器も必要に応じて使うことができます。</p></div>
      <div class="FAQ_frame"><p>以前まで幼稚園でしたが、現在の施設の認定区分としては子ども園となっておりますので、0歳(生後57日)から入園できます。</p></div>
      <div class="FAQ_frame"><p>室外では鬼ごっこや泥遊び、室内ではお絵描きやブロック遊びなどをします。基本的には自由に遊んでもらいますが、危険が伴う場合は注意することもあります。</p></div>
      <div class="FAQ_frame"><p>予約後の見学は常時可能です。ご希望でしたら、電話またはお問い合わせフォームよりご希望の日程をご連絡ください。後日その日程に見学していただく形になります。</p></div>
      <div class="FAQ_frame"><p>アレルギーに対応した給食を提供することは可能です。事前にアレルギー対応給食の申し込み書を記入していただき、裏側玄関事務室よりご提出ください。</p></div>
    </div>
  </div>
  <p>他にも質問がございましたら、お電話または上記のメールフォームよりお気軽にご質問ください。</p>
</div>
<?php get_footer(); ?> 

お問合せページを表示してみると次のようになっています。

見た目は質素で、配置もおかしいですが、一応コンタクトフォームを表示することができました。

コメント

  1. […] […]

タイトルとURLをコピーしました