[wp]ContactForm7でreadonlyを仕込む方法と注意点。あと、type:hidden

並びに決まりがあるよ

こんな感じ

こういうのを作るとして

<input
    required
    type="text"
    autocomplete="name"
    maxlength="20"
    minlength="10"
    name="samplename"
    class="sampleclass"
    id="sampleid"
    readonly
    placeholder="sampleplaceholder"
>

こうなる。

[text* samplename autocomplete:name minlength:10 maxlength:20 class:sampleclass id:sampleid readonly placeholder "sampleplaceholder"]

CF7にreadonlyを設定する項目はないけど大丈夫。
メールタグの中に「readonly」を手打ちすればいいという話。

基本的に設定できないものはない、という認識で大丈夫。
→初期値はplaceholderとニコイチなので、どっちにするか選ぶことになる。

注意点

ちゃんと書き込んだのにメールタグがそのまま出力されていたら「書き方が誤ってる」だけ。
「readonlyは使えない」というわけじゃない。

大体の項目に順番は無いのだけど、placeholderまたはvalueは最後に書く決まりがある。
だからその手前にreadonlyを仕込む。

そうしないと、メールタグが崩壊する。

手打ちの範疇だから、最後に追記しちゃう可能性がある。
気をつけましょう。

隠しフィールド(input:hidden)の作り方

こう。

[hidden samplehidden]

required、readonlyは仕込めないことを確認。
適用の是非は入力して出力して、タグに反映されているかどうかで判断する。
ダメなものはタグに反映されないか、メールタグのまま出力される。

公式が書いてくれてるのでそっちを読むのもいいですね。

隠し入力項目
隠し入力項目とは、他の入力項目と同様にフォーム送信時に値が送信されますが、項目それ自体はフロントエンド側に表示…

活用シーン

普通のフォームとして扱う分にはreadonlyもhiddenも使わない。

テクいことをしたいとか、機能を追加したい時くらい。

  • CSRFを自作するのにhiddenを使う
  • yubinbango.jsを仕込むから都道府県・市区町村をreadonlyにする
  • クイズとか質問の計測用にhiddenを使う
  • 入力内容を整形してフォームに反映させるためにhiddenを使う

とか。

コメント

タイトルとURLをコピーしました