Contact Form 7の送信ボタンの位置

  • 解決済 bioty

    (@bioty)


    12年、 9ヶ月前

    WordPress, php, css初心者なので、分からないことばかりなので教えて頂けるとたすかります。

    現在、お問合せフォームをContact Form 7を使って作ろうとしていますが、送信ボタンがお問い合わせ内容のテキストエリアの下に来てほしいんですが、隣に来てしまいます。

    フォームに枠を付けたのですが、テキストエリアがはみ出してしまいます。

    タグは以下の通りです。
    <p><label>お名前<span class=”hissu”>※必須</span>
    [text* your-name] </label></p>
    <p><label>メールアドレス<span class=”hissu”>※必須</span>
    [email* your-email] </label></p>
    <p><label>件名
    [text your-subject] </label></p>
    <p><label>お問い合わせ内容
    [textarea your-message] </label></p>
    <p class=”submit”>[submit “送信”]</p>

    テキストエリアの設定が悪いのか、送信ボタンの設定が悪いのかわかりません。

    テキストエリアの下に送信ボタンを表示させ、問い合わせフォーム全体を枠で囲む方法を教えてください。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • モデレーター Takayuki Miyoshi

    (@takayukister)

    12年、 9ヶ月前

    CSS で .submit がフロートされてるんじゃないですかね。お使いのテーマのスタイルシートを確認してみてください。

    ご自分ではわからない場合は、そのサイトの URL を教えてもらえれば何かアドバイスできるかもしれません。

    トピック投稿者 bioty

    (@bioty)

    12年、 9ヶ月前

    Takayuki Miyoshiさん

    ご回答ありがとうございます。
    CSSのContact Form 7の部分はここです。
    display:blockにしてるんですが、これではだめですか？

    .wpcf7-form {
    background-color: #ffffff; /*ボックスの背景色を青に指定*/
    border: medium solid #f0d323;
    padding: 20px;  /*ボックス内の余白を20pxに指定*/
    border-radius: 20px    /*ボックスを角丸に指定*/
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
 }
.wpcf7-form span.hissu  {
    color: #aa0000; /*必須の文字色を赤色に指定*/
    font-size: smaller /*文字サイズを一回り小さく*/
 }
.wpcf7-form input{
    width: 80%    /*入力フィールド幅を80%に指定*/
    /*display:block;    折り返し*/
}
.wpcf7-form textarea{
    width: 100%;   /*テキストエリア幅を100%に指定*/
    /*display:block;    折り返し*/
}
.wpcf7-form p.submit{
    text-align: center;    /*送信ボタンを中央揃え*/
    display:block;    /*折り返し*/
}
.wpcf7-form .wpcf7-submit{
    width: 100px; /*送信ボタンの横幅*/
    display:block;    /*折り返し*/
}
    トピック投稿者 bioty

    (@bioty)

    12年、 9ヶ月前

    結局、分からないので、「Custom Contact Forms」を使うことにしました。
    こちらも使いやすそうです。

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

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「Contact Form 7の送信ボタンの位置」には新たに返信することはできません。