Contact Form 7のメール送信テストとCSS調整を行いました！

今日は、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;

  line-height: 1.4;

  box-sizing: border-box;

}

こうすることで、他の入力欄とのデザインが揃い、スマートフォンでも操作しやすいフォームになります。

サーバーへ反映する流れも確認

今回はローカル環境でCSSを修正したあと、

ローカルで修正 → All-in-One WP Migrationでエクスポート → サーバーへインポート

という流れで反映を行いました。

もし修正が反映されない場合は、

ブラウザのキャッシュ

WordPressのキャッシュ

サーバー上のCSSファイル

などを確認する必要があることも学びました。

まとめ

Contact Form 7はフォームを作るだけでなく、

メールが正しく届くか

スマホでも入力しやすいか

デザインが整っているか

まで確認して初めて安心して公開できます。

細かな調整を積み重ねることで、利用者にとって使いやすく、見やすいお問い合わせフォームに仕上げることができました。

これからも実際の制作を通して、WordPressやCSSの知識をさらに深めていきたいと思います！