Styling Contact Form 7

CMS & WordPress
1

Hi,

Hope someone from Sitepoint can come to the rescue as this issue has stumped the forum over at Wordpress.

Here is the site url for the contact page which is giving the problem: mysite

I am using the theme ‘modern clix’ and this is ‘contact form 7’ plugin.

The problem I’m having is styling the header the same as the other pages (Portfolio, About and Blog headers, with the grey subtext underneath.

I have managed to put the header I need above the form, but the ‘Your Name (required)’ is sitting above it, along with the word contact above that.

The word ‘contact’ which I want to remove is being generated by WP. Basically whatever I write as the title for the page/navbar title, also comes up here.

Is there a way to stop this happening? Or is there another way to achieve what I’m looking for.

Also I need the ‘Your Name (required)’ bit to sit above the first line of the form as well.

Is this just a CSS issue? Or something I need to delve further into with the template system?

Thanks for any help and please let me know if any more info is required.

Cheers

2

The ideal would be to correct the WP functionality, but it can be a bit of a maze of code, and that’s not my area. You can use CSS to change the presentation, so it can be fixed visually, though this is not the best solution—but sometimes the best one can do!

So, try these changes. Firstly, add the code in red (in styles.css):

div.wpcf7 {
  [COLOR="Red"]clear: both;[/COLOR]
  margin: 0;
  padding: 0;
}

That will fix the Your name Required text.

Then remove the code in red here (contact, line 365):

#content {
  float: left;
  overflow: hidden;
  [COLOR="Red"]padding-top: 14em;[/COLOR]
}

And finally, add this new rule to your “contact” style sheet:

#content h3 {display: none;}

Hope that helps!

3

I am assuming you simply pushed the new page link then made your form. Most page templates have the page’s name as the first item, and you say you don’t want this. You need to make a page template. Use the link as well as page.php to get started. A handle on php, html and css is needed.

4

@ Ralph. Thanks mate. I did all that and it fixed everything perfect as you said. Only I had an issue with the h3 tag missing from my blog posts and it shoved the blog page up a bit far. I think if I stuck with it, it could of been worked around but decided to go back into the template and try again there.

@rguy84. Yeah I have a good basic knowledge of the template system as I built the site with it. Only when I tried to include this plugin with it I had no luck, so tried the method of ‘page new’ to see if playing around with CSS would get it working.

Tonight I found the reason it didn’t work the first time. When adding the code for the plugin ‘[contact-form 1 “Contact form 1”]’ in the page it needed

<?php echo do_shortcode('[contact-form 1 "Contact form 1"]'); ?>

. Not being clued up in php I missed out some of the code.

Anyways, sorry for the lengthy reply, but maybe it will help someone else out who comes up against the same thing. Appreciate both your time - got there in the end.:slight_smile:

Cheers

5

Thanks for the feedback, west end lane, and glad you found a good solution. I wasn’t sure if the H3 appeared on other pages (I only checked one or two where it didn’t appear). Your solution is much better than what I offered anyway. Better to go to the source of the problem. :slight_smile:

6

What i was suggesting, was to make a template, which is a skeleton. If you put [contactform] directly onto the template it will not work. Here is how things get executed. Stuff in the “content” section, stuff in the template, then wp core stuff. The contact form plugin is made to run in the content section, from what I gather from your post, you put it into the template.

7

Hi rguy. Yes I do have the contact form 7 sitting in my ‘content’ section, but I also have the ‘contact page.php’ I made sitting in the template (themes folder). Does that sound right?

I’ve run a few tests and seems to be working fine (test mails are landing in my inbox).

@ ralph - cheers mate.

8

Yes, that sounds correct

9

Hey guys, I just want to share a tutorial someone who can read about. This is helpful because anyone who has less knowledge (beginners or maybe intermediate users) about styling contact form 7 can benefit from it. Customize Contact Form 7 in Wordpress.

10

contact form 7 is my favourite contact form and I’ll give a try to tutorial here.