style.css file for Contact Form 7

See Styling Contact Form

Takayuki, many thanks for your quick response. I have read your information at this link https://contactform7.com/styling-contact-form/

I have tried a few different types of style changes with no effect. For example when I cut and paste the code below into my child-theme css it has no effect on the Contact-form 7

input[type=”text”]
{
background-color: #fff;
color: #000;
width: 200%;
}

Then I tried to get it to work by using the id-“113” of the contact form I want to style, still no change:

input[type=”text” id=”113″]
{
background-color: #fff;
color: #000;
width: 200%;
}

then I try using this

.wpcf7 .input[type=”text” id=”113″]
{
background-color: #fff;
color: #000;
width: 200%;
}
Also I have copied the full style.css file from the Contact Form 7 folder and pasted it into my child-theme style.css file. Made some changes and nothing takes effect. I have also checked that the css is making contact with the webpage as I changed the background color as a test on one or two divs to make sure everything is working and it is. (sometimes Dreamweaver text editor can act up a bit)

And still I try. Any chance you can direct me to where I am going wrong? Thanks for your time.

I just installed the plugin and also couldn’t find the css-file in the Edit Plugins page, but i found the file with my FTP client in
contact form-7 > includes > css > styles.css.
Just copy all the code to your own style.css and then you can edit from the back-end of your site. Good luck.

Let me offer another suggestion that goes a little beyond what Dirk suggests.

I use a plugin entitled My Custom CSS and I place all my CSS tweaks in it, rather than in separate stylesheet files. For example, in my copy of My Custom CSS, I have the following CF7 style changes:

/* added for CF7 scholarship information */
.title2 {float:center; width:100%; font-size: 15px; background-color: #f3f7f9; line-height: 24px; border: 1px solid #000;}
.poc5 {float:left; width:26%; font-size: 11px; background-color: #f3f3f9;}
.poc6 {float:left; width:34%; font-size: 11px; background-color: #f3f3f9;}
.poc7 {float:left; width:11%; font-size: 11px; background-color: #f3f3f9;}
.poc8 {float:left; width:29%; font-size: 11px; background-color: #f3f3f9;}
.poc9 {float:left; width:100%; font-size: 15px; font-weight: bold; background-color: #f00;}
/* end of add */

/* added to format CF7 scholarship application form */
.scholarship_appl{
    background: #E0E0E0;
    margin: 10px auto;
    margin-left: 0;
    position: relative;
    border: 2px solid #D4F4FF;
    border-radius:10px;
-moz-border-radius:10px;
    box-shadow: 10px 10px 5px #888888;
}
/* end of add */

/* added to format CF7 Event Form */
.chapter_activity{
    background: #E0E0E0;
    margin: 10px auto;
    margin-left: 0;
    position: relative;
    border: 2px solid #D4F4FF;
    border-radius:10px;
-moz-border-radius:10px;
    box-shadow: 10px 10px 5px #888888;
}
/* end of add */

/* added to set CF7 textarea border and fill color */
.wpcf7 input[type=text], .wpcf7 textarea {
	border: 1px solid #A0A0A0;
	border-radius:5px;
        background:#CCE5FF;
}
/* end of add */

/* end of alignment of input boxes */
.wpcf7 input[type=file] {
	margin-left: 20px;
}

I always add comments (between the /* and */) to help me remember what a CSS segment does. You can also include the date you added that segment.

I have more than one CF7 form on a site and if you want to see one of the forms with some of the above CSS implemented, point your browser to https://lcoc-moaa.org/scholarships/application/

Hope this helps.

Please use backticks or the code button, not single quotes to post code. I fixed yours above.

@takayuki, I have the same problem as vinsprint. I have used the child theme method and whenever I try to add css changes to it, there’s no effect in the website. Can you tell us what’s wrong with this? I really like the child theme idea and would love it if it would work on my site.

Here’s the link to the site that I’m working on:

https://steelheadinn.com/

Many thanks!

h0n3y

@h0n3y – As per the Forum Welcome, please post your own topic.

Posting in an existing topic prevents being able to track issues by topic. Added to which, your problem – despite any similarity in symptoms – is likely to be completely different.

@buzztone, thank you for responding but I’ve already solved my issue. ??

There have a plugin that help to change layout of your form easily and without editing in css file. simple install plugin and change layout according to you.

Please checkout this

https://www.ads-software.com/plugins/custom-skins-for-contact-form-7

Hi Dave (davejampole)

I like your form style very much. I want to make it the same way. When you say you use a plugin, Is this plugin “My Custom CSS ” available in WP site?

Is it possible to create a child style and copy / paste all the CSS tweaks in it. In this way I can use whenever I need it and not for all forms. I still want to keep the original as it is.

Also on your site I like the Event Widget!! is it available on WP ?

Thanks
Jacob

Jacob,

Multiple forms on the same site, but with different CSS formatting is no problem. Simply surround each form with <div class = "form_name"> and </div> in the Form section of the Edit Contact Form page and replace form_name with a unique name for each form and then include the styling you want for that form.

Yes, My Custom CSS is the stylesheet plugin I use. There are other ways to include CSS tweaks on your site, but to me, My Custom CSS is the easiest in that CSS tweaks for the entire website are all in one place and that make updating and changing easy.

The ‘Event Widget’ as you call it is All-in-One Event Calendar by Time.ly For calendaring and scheduling, you can’t beat it.

Hi Dave,

First of all thank you for your help and also for your brave service to our country. I truly liked the way how you manage your style sheet( through plugin). I may end up creating one plugin myself similar to yours & publish it to WP for others to use. I’ve seen a few plugins like that but not good ones.

It truly make sense when you want to use it for many forms. It really reduces a lot of maintenance headache plus it is easy to add and modify it.

But went ahead and created a custom css file (child css) stored it to the contact form-7 > includes > css folder where CF7 default css file resides. Then I edited my form like you recommended surround each form with <div class = “form_name”> and </div> in the Form section hoping that it will refer the style in the custom css file. (did not work)

I think I may have to refer the custom CSS file somewhere in the form but not sure where and how. I guess I have to read more on this topic.
But if you know a quick way please share it with me. !!

Below is what I did

<div class =”Membership Registration Form”>
<div style=”margin: 0 auto; width:750px”>
[text* name watermark “First Name”] [text* last-name watermark “Last Name”]
[email* email-197 watermark “Email”] [tel tel-386 watermark “Phone Number”]
Click this link to varify USCF ID
[number number-115 watermark “USCF ID”]
<p>Security Code
[captchac captcha-542 size:m]
[captchar captcha-542]<p>
<p>Type Of Membership
[select* menu-346 “Adult Membership $10/- per year” “Child Membership (Age 13 and under) $5/- per year”]<p>
[submit “Pay Now”]
<div id=”tip”> Upon clicking Pay Now, you will be redirected to PayPal to enter in your credit card information. A PayPal account is <span>not required</span> to make a credit card payment. </div>
</div>
</div>

Many Thanks Dave
Jacob

Jacob,

I may have misspoke. The <div class = "form_name"> is the VERY FIRST tag on your form and its close </div> is the VERY LAST tag on your form. Suggest that from stylesheet, you copy the form name using [CTRL]-C, go to the contact form design page and paste using [CTRL]-V; that way there is no possibility of a typo. The form style code should begin with something like .form_name; just don’t copy the period or the semi-colon.

The spaces in your form name might be an issue, so I would suggest replacing the spaces with either a dash or underscore character.

Dave

Hey Dave,

Thanks again for your help. I got it to somewhat working now. It looks like CF7 will not read custom css file. I ended up coping the style code into the default style.css, However I’m still having difficulty on combining all these input type fields into one section because the display of these fields are the same (that did not work). I wonder if this is a limitation in CF7 ?. Maybe it is because of the site Theme I’m using. I also tried using .wpcf7 to have the same field type input display through my site (that did not work either). If there is a hidden trick in all these please let me know. thanks a lot for your time & know how !!. By the way how did you reduce the size of your fields on the form ?
https://www.greensborochess.org/membership-registration-form/

/* added to format CF7 Membership Application Form */
.Membership_Registration_Form {
background: #E0E0E0;
margin: 10px auto;
margin-left: 0;
position: relative;
border: 2px solid #D4F4FF;
border-radius:10px;
box-shadow: 10px 10px 5px #888888;
}

/* added to set CF7 textarea border and fill color */
.Membership_Registration_Form input[type=text], .Membership_Registration_Form textarea {
border: 1px solid #0C0C0C;
border-radius:5px;
background:#CCE5FF;
}
/* end of add */

.Membership_Registration_Form input[type=email] {
border: 1px solid #0C0C0C;
border-radius:5px;
background:#CCE5FF;
}

.Membership_Registration_Form input[type=number] {
border: 1px solid #0C0C0C;
border-radius:5px;
background:#CCE5FF;
}

.Membership_Registration_Form input[type=tel] {
border: 1px solid #0C0C0C;
border-radius:5px;
background:#CCE5FF;
}

/* end of alignment of input boxes */
.Membership_Registration_Form input[type=file] {
margin-left: 20px;
}

Best Regards
Jacob

Jacob,

Get me the content from the Form section of the Edit Contact Form page and I’ll take a look at it and see what I an do. You can either post it here or send it to me by email at [email protected]

Dave