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 /):
<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
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
WordPress
Last Comment
A. Cristian Csiki
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?
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?
ASKER
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?
.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?
Hi Richard,
Call:
<p>Full Name (required)<br />
[text* your-name id:name-field] </p>
#name-field
{
color: #f00;
border: 1px solid #f00;
width: 50%;
}
Call:
<p>Full Name (required)<br />
[text* your-name id:name-field] </p>
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
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
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
Try:
Open in new window