お問い合わせフォームプラグインContact Form 7微妙なズレ

お問い合わせフォームカスタマイズ

項目の追加で枠の幅が違ってしまう項目がある

「タグの作成」から項目を追加する時に<input>の枠にCSSが反映されない項目がある。

「電話番号」「URL」「数値 (スピンボックス)」「日付」など設置するとダメでした。

Contact Form 7のバージョン 4.1.1です。

まだ解決してませんので、テキスト項目にして「電話番号」を割り当てました。

スマホで見ると右側がはみ出て見えない

PCで見る分には、まったくわからないが、スマホで見ると<input>の右側がpaddingによってはみ出てしまっていて、表示されていない。

BizVektor（ビズベクトル）の場合
下記を子テーマCSSに下記を記述すれば、解決。

form input[type="text"], form input[type="email"], form textarea {
padding-right:0px;
width:90%;
}

width:90%;は、PCで見た時にちょっと狭い為、幅を拡大。

100%まで大きくするとやはり、右側が表示されなくなる。

stinger未解決

内容の確認用のチェックボックスを追加する

「タグの作成」から「チェックボックス」を選択

一番上の必須の項目にチェックを入れる。

選択項目の中に
「確認画面は表示されません。上記内容にて送信しますので、よろしければチェックを入れてください。」と一行いれておく。

このコードをコピーして、左のフォーム内にペーストしてください。

[checkbox checkbox-???]

それから、このコードを下のメールの項目中に置いてください。

という箇所は、置かなくてもメールは受信します。

[checkbox-???]

上に戻って「保存」をクリックすれば完了

Contact Form 7 の使い方

下記参考にしました。

マーケティング目的で、WordPressブログを運用するのなら問い合わせページは必須だと言える。しかし通常は、サンクスページや自動返信メールなどの仕組みがある充実した問い合わせページを作ろうとしたら、WEBの専門的な知識が必要になる。
出典：https://bazubu.com/…