すべてのカテゴリ

今日は、WordPressでお問い合わせフォームを作成する際によく使われる Contact Form 7 の設定確認と、フォームのデザイン調整を行いました。Contact Form 7のメール送信テストフォームを作成したら、まず大切なのが正常にメールが送信されるかの確認です。実際にフォームから送信を行い、お問い合わせ送信後に「ありがとうございました。メッセージは送信されました。」と表示されるか管理者宛にメールが届くか入力内容が正しく送信されているかを一つずつ確認しました。今回は最初メールが届かず焦りましたが、原因は迷惑メールフォルダに振り分けられていただけでした。フォームが正常に動作していても、送信先のメールサービスによっては迷惑メール扱いになることがあるため、受信できない場合は迷惑メールフォルダも確認することが大切だと学びました。Contact Form 7のCSS調整次に、お問い合わせフォームをスマートフォンでも使いやすくするため、CSSの調整を行いました。今回調整したポイントはこちらです。入力欄の高さを統一横幅を100%に設定し画面いっぱいに表示スマホでも文字が小さくならないようフォントサイズを調整日付入力欄（date）の高さを他の入力欄と揃えるボックスサイズを統一してレイアウト崩れを防止例えば日付入力欄には次のようなCSSを設定しました。.wpcf7 input[type="date"] {  width: 100%;  height: 56px;  min-height: 56px;  padding: 10px 16px;  font-size: 16px;  li