Contact Form 7

[RecipeSocial]

Hi Bill,

I’ve installed the Contact Form 7 plugin and but it appears to be conflicting with something, as the look of it is wrong. Please can you take a quick look and let me know what you think.

I’ve had a look for settings for the plugin, but there doesn’t appear to be any, at least not with the free version anyway.

If you need login details, let me know.

Thanks,
Christian.

[Bill Robbins]

I took a look at the contact form. It appears that we have a white background with white form inputs. You can change the color this way if you’d like to:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   #author,
   #comment,
   #email,
   #url,
   input#s,
   textarea,
   input[type="email"],
   input[type="text"],
   .gform_body input,
   .gform_body textarea {
   	background-color: #f3f3f3;
   	border-left: 4px solid #2686B1;
   }
   

3. Update your settings.

See how that works and let me know if you have trouble,
Bill

[RecipeSocial]

Hi Bill,

Thanks for the code.

It is better, however, it’s still not quite neat or polished as i’d like.

I’m wondering if it would better remove the CSS code and change the actual background colour of the contact section instead. Is this a possibility?

Thanks,
Christian.

[RecipeSocial]

Hi Bill,

I forgot to mention, i’d be looking to change the background colour just on the contact section. Is this possible?

Thanks,
Christian.

[Bill Robbins]

It is possible to change just the contact section. Here’s how to do that:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   .contact {
   	padding: 30px;
   	background-color: #dadada;
   }
   

3. Update your settings.

Let me know how that goes,
Bill

[RecipeSocial]

Hi Bill,

Thanks for the code, it has worked.

Now seeing the results, i’m wondering if the greay boxed contact area, should just be outlined with a black line to tie it all together. It would be more minimal and less grey! and hopefully easier on the eye.

Might this be possible?

Thanks,
Christian.

[Bill Robbins]

You’re welcome to add a border. The snippet above could be changed like this:

.contact {
	padding: 30px;
	background-color: #dadada;
	border: 1px solid #000000;
}

which would give you a 1 pixel, solid border that is black. You can change the width by making the 1px larger and the color by switching out the #000000 for the color you’d like to have.

Have fun,
Bill

[RecipeSocial]

Hi Bill,

Thanks for the code. I have taken your CSS advice on board and just changed the background colour from grey to white!

Now i just need to figure out how to tweak the CSS on the contact 7 form.

Would I do that in the edit section of the plugin?

Thanks,
Christian.

[Bill Robbins]

I don’t know if Contact Form 7 has any built in tools to edit its styling. What specifically about how it looks are you wanting to change?

[RecipeSocial]

I can’t see any edit features, maybe they come with the upgrade?

Just wanting to change the data entry field, even just a 1px line to outline each data field would be fine.

Might this be possible?

Thanks,
Christian.

[Bill Robbins]

Gotcha. That would be set the theme and not the plugin. In CSS an outline is typically a border. You would add it in a similar way to how it we did the contact section.

#author,
#comment,
#email,
#url,
input#s,
textarea,
input[type="email"],
input[type="text"],
.gform_body input,
.gform_body textarea {
	border-left: 4px solid #2686B1;
	border-top: 1px solid #cccccc;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
}

That will keep the colored border on the left and add a 1 pixel border to the other sides. If you them the same on all sides, then change the border-left in that snippet to match the others.

See how that goes,
Bill

[RecipeSocial]

That did it! Thanks 🙂 You’re pretty good at this CSS stuff! 😉

Christian.

[Bill Robbins]

Thanks 🙂

[Author]

Posts