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 /):

<p>Full Name (required)<br />
    [text* your-name 25/] </p>

<p>Address (required)<br />
    [text* your-addr 25/] </p>

<p>City (required)<br />
    [text* your-city 25/] </p>

<p>Zip (required)<br />
    [text* your-zip 10/] </p>

But it does nothing; how do I correct this?

Thanks
get-a-quote-form.jpg
Richard KortsBusiness Owner / Chief DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

A. Cristian CsikiSenior System AdministratorCommented:
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

0
A. Cristian CsikiSenior System AdministratorCommented:
Or just create css for each one:

Css example
0
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
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?
0
CompTIA Security+

Learn the essential functions of CompTIA Security+, which establishes the core knowledge required of any cybersecurity role and leads professionals into intermediate-level cybersecurity jobs.

Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
I added this to the theme css:

.wpcf7_25 {
   width: 100px;}

Then I changed the contact form like this:

<p>Full Name (required)<br />
    [text* your-name class:wpcf7_25] </p>

Has no effect.

What's wrong?
0
A. Cristian CsikiSenior System AdministratorCommented:
Hi Richard,

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

}

Open in new window


Call:

<p>Full Name (required)<br />
    [text* your-name id:name-field] </p>
0
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
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
0
A. Cristian CsikiSenior System AdministratorCommented:
Hi Richard,

You can add them in your style.css and there is no need to create more css files.

Ex:
#name-field-25
{
    color: #f00;
    border: 1px solid #f00;
    width: 25;
}

#name-field-10
{
    color: #f00;
    border: 1px solid #f00;
    width: 10;
}

Open in new window


Usage:
<p>Full Name (required)<br />
    [text* your-name id:name-field-25] </p>
<p>Address (required)<br />
    [text* your-address id:name-field-10] </p>

Open in new window


In your case, you have full name, address and city with width 25, so you can use:
<p>Full Name (required)<br />
    [text* your-name id:name-field-25] </p>
<p>Address (required)<br />
    [text* your-address id:name-field-25] </p>
<p>City (required)<br />
    [text* your-city id:name-field-25] </p>
<p>Zip (required)<br />
    [text* your-zip id:name-field-10] </p>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
WordPress

From novice to tech pro — start learning today.