サポート » プラグイン » Contact Form 7の「送信」ボタンの大きさを変更するには

  • 解決済 kojima72

    (@kojima72)


    Contact Form 7で生成した問い合わせフォームの「送信」ボタンの
    大きさをもう少し大きくしたいのですが、どこで変更可能でしょうか?

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • kojima72さん、こんにちは。
    WP初心者ですが、僕なら
    wp-content/plugins/contact-form-7/modules/submit.php
    function wpcf7_submit_shortcode_handler( $tag )内
    $html = ‘<input type=”submit” value=”‘ . esc_attr( $value ) . ‘”‘ . $atts . ‘ />’;
    に直説styleを指定するか、画像でも良いし。
    <input type=’image’ alt='” . esc_attr($value) . “‘ src=’……..xxx.png’ name=’submit'” . $atts . ” />
    それか、$html = ‘<input class=’xxxx’ type=”submit”… といったクラスを作り、
    直接「styles.css」を編集するか、
    Themeのfunctions.phpに次の一文を追加。
    remove_action(‘wp_print_styles’, ‘wpcf7_enqueue_styles’);

    Themeのstyle.cssに、Contact Form 7用のCSSを設置。
    どっちにしても、submit.phpを改造するでしょうね。邪道かもしれませんが。

    plan A(おすすめ)/IE6 は無視する:
    style.css –

    .wpcf7-form input[type=submit]{
    width:100px;
    height:30px;
    }

    plan B/IE6 を見捨てず submit.php を直接いじらず(未検証):
    functions.php –

    wpcf7_remove_shortcode( 'submit', 'wpcf7_submit_shortcode_handler' );
    wpcf7_add_shortcode( 'submit', 'my_submit_shortcode_handler' );
    function my_submit_shortcode_handler( $tag ) {
      /*
      wpcf7_submit_shortcode_handler の内容をコピーして
     munus さんご提案のように input タグにクラスを追加
      */
      $html = '<input class="my-submit" type="submit" value="' . esc_attr( $value ) . '"' . $atts . ' />';
    }

    styles.css –

    .wpcf7-form input.my-submit{
    width:100px;
    height:30px;
    }

    モデレーター Takayuki Miyoshi

    (@takayukister)

    クラスの追加ですが、submit タグにも class: オプション付けられるんですが、それ使うのではダメですか?

    トピック投稿者 kojima72

    (@kojima72)

    munus様
    kz様
    takayukister様

    皆様、ご丁寧なアドバイス本当に有難うございます!

    無事、「送信ボタン」を大きくすることができました。
    様々な方法があるようで、とても勉強になりました。

    今後ともよろしくお願いします。

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