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

かなり前にメモ書き程度に書いたこの記事ですが、そこそこアクセスが多いんです。タイトルに「レイアウト例」とか書いてあるのに、なんの変哲もないしょぼいフォームだったので、ちょっとだけ CSS を書き加えました😅
WordPress テーマ Lightning Pro (第2世代) でうまく表示されるように CSS を書いてありますので、他のテーマだと期待したレイアウトにならないかもしれません。

2023.9.29

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

フォームのテンプレート

<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;
}

WordPress を使用したサイト制作・カスタマイズを全国どこからでも承ります。ベクトルが販売している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

このサイトで行っているカスタマイズのやり方の多くもマンツーマンのオンラインレッスン形式などでわかりやすく説明させていただくことができますので、興味がある方はご連絡ください。

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

また、制作業者様のサイト制作のお手伝いも数多く行っております。いま人手が足りない、ちょっとここだけコーディングを頼みたい、等々… お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

» ご相談・お問い合わせはこちらからどうぞ

WordPress / Lightning オンラインサポートのご案内

サイトをご覧いただき、ありがとうございます。このサイトを運営している、魚沼情報サービスの対馬です。

WordPress を使用したサイト制作・カスタマイズ・サポートを全国どこからでも承っています。ベクトルが開発している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン (VK Blocks Pro ・ VK Filter Search Pro) を使ったサイト制作・カスタマイズを最も得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

* 近くに頼りになるところがない
* わからないところを教えてほしい
* 専門家にサイト制作を手伝ってもらいたい
という方はぜひお気軽にご相談ください。

ご要望をうかがった上で費用見積り（無料）を提示させていただきます。

ご相談・お問い合わせはお気軽にどうぞ