Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    The width of the input field is defined in your theme’s stylesheet.

    To override it, add this style rule to your theme’s stylesheet:

    .wpcf7 input.wpcf7-captchar {
        width: 80px;
    }

    See Styling Contact Form

    Thread Starter jernatety1

    (@jernatety1)

    I have two forms. I only want to resize the input field on only one captcha, not both of the forms.

    Is there no way to resize the fields directly via the contact form 7 admin console in the control panel?

    Each CF7 form has a unique id which can be targeted in your CSS changes.

    <div id="wpcf7-f47-p339-o1" class="wpcf7">
    <form class="wpcf7-form" novalidate="novalidate" enctype="multipart/form-data" method="post" action="/forms/bogart/#wpcf7-f47-p339-o1">
    <div style="display: none;">
    <input type="hidden" value="47" name="_wpcf7">
    <input type="hidden" value="3.4.1" name="_wpcf7_version">
    <input type="hidden" value="wpcf7-f47-p339-o1" name="_wpcf7_unit_tag">
    <input type="hidden" value="e6484ca73a" name="_wpnonce">
    </div>

    Use Firebug or Chrome Dev Tools to find this unique id in your CF7 form. Then target only this CF7 form using CSS heirachy as follows:

    #wpcf7-f47-p339-o1 {
        font-family: Verdana;
    }
    
    #wpcf7-f47-p339-o1 .wpcf7-form fieldset {
        padding:10px;
        background:#fff;
        margin-bottom:10px;
        border:1px solid #000;
    }
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Fields Not Resizing’ is closed to new replies.