フリーランスエンジニア営業なしで案件受注

自作したWordPressにContact Form7をつける方法

自作LPをWordPress化するときのContact Form7のカスタマイズ方法について解説します。

Contact Form7を使うと自動メッセージを送信できたり、お問い合わせ完了画面を表示できます。

今回はすでに自分で作成したLPのフォーム部分をデザインそのままで、まるっとContact Form7に入れ替える方法をお伝えします。

1.Contact Form7のLPへの設定方法

1.Contact Form7インストール&有効化

「WordPress プラグイン インストール」などと検索すれば簡単に方法がわかります。

2.Contact Form7フォーム部分に内容を記載。

ダッシュボードサイドバーのお問い合わせ>コンタクトフォーム>コンタクトフォームの編集に進みましょう。

idやclassは自作のCSSのidやclassと名称を合わせてください。そうするとCSSに書いてあるデザインがそのまま反映されます。それでも完全に反映されない場合は自分でCSSを修正しましょう。

placeholderはあらかじめフォーム内に記載しておきたい文字のことです。

Contact Form7フォーム

 

3.Contact Form7のフォームのコードをindex.phpに貼り付ける

contactform7のフォームの上にある以下のようなコードをindex.phpのLPのフォームがあった部分に貼り付けましょう。LPでもともと書いていたフォームの記載は消してください。idの数字やタイトルは場合によって異なるので、よく確認してください。

contactform7のフォームの上にあるコード

index.php

 

4.問い合わせ完了画面に遷移させる

以下のコードをcontactform7フォーム部分に貼ってください。

これは送信ボタンを押すと、http://localhost:8888/thanks/に飛ぶという設定です。url部分は適宜変更してください。

contactform7フォーム

問い合わせ完了画面(http://localhost:8888/thanks/)の内容は、固定ページに書きましょう。

固定ページのパーマリンクを(http://localhost:8888/thanks/)と置き換えればOKです。

 

5.問い合わせ完了画面の内容を表示させる

page.phpに以下の記載を追記。

page.php

その後、固定ページの右のテンプレート設定を「固定ページの新規テンプレート1」にする

 

contactform7のエラー対処法

1.フォームを送信しても「矢印がくるくる回っており」ずっとローディング状態

→Contact Form 7 Controlsを導入する

ダッシュボード>お問い合わせ>コンタクトフォーム >対象のコンタクトフォーム から

「Customize」タブの「AJAX Submissions 」→「Disable AJAX for this form」をチェックする

 

2.サイトから打ち込んだ内容がメールに届かない

1.「コンタクトフォーム の編集」画面を開く

 

2.フォームタブを開き、各名称をメモする。

 

3.メッセージタブを開き、上でメモした各名称を以下のように設定する

 

contactform7の見た目のカスタマイズ方法

「送信しました」などのメッセージの色を変えたい

  1. 実際にcontactformに打ち込むなどして送信完了エラーや送信完了メッセージを出す
  2. 上記のようにChromeの検証機能で、クラス名を特定
  3. style.CSSの対象のクラスのプロパティを変更する

 

フリーランスがWordPress制作で仕事ができるレベルになるには?コーディングも解説