コンタクトフォーム7のメモ

naena

実際の見た目

「必須入力の項目。」にチェックをいれたら必須になる。条件分岐の場合のみ例外あり。





    気をつけたほうがいいこと

    こまめな保存

    作っている最中はエラーが出ることが多い。保存の間隔が長いとどこでエラーが出たのか分からなくなるため、一つ追加したり一つ消去したらそのつど保存したほうがいい。

    がっつり何かを変えたり試すなら、上手くできているフォームを複製しておくこと。

    コピペしない

    テキストや電話番号などそれぞれの項目を作る時に番号が割り振られている。text-190とかtext-365とか。出席番号みたいなもの。

    それがあるのでコピペをしてしまうと、コンタクトフォーム7が「出席番号text-190が2人いる?!」となってエラーがでたり、エラーが出なくても上手く作動しなかったりする。特にメール関係で。

    コピペしても問題ないのは [your-name]  [your-email] [your-subject]  [your-message]など頭にyourがついているもの。

    全角スペースを使わない

    全角スペース×1と半角スペース×2はイコールではない。

    段落が揃わなかったり謎の空欄ができたり上手く表示されなかったりするので全角は使わないほうがいい。

    分からないことがあったらネット上を調べるよりChatGPTに聞くほうが早い

    コンタクトフォーム7を使っていること、こういう風にしたくてこういうコードを書いているけど上手く表示されないこと、

    全部伝えれば解決策を教えてくれる。コピペしやすいよう伝えればそうしてくれる。

    作っているときに調べたこと

    Q
    予約とお問い合わせでそれぞれ表示内容を分岐させたい

    別のプラグインが必要。参考にしたやつ。

    分岐した場合のメール設定はこれ。

    ちなみに、[your-name][your-email]は[group]外に置いたほうがいい。そうじゃないと必須項目じゃなくなる。仕様なのか、使っているテーマやプラグインによってなのかは不明。

    Q
    承諾確認の「利用規約」「プライバシーポリシー」の部分に該当のリンクを貼りたい

    手打ちでちょっと書き換える必要がある。

    承諾確認>同意条件に↓をペーストする。

    <a href=”/privacy-policy/” target=”_blank” rel=”noopener noreferrer” class=”underline”>プライバシーポリシー</a>に同意する

    太字のところをリンク先のパーマリンクと文字列に変える。参考にしたやつ。
    
    リンクとリンクの下線の色を変える方法はChatGPTに聞いた。
    Q
    ドロップダウンメニューの選択肢の一番上を「ー以下から選択してくださいー」にしたい

    手打ちでちょっと書き換える必要がある。

    選択肢の前に【include_blank】を入れる。参考にしたやつ。

    Q
    「複数のフォームコントロールが単一のlabel要素内に置かれています」と赤字でエラーが出る

    チェックボックスやラジオボタンのところを修正すれば直る。参考にしたやつ。

    Q
    入力内容確認画面と送信完了画面を作りたい

    別のプラグインが必要。ポピュラーなプラグインは「Contact Form 7 Multi-Step Forms 」だけどかなり危ない不具合がでていることを知り断念。

    一応コンタクトフォーム7自体のデフォルトで送信完了の文言は出るっぽい。

    Q
    お問い合わせフォームの全体のデザインを整えたい

    HTMLやCSSを使うので上級者向け。

    参考にしたやつはこれ。16進数カラーコードへの変換はこれ。

    記事URLをコピーしました