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 KortsAsked:
Who is Participating?
 
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
 
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
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

 
Richard KortsAuthor 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
 
Richard KortsAuthor 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 KortsAuthor 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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.