サポート » プラグイン » Contact Form 7での登録フォーム表示のカスタマイズ

  • 解決済 noripu

    (@noripu)


    Contact Form 7で作成した
    メールアドレス登録ボックスと送信ボタンですが

    —今は下記コードで書いています—

    <label> メールアドレス登録
    [email* your-email] </label>

    [submit “送信”]

    —ホームページ上では下記3行で表示されてるのですが—

    メールアドレス登録(テキスト)
    □(四角いメールアドレス入力フォーム)
    送信ボタン

    ————————

    今は3行で掲載されてるのを
    横並びに1行にできますでしょうか。

    メールアドレス登録(テキスト)□(四角いメールアドレス入力フォーム)の右側に送信ボタン

    その方法を教わりたいです。
    かなり初心者なのですが教われれば助かります。

    よろしくお願いします。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • noripuさん、こんにちは。

    単純なCSSの設定の問題ですので、回答が付きづらいのだと思います。
    htmlやCSSの記述方法を学んでいただくか、それようのフォーラムへ質問を行った方が回答は早いでしょう。

    で、Contactform 7は特に設定をしていなければ独自のclassを付与していたり、最低限CSSも当たっていますので、まずはContactform7のフォームの設定からすべての改行を取り除いて設定、

    <label> メールアドレス [email* your-email] </label>[submit “送信”]

    さらに、以下のようなCSSを追記頂くとよいかもしれません。

    .wpcf7 input[type="email"] {
        display: inline-block;
        width: 70%;
    }
    label {
        display: inline-block;
        width: 80%;
    }

    これはあくまでも検証環境で、テーマも適度なデフォルトテーマを使用している状況で、ブラウザのデベロッパーツール上で検証しただけの記載ですので、ご自身のテーマや環境でclassの指定や数値の修正を行ってみてください。

    考え方としては、labelタグやinputタグにdisplay: block;指定があるため、inline-blockに変更し、適宜widthを指定してあげれば良いのではという方法です。

    ご参考になれば。

    トピック投稿者 noripu

    (@noripu)

    ご回答ありがとうございます!
    大変助かりました。

    かなり初心者なので
    これは
    プラグインの問題だと思っておりました。

    いただいたコードの数字を
    いろいろ変えることで

    width: 80%;がメールアドレスのテキストの幅

    width: 70%;が□のメールアドレス入力ボックスの幅

    であることがわかりました。

    この度教えていただき
    はじめて
    CSSをどこに追記するかを突き止め
    はじめてCSS追記というものを行えました。

    おかげさまで
    第一歩を踏み出すことができました。

    トピック投稿者 noripu

    (@noripu)

    ご回答ありがとうございました。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「Contact Form 7での登録フォーム表示のカスタマイズ」には新たに返信することはできません。