Contact form 7を自作テーマに取り入れる方法。意外とどうやってやるの？ってなったので忘れそうだなと思い書くことにしました。
自作したお問い合わせページにプラグインを使ってバリデーションをかけていく作業。
目次
読んでほしい人。
2日前の自分。めちゃくちゃ読ませてあげたい。
初めてwordpressでお問い合わせフォームを作ろうとしている人。
自作したお問い合わせページにcontact form 7のバリデーションを加えたい人。
大まかな流れ
自作テーマをpage-任意.phpでアップロード。
固定ページ入れる。
プラグイン導入
新規作成
個別に作成していく。
ショートコードゲット。用意してある固定ページに貼り付け。
確認。
っといった流れになっております。
まず前提、作ったページをアップロード
お問い合わせページを自分で作っていると思うので、それを固定ページとして反映されるようにwordpressにアップロードしていきます。
やることは大きく２つ。
ファイルの名前をpage-任意.phpにする
ファイルの上部にテンプレート名を記載する
以上の２つをやっていきます。これをすることでwordpressが勝手に固定ページとして用意してくれるようになります。
詳しくはここ。
プラグイン導入
Contact Form 7 とこのままコピーして検索してもらえれば正しいものが表示されるので、インストール→有効化、の流れで進めましょう。
スペースや大文字小文字などで正しく表示されない場合があるのでコピーして検索をしてもらうのがおすすめです。
新規作成
次にダッシュボードのサイドバーに”お問い合わせ”という欄が増えていると思うのでそちらをクリック。
次はそこから画面上部にある新規追加で今回作るものを作成していきます。
はい、ここまでの状況を1度整理します。今はpage-任意.phpという固定ページがwordpressに設定されている。そしてプラグインContact Form 7が導入できていて、サイドバーにお問い合わせが表示されている。
っといった状態です。
個別に作成していく。
さてここからが本題です。
まず基本的な進め方を紹介して、コードも載せます。
イメージして欲しいのは、事前に作成してあるお問い合わせページを使いもう一度ここで作り直し、そこで作成されたショートコードをpage-任意.phpに貼り直す。という作業になることです。
イメージ的にはinput要素の部分だけ変わりますよってことです。
記載する内容に合わせて複数あるフォームの中から選びます。その際にもともとhtmlで付与しているclassやidを付与していきます。
こうすることで事前に作成してあるページをそのまま使うように進めることができます。イメージ下記。
変更前
<div class="container name-line px-0">
<div class="col-6 pl-0">
<p>氏名 (漢字)<span class="pl-2">※</span></p>
</div>
<div class="row">
<div class="col-md-5">
<input type="text" class="form-control mb-sm-2 mb-2" placeholder="姓">
</div>
<div class="col-md-5 right">
<input type="text" class="form-control" placeholder="名">
</div>
</div>
</div>変更後
<div class="container name-line px-0">
<div class="col-6 pl-0">
<p>氏名 (漢字)<span class="pl-2">※</span></p>
</div>
<div class="row">
<div class="col-md-5">
[text* your-kanji class:form-control class:mb-sm-2 class:mb-2 placeholder akismet:author "姓"]
</div>
<div class="col-md-5 right">
[text* your-kanji class:form-control placeholder akismet:author "名"]
</div>
</div>
</div>ポイントはクラスを複数指定する場合はclass:を足して行けばオーケイ。text*みたいにアスタリスクを付けると必須エリアにできます。
細かい設定はフォームを選択した時に出来ます。
ショートコードゲット。貼り付け。
上記がうまく出来たら、ショートコードをpage-任意.phpのファイルに記載していきましょう。
ショートコードはフォームを作成している画面の上部にあります。
[contact-form-7 id="１９" title="お問い合わせ"]実際に下記のようにショートコードを貼っていきます。echo do_shortcodeメソッドを使用していきます。
<?php echo do_shortcode('[contact-form-7 id="29" title="お問い合わせ"]'); ?>確認
ショートコードが貼れたらもともと書いてあるhtmlの部分を削除して更新しましょう。
自分のページにアクセスしてお問い合わせページが正しく表示されているか？バリデーションエラーが表示されるか？などをチェックしていきましょう。
若干見た目がずれたりするかもしれませんが付随エディターでcss追加できるので修正も出来ます。もしくはclassやidの確認をしましょう。
まとめ
page-任意.phpで固定ページ扱いにする事が出来る。
自作したお問い合わせページのinput部分を変更していく作業がメイン。
完成したらショートコードをpage-任意.phpの部分に記載する。(元のhtmlの記述は削除して良い)
2日前の自分はこんな感じの情報が欲しかったのです。
同じような人の役に立てば光栄です。
スキしてくれると飛んで喜びます！
では今回はこんな感じで
以上！
