Change form field width

hm, I think I’ve found the right bit in the css file. Copied it to my custom.css, but changes are having no effect.

The { width: 170px; } tags are my additions.

/*  base : forms
/* ------------------------------------ */
input, textarea, button, select, label { font-family: inherit; }
.themeform input, { width: 170px; }
.themeform textarea,
.themeform button,
.themeform select,
.themeform label { font-size: 14px; }
.themeform input::-moz-focus-inner,
.themeform button::-moz-focus-inner { border: 0; padding: 0; }
.themeform input[type="text"], { width: 170px; }
.themeform input[type="password"],
.themeform input[type="email"],
.themeform input[type="submit"], { width: 170px; }
.themeform button,
.themeform textarea { margin: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 0; border-radius: 0; }
.themeform input,
.themeform textarea,
.themeform button { -moz-appearance: none; -webkit-appearance: none; -moz-transition: all .2s ease; -webkit-transition: all .2s ease; transition: all .2s ease; }
.themeform input[type="checkbox"] { -moz-appearance: checkbox; -webkit-appearance: checkbox; }
.themeform input[type="radio"] { -moz-appearance: radio; -webkit-appearance: radio; }
.themeform label { font-weight: 600; color: #444; }
.themeform input[type="text"], { width: 170px; }
.themeform input[type="password"],
.themeform input[type="email"], { width: 170px; }
.themeform textarea { background: #fff; border: 2px solid #ddd; color: #777; display: block; max-width: 100%; outline: none; padding: 7px 8px; }
.themeform input[type="text"]:focus,
.themeform input[type="password"]:focus,
.themeform input[type="email"]:focus,
.themeform textarea:focus { border-color: #ccc; color: #444; -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.1); box-shadow: 0 0 3px rgba(0,0,0,0.1); }
.themeform label .required { color: #3b8dbd; }
.themeform input[type="submit"],  { width: 170px }
.themeform button[type="submit"] { width: 170px; background: #3b8dbd; color: #fff; padding: 8px 14px; font-weight: 600; display: inline-block; border: none; cursor: pointer; -webkit-border-radius: 3px; border-radius: 3px; }
.themeform input[type="submit"]:hover,
.themeform button[type="submit"]:hover { background: #444; }

ok, after more searching, I’ve found the wpcf7 part of the css file, but even changing this has no effect. So frustrating!

/* plugin : contact form 7
/* ———————————— */
.wpcf7 { }

For example: Just trying to make the Submit button 40% rather than 100% should be easy?

.wpcf7 input[type=”submit”] { width: 40%; padding: 10px 0; font-size: 18px; }

turned out the simplest solution was to use another plugin. pity that the hueman theme, despite using contact form 7 by default, wasn’t flexible in it’s css / width layout.

RE: Is the ‘size’ tag in the form settings meant to change the width of the input field?

The “size” you use in CF7 tags refers to the standard HTML size attribute which may or may not control overall element size. Its main purpose is to limit the number of characters and/or rows you can enter.

Back in the 1990s the HTML size attribute probably did what you want, but with modern CSS based websites the overall size of the form elements is more generally controlled by the CSS in your current WordPress theme.

I suspect that CSS changes required to force an input width: “width: 170px;” may be pretty simple.

Did you 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.

If you can setup your CF7 form somewhere on your site (do it where visitors don’t have access if you want) and post a link here I’d be interested to take a look.

ok, thanks for the reply… sorry I was a bit hasty. the site is not yet ‘live’, so I put the WPCF7 form back up (on the same contact page).

Thanks for the link, I don’t think I’d seen that one.

I added the following to my theme’s custom.css file:

/* contact form 7: Change form width */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
{
    width: 40%;
}

But, still no effect ??

If you can see something I’ve got wrong, please let me know – otherwise no need to spend too much time, as I do have the other form going.

The following CSS is currently controlling the width of your input form elements in
https://wattspermaculture.com.au/wordpress/wp-content/themes/hueman/style.css?

.wpcf7 input[type="text"], .wpcf7 input[type="email"] {
    display: block;
    float: left;
    padding: 10px;
    width: 100%;
}

Use Firebug or Chrome Dev Tools to examine the HTML and CSS of your CF7 form in detail. Once you understand how the HTML and CSS is configured in your CF7 form, you should be able to see the CSS changes you need to change the appearance of the form to suit your requirements.

I tested changing the elements within Firebug to ?width: 40% without problems.

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.

thanks… yes, ok – got it to resize correctly using that stylesheet. And chrome dev tools did help too – will use in the future. cheers.