Contact Form 7 Customised Submit Button

  • Resolved marques_uk

    (@marques_uk)


    15 years, 1 month 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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Rev. Voodoo

    (@rvoodoo)

    15 years, 1 month 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?

    Thread Starter marques_uk

    (@marques_uk)

    15 years, 1 month 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

    Rev. Voodoo

    (@rvoodoo)

    15 years, 1 month 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

    Thread Starter marques_uk

    (@marques_uk)

    15 years, 1 month 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}

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Contact Form 7 Customised Submit Button’ is closed to new replies.