WordPress.org

1. marques_uk
   Member
   Posted 2 years ago #
   

   Hello,

   I'm putting together a contact form on my website, and I'm using the plugin 'Contact Form 7'. I've styled the input and text area to how I'd like it but I'd also like to style the submit button.

   I've searched the internet and found loads of tutorials on how to style the submit button, but what I want to do is make the submit button a rollover image? Is this possible? At the moment I can only create an image on the background of the button?

   If anyone knows how I can achieve this, that would be brilliant?

   Thanks in advance

2. Rev. Voodoo
   Volunteer Moderator
   Posted 2 years ago #
   

   http://voodoopress.com/2011/02/configuring-contact-form-7-to-work-perfectly-with-a-twentyten-child-theme/

   I have a bunch of custom styling going on for CF7

   But you'll notice in that big batch of css
   

   .wpcf7-form fieldset input[type="submit"]:hover,
   .wpcf7-form fieldset input[type="submit"]:focus

   I can't recall if cf7 puts the fieldset in there or not, if not just pull that part out of the selector

   That works for selecting and hovering, just sub in your own css rules

   I think that is what you are asking?

3. marques_uk
   Member
   Posted 2 years ago #
   

   Yes I think that's what I'm after. Although I'm not entering the code directly into my page i.e. contact.php I'm editing it via Contact Form 7 Settings. How would I add the above code to my page? I want to do it this way so I can easily add a contact form to new page via WP CMS with the same style rollover submit button etc?

   All I have at the moment is [submit]?

   I was going along the route of [submit class: contact-button ""]?

   Thanks again

4. Rev. Voodoo
   Volunteer Moderator
   Posted 2 years ago #
   

   You'll have to look at the output of the form, by doing view browser from the page the form is posted to

   I believe the .wpcf7-form wraps all wpcf7 forms

   So I think using .wpcf7-form input[type="submit"] should cover all submit buttons on all cf7 forms

   you wouldn't need to add a class unless you want to style each button differently

5. marques_uk
   Member
   Posted 2 years ago #
   

   Thanks for your help Rev.Voodoo. I've managed to achieve what I was after, for anyone else looking to do the same, here's what you need to put in your stylesheet.

   All you need is [submit] in your form code as normal and to style it use the following:-

   Style input fields
   .wpcf7-form input {your style}

   Style text area
   .wpcf7-form textarea {your style}

   Style submit button
   .wpcf7-form input[type="submit"] {your style}

   Style submit button on hover
   .wpcf7-form input[type="submit"]:hover {your style}

Topic Closed

This topic has been closed to new replies.