The overall size of the form elements is generally controlled by the CSS in your current WordPress theme rather than the “size” you use in the Form section of the CF7. This refers to the standard HTML size attribute which may or may not control overall element size.
See Styling Contact Form for a general explanation of styling CF7 forms using CSS.
There is a link at the bottom of the page to a comprehensive and detailed article on Styling Contact Form 7 Forms. The article shows people, with suitable HTML & CSS skills, how to change the appearance of their Contact Form 7 Forms to meet their particular requirements.
I your case I would use something like:
.wpcf7 textarea {
width: 100%;
}
but you may need to check what works with your WordPress theme using Use Firebug or Chrome Dev Tools to understand the CSS used for your CF7 form elements.
You could also consider using Contact Form 7 Skins to style your Contact Form 7 Forms.
Thanks to buzztone for your very helpful advice here, particularly the Chrome Dev Tools to understand the CSS used. I have tried a number of variations (referring to the codes shown using Chrome Dev Tools) in the theme’s Additional CSS section without success.
As the Contact Form 7 is used within Visual Composer, I have also tried inserting the form outside the Visual Composer (in case that was controlling the settings) as well as modifying the CSS in the Visual Composer Row.
I have also installed and used Contact Form 7 Skins, again with no success.
Below are versions of code I have tried, as well as many others on these lines, alongside buzztone’s suggestion above:
Referencing theme’s stylesheet:
‘.wpcf7 textarea.wpcf7-form-control {
width: 100%;
}’
Using CSS shown using Chrome Dev Tools:
‘.wpcf7-form-control .wpcf7-textarea {
width: 100%;
}’
Other Additional CSS I have added in my theme has worked, so I wonder whether it is being over ridden by the Visual Composer?
Any more ideas would be gratefully received!
Hi Sue
I checked your form and see that you are using paragraph elements for your CF7 form fields. While this is a very simplistic way to create very basic contact forms (and is used in the default CF7 form) it does tend to make the sort of styling you are looking for challenging.
Contact Form 7 Skins uses fieldsets & ordered lists as the basis for all forms for this and a number of other reasons.
To reproduce the design you are trying to emulatate I would include the first 3 items in an ordered list with a special class to display these elements on a single line as follows:
HTML:
<ol class="singleline">
<li> Your Name (required) [text cf7-name]</li>
<li> Your Email (required) [text cf7-email]</li>
<li> Subject [text cf7-subject]</li>
</ol>
Added to Form section of CF7 interface.
CSS:
.wpcf7-form .singleline ol {
list-style: none;
margin: 0;
}
.wpcf7-form .singleline li{
display: inline-block;
float: left;
margin-right: 10px;
padding-right: 10px;
}
This should then make styling and postioning of following fields relatively simple.
P.S. Visual Composer is unlikely to be an issue – you are just not using suitable CSS.
Thank you for your help here buzz tone. Your advice along with this article for those who like me are new to this, has helped me get the result I was looking for. Thanks again.
