input “size” attribute not respected

3 Views

I’m designing a page to add to a site built in WordPress. I’m using WordPress’ Contact Form 7 plugin to create a that can be submitted by email. Now, Contact Form allows you to set the size of the text boxes and I have set them e.g. to size="5" however, none of the tested browsers (Chrome & Firefox) seems to respect the size, why is this I’m wondering and how can I fix this? The temporary url of the page is: http://www.dustbites.com/estimate-sheet-2/ and my WordPress source for Contact Form looks like: 

<p>Customer: [text* Customer 30/]</p>
<p>Address: [text* Address 20/] Buzz: [text Buzz 5/5]</p>
<p>Res:[text* Res 10/10] Bus: [text Bus /10] Cell: [text Cell 10/10] Fax: [text Fax 10/10]</p>
<p>Bill To: [text Bill 10/10]</p>
<p>How did you find out about us:[checkbox Findout "Yellow Pages" "BBB" "Referral" "Internet"] Other: [text Other 15/15]</p>
Post Views: 3

Related posts

Leave a Reply

1 comment

  1. It seems that whenever the plugin renders your code e.g. [text Bus /10], it adds the CSS class .wpcf7-text that sets the width of your inputs to 75% of the relative element’s width.

    Basically, for the HTML attribute size to work on your inputs you’ll need to:

    1) Overwrite the default .wpcf7-text class

    Add to your site theme’s CSS file:

    .wpcf7-text { width: auto!important; }

    I wouldn’t say this is the best option as this will overwrite this property for all inputs that uses this class generated by the plugin.

    OR – better yet – you could

    2) Generate a custom class of yours and apply to your inputs

    Again, at your site theme’s CSS file, add:

    /* You may pick the best class name that suits you */
.my-custom-width-class { width: auto!important; }

    And for that to work, add the class: attribute to your Custom Form inputs, e.g.:

    [text Bus /10 class:my-custom-width-class]

    Also, having your own class in your inputs, you could manually set their widths through the CSS class, discarding the size attribute, like such:

    .my-custom-width-class { width: 240px!important; }

    I hope that helps!