こんにちは、コンスキです。
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(); ?> お問合せページを表示してみると次のようになっています。
見た目は質素で、配置もおかしいですが、一応コンタクトフォームを表示することができました。
コメント
[…] […]