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

関連フォーラムトピック

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

    氏名(必須)

    メールアドレス(必須)

    題名

    メッセージ本文(必須)

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

    フォームのテンプレート

    氏名<small class="text-danger">(必須)</small>
    [text* your-name] 
    
    メールアドレス<small class="text-danger">(必須)</small>
    [email* your-email size:80]
    
    題名
    [text your-subject size:80]
    
    メッセージ本文<small class="text-danger">(必須)</small>
    [textarea* your-message 80x10]
    
    確認画面は表示されませんので、上記の入力内容をご確認の上、下記のチェックをつけて [送信] ボタンを押して下さい。
    
    [acceptance your-accept] 入力内容を確認しました [/acceptance]
    
    [submit "送信"]

    CSS

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

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

    そこで、スマホには CSS を適用しないようにしています。

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

    /* スマホには適用しない */
    @media (min-width: 768px) {
    
    .wpcf7-form-control.form-control {
    width: auto;
    }
    
    /* フォームを中央に配置 */
    .wpcf7-form {
    max-width: 680px;
    margin-left:auto;
    margin-right:auto;
    }
    
    }

    サイト運営者プロフィール

    対馬 俊彦
    対馬 俊彦魚沼情報サービス 代表
    新潟県南魚沼市・魚沼市を中心に、地域の皆様がパソコンやインターネットを有効活用して業務効率化・課題解決を図るお手伝いを1999年から行ってまいりました。

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

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

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

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

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

    前の記事

    Lighting Pro でスクロール時にヘッダーを固定しないやり方

    ここにアイキャッチ画像を表示しないようにフィルターフックで設定してあります。

    次の記事

    モバイルナビメニューに説明欄の文字を表示するカスタマイズ

    ここにアイキャッチ画像を表示しないようにフィルターフックで設定してあります。