Contact Form 7で作成したフォームで、送信完了画面に遷移させつつ、送信内容の一部を完了画面に表示させたいという要望がありました。 意外と今後も実装することが出てくるかもしれないと思ったので、実装内容を備忘録と…
Contact Form 7のフォームに自動挿入されるpタグやbrタグを削除する方法
Contact Form 7で作成したフォームでは、段落(pタグ)や改行(brタグ)が自動挿入されるようになっています。 HTML/CSSでコーディングされたフォームから作成すると、意図しないタグが入ることによりレイアウ…
EC-CUBE4のお問い合わせフォームに独自の項目を追加する方法
EC-CUBE4でお問い合わせフォームに独自の項目を追加する方法をご紹介いたします。 以下のように「お問い合わせ内容」と「会社名」という項目を追加したいと思います。 お問い合わせ項目を追加した環境 今回お問い合わせ項目を…
Contact Form 7のお問い合わせフォームに条件付きで表示する項目を追加できるWordPressプラグイン「Conditional Fields for Contact Form 7」
Conditional Fields for Contact Form 7は、Contact Form 7のお問い合わせフォームに条件分岐を追加できるWordPressプラグインです。指定した条件を満たす場合にのみ表示す…
iPhoneやiPadでinput[type=”date”]の入力値を左寄せにする方法
シンプルに以下のようなinputを設置した場合、Windowsでは入力値は左寄せで表示されるのですが、iPhoneやiPadだと中央寄せになってしまいます。 こんな感じです↓ Safariだけでなく、Chromeでも中央…
Contact Form 7に確認画面を追加するWordPressプラグイン「Confirm Plus Contact Form 7」
Confirm Plus Contact Form 7は、Contact Form 7のフォームに確認画面を追加してくれるWordPressプラグインです。開発元は、トラストリング株式会社さんです。 確認画面を追加するプ…
MW WP Formのエラーメッセージの表示位置を変更する方法
MW WP Formで必須項目などのバリデーションルールを追加した際に、表示されるエラーメッセージの位置を変更する方法をご紹介いたします。 必須項目に値を入力せずに送信しようとすると、「未入力です。」といったエラーメッセ…
input[type=”number”]に表示される矢印(スピンボタン)をCSSで非表示にする方法
フォーム内で「<input type=”number”>」を使うと、デフォルトでは入力フォーム内に以下のような矢印(スピンボタン)が表示されます。矢印をクリックすることで数値を増減できます。…
Contact Form 7とGoogleスプレッドシートを連携できるWordPressプラグイン「CF7 Google Sheets Connector」
CF7 Google Sheets Connectorは、Contact Form 7のフォームとGoogleスプレッドシートを連携できるWordPressプラグインです。 CF7 Google Sheets Conne…
CSSでフォームのプレースホルダーの文字色を変更する方法
フォームの入力欄に表示されているプレースホルダーの色をCSSで変更する方法をご紹介いたします。 CSSでフォームのプレースホルダーの色を変更する方法 何も指定していない場合は、以下のように少し薄めの色でプレースホルダーが…