Fields Not Resizing

  • jernatety1

    (@jernatety1)


    10 years, 4 months ago

    This is my form.

    I only want to resize the captcha input field. I add in the size parameter to make it smaller and it doesn’t scale down.

    <p>Your Name (required)
    [text* your-name] </p>

    <p>Your Email (required)
    [email* your-email] </p>

    <p>Subject
    [text your-subject] </p>

    <p>Your Message
    [textarea your-message] </p>

    <p>[captchac captcha-422] Enter the characters on the left below:
    [captchar captcha-422 4/4]</p>

    <p>[submit “Send”]</p>

    http://192.185.169.195/~timeng/contact/

    http://wordpress.org/plugins/contact-form-7/

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

    (@takayukister)

    10 years, 4 months ago

    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)

    10 years, 4 months ago

    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?

    Neil Murray

    (@buzztone)

    10 years, 4 months ago

    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.