CODEWITHSUNDEEP
htmlwordpressformssize
stdcerr
stdcerr

Reputation: 15678

input "size" attribute not respected

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>

Upvotes: 1

Views: 1328

Answers (1)

mathielo
mathielo

Reputation: 6795

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!

Upvotes: 1

Related Questions