asked on

Contact Form 7 field widths

I'm trying to limit the widths of fields on a Contact Form 7 form (Word Press).

See attached; I DO NOT want the fields to be the full width of the page.

I looked at the documentation; as I read it, the following limits the width (the number with following /):

Full Name (required) 
[text* your-name 25/] 

Address (required) 
[text* your-addr 25/] 

City (required) 
[text* your-city 25/] 

Zip (required) 
[text* your-zip 10/] 

But it does nothing; how do I correct this?

Thanks
get-a-quote-form.jpg

Member_2_760301

Hi,

Try:

<p>City (required)<br />
    [text* your-city 25/26] </p>
<p>Zip (required)<br />
    [text* your-zip 10/5] </p>

Open in new window

Member_2_760301

Or just create css for each one:

Css example

Richard Korts

ASKER

To A. Cristian Csiki,

I tried the 25/26, etc. Nothing changed.

I know about the custom css; kind of a pain, I thought this technique would be easier. If I want 5 different widths, 5 different classes or a bunch of different ID's, etc.

Anyone else have a non-css solution?

Why does contact for 7 document the technique of 25/100 if it doesn't work?

Richard Korts

ASKER

I added this to the theme css:

.wpcf7_25 {
width: 100px;}

Then I changed the contact form like this:

Full Name (required) 
[text* your-name class:wpcf7_25] 

Has no effect.

What's wrong?

Member_2_760301

Hi Richard,

#name-field
{
    color: #f00;
    border: 1px solid #f00;
    width: 50%;

}

Open in new window

Call:

Full Name (required) 
[text* your-name id:name-field]

Richard Korts

ASKER

A. Cristian Csiki

It works; it's just that I have to have a separate css for each field.

Why doesn't a class work?

Thanks

ASKER CERTIFIED SOLUTION

Member_2_760301

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial