収入・働き方別プログラミング言語の選び方

自作したwordpressにcontactform7をつける1番簡単な方法

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

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

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

1.contactform7のLPへの設定方法

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

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

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

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

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

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

contactform7フォーム

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

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

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

index.php

<?php echo apply_filters('the_content', '「上記のcontactform7のコード」'); ?>

 

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で最低限仕事ができるレベルになるには?