How to edit size and width of the form fields

You need to look at adding some custom CSS to your theme – either via a child theme or a custom CSS plugin. Once at last one of these is in place, try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.

Hi,

On your theme’s main CSS file, try to add this code

.entry-summary {
margin-left: -20px;
}

This is to adjust the form to the left a little bit, like the image below.
https://screencast.com/t/0OaEihjfv

But, if you want to move your form to the right, next to your sidebar, then use margin-right.

.entry-summary {
margin-right: -80px;
}

Just choose a value that suits your need.

To change your form fields, you can use the code below

.wpcf7 input[type=”text”],
.wpcf7 input[type=”email”],
.wpcf7 textarea
{
width: 50%;
}

You might want to play around the value of the width, to adjust to your liking.

Hope that helps.

Thanks,
William

Dears,

1) In the plugin folder, go to contact-form-7/modules/text.php

2) Comment the line 41 –> //$atts[‘size’] = $tag->get_size_option( ’40’ );

3) Save

Now you can customize the size with css ??

I used this custom CSS to modify the height of my form fields:

.wpcf7-text {height: 5px;}

and now the placeholders don’t work in Firefox or IE. Help?

• This reply was modified 8 years, 4 months ago by azmktg.

I was so excited when I saw thandrade88 ‘s comment about commenting out the size option, but that didn’t work. My form just won’t behave, https://marthalwilliams.com/contact/

No matter what I try I can’t seem to override the existing styles. I’ve tried
[text* your-name size:100] in the Contact7 form
I commented out the line in the text.php file of the plugin.
I have a child theme with

.wpcf7 input[type="text"],

.wpcf7 input[type="email"],

.wpcf7 textarea

{

    width: 100%;
    }

The child theme seems to be selective in what it applies – the li change is there, but it ignores other settings. I migrated this site from a localhost site and it seems like the changes I made when on localhost are still in effect but not the one in my new location. Here is my header:
/*
Theme Name: Hueman Child
Theme URI: marthalwilliams.com/
Description: Hueman Child Theme
Author: Marty
Author URI: https://marthalwilliams.com
Template: hueman
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

*/
I’ve used both the editor and FTP to edit/upload style.css
So while I am struggling with Contact7, it seems like this is an issue with my child theme.
I hate child themes.

I was able to get this to work. I added the following to my custom CSS:

.wpcf7 input[type=”text”],
.wpcf7 input[type=”email”],
.wpcf7 textarea
{ width: 100% !important;}

IMPORTANT NOTE: When I first copied the code from @william712 the quotation marks came in as right quotes rather than double quotes. USE THE DOUBLE QUOTE which you can do by simply typing over the quotes in your custom CSS file

" (double quote)
vs
” (right quote)

Hope this helps.

• This reply was modified 8 years, 2 months ago by jannmirch. Reason: clarification
• This reply was modified 8 years, 2 months ago by jannmirch.

After much digging, I finally figured this out.
Field width is not only dependent on the CSS width attribute, but also the “size” which is an attribute of the HTML “input” element.

So the problem is that no matter what you do with the width in your CSS, you’re also restricted by size. The size is set to 40 by default in the plugin code. You can delete that line, as is suggested above, but it will be right back the next time you update.

It turns out that size can be changed easily in the short code like this:

[text* your-name size:80 ]

Simple and very handy, but the documentation on this could be better, IMHO.

• This reply was modified 8 years, 2 months ago by johnhorning-1.
• This reply was modified 8 years, 2 months ago by johnhorning-1.

Yeah, as I said earlier, I tried all of the above, nothing works for me.

Hey guys, I registered here at www.ads-software.com just to give you the method I used to achieve the 100% width of the forms. I edited my theme’s CSS file (any theme will do) and added this new css entry:

form p label {width:100%!important;}

Well at least that’s what works for me. Here’s how it appears on my site:

https://www.itoothbrush.review/contact

Hope this helps.

Lance

• This reply was modified 8 years, 2 months ago by themaincollector.

I just figured this out too. If you put an id on the label(s) you want to change, you can then call them in the css.

For example, I have a couple fields that I want the same size, so I added an id to the form fields like so:

<p> Name (required)<br /><br />
[text* your-name id:optin] </p>

<p> Phone Number (required)<br /><br />
[tel* Phone id:optin] </p>

id:optin is the id I gave to those 2 fields. (you can obviously name your id anything you want, like id:youridname) I then placed this code in my css stylesheet:

#optin {
	width:95%;
}

You can also give each field it’s own id and make them different sizes from each other. This is also great if you have multiple forms on your site and you just want to change one or two or however many forms to their own sizes.

Hope this helps.

This works nicely, but it is not responsive. I have the contact form in the sidebar and while it looks good with the adjusted size on my computer, it still looks awful on a tablet with a smaller screen. I use a fully responsive theme.

The only responsive field (of those I tested) is the textarea field. It does not have a predefined size while the text field is predefined to size 40:

<input type=”text” name=”your-name” value=”” size=”40″ class=”wpcf7-form-control wpcf7-text wpcf7-validates-as-required” aria-required=”true” aria-invalid=”false” />

Does anybody know a way to override the predefined size specification in a responsive way? I tried size:none (no change), size:”none” (the field disappeared entirely) and size:0 (the field was back to 40 characters).

Thanks! Wiebke

• This reply was modified 8 years, 1 month ago by wiebke.wetzel.

To make all fields full width, this worked for me..

label{display: block !important;}

If you want the submit button full width, use:
input[type=”submit”]{max-width: none;}

I know this is trivial ?? But none of the suggestions worked until i did a ctrl+F5 refresh. Normal refresh left the darn cached version so i could not see the changes. Silly haha.

Thanks dsb036
Your solution was the simplest that worked for me!

A big Thank You to dsb036!
I used your solution and it worked perfectly.

You are Awesome!