Contact Form 7 のお問い合わせフォーム レイアウト例

メールアドレス、題名、メッセージ本文の入力欄を大きく、そしてフォームを画面中央に配置しています。

フォームのテンプレート

<p>氏名<small class="text-danger">必須</small>
[text* your-name] </p>

<p>メールアドレス<small class="text-danger">必須</small>
[email* your-email size:80]</p>

<p>題名
[text your-subject size:80]</p>

<p>メッセージ本文<small class="text-danger">必須</small>
[textarea* your-message 80x10]</p>

<p>確認画面は表示されません。<br>上記の入力内容をご確認の上、下記のチェックをつけて [送信] ボタンを押して下さい。</p>

<p style="text-align: center;">[acceptance your-accept] 入力内容を確認しました [/acceptance]</p>

<p style="text-align: center;">[submit "この内容で送信する"]</p>

CSS

フォームのテンプレートで入力欄のサイズを指定している size:80 と 80×10 は Lightning Pro の仕様によりフォームに反映されません。

入力欄に widht: auto; の指定を追加するとサイズ指定が有効になりますが、スマホでは画面からはみ出してしまいます。

そこで、スマホにはサイズ指定の CSS を適用しないようにしています。

また、パソコンではフォームを画面中央に配置しています。

/* スマホには適用しない */
@media (min-width: 768px) {

  .wpcf7-form-control.form-control {
    width: auto;
    max-width: 100%;
  }

  /* フォームを中央に配置・背景色指定 */
  .wpcf7-form {
    max-width: 680px;
    margin-left:auto;
    margin-right:auto;
    background-color: #f1f1f1;
    padding: 15px 20px;
    border-radius: 5px;
  }

}

/* 必須マーク */
.wpcf7-form small.text-danger {
    color: #fff !important;
    background-color: #dc3545;
    font-size: 75%;
    padding: 0.1em 0.3em;
    margin-left: 0.5em;
}

/* 入力確認のチェックボックスを大きく */
form .wpcf7-acceptance input[type="checkbox"] {
    transform: scale(2.0);
    margin-right: 0.5em;
}

/* 送信ボタンをぴったり中央に配置 */
.wpcf7-submit.btn {
    margin-left: 72px;
}

関連記事

Contact Form 7 のお問い合わせフォームをカスタマイズした例を載せてあります。

タイトルを縦書きでブロックを左右交互にレイアウトした賃貸物件サイト例

:focus-within を使ったお問い合わせフォーム