Title: [Plugin: Contact Form 7] Customizing form button
Last modified: August 20, 2016

---

# [Plugin: Contact Form 7] Customizing form button

 *  [mj thiel](https://wordpress.org/support/users/mj-thiel/)
 * (@mj-thiel)
 * [14 years, 4 months ago](https://wordpress.org/support/topic/plugin-contact-form-7-customizing-form-button/)
 * Aloha everyone,
    I’ve followed some of the tutorials in the forum trying to customize
   by own button. In my lowly css skills i have managed to get the button to appear,
   however it has a partial gray border I can’t get rid of.
 * here is my sample site for those of you kind enough to take a look.
    [http://mjtdesign.us/](http://mjtdesign.us/)
 * the css is a super simple class:
    .submit_button { color: white; font-size: 0px;
   float:left; width: 135px; height: 60px; border:none; margin: 0px; padding: 5px;
   background: url(./images/submit.png) 0 0 no-repeat; }
 * thanks everyone!
    mj
 * [http://wordpress.org/extend/plugins/contact-form-7/](http://wordpress.org/extend/plugins/contact-form-7/)

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

 *  Plugin Author [Takayuki Miyoshi](https://wordpress.org/support/users/takayukister/)
 * (@takayukister)
 * [14 years, 4 months ago](https://wordpress.org/support/topic/plugin-contact-form-7-customizing-form-button/#post-2475577)
 * I checked your site. First, you have added your custom styles to Contact Form
   7’s stylesheet file. It is a bad practice because they will be removed when the
   plugin is updated. You should add custom styles to your theme’s stylesheet instead.
 * When I checked the stylesheet, the style was not as you wrote above. It was
 *     ```
       .submit_button {
            color: white; <-- change this to your color
            font-size: 0px;
       	 float:left;
   
            width: 135px; <-- change this to your button image width
            height: 60px; <-- change this to your button image height
            border:none;
            margin: 0px;
            padding: 5px;
            background: url(./images/submit.png) 0 0 no-repeat;
       }
       ```
   
 * I found some lines using incorrect CSS syntax, for example,
    `<-- change this
   to your button image width` those can’t be work as comments and break the CSS.
   I suppose that those mistakes made `border:none;` setting disabled.
 *  Thread Starter [mj thiel](https://wordpress.org/support/users/mj-thiel/)
 * (@mj-thiel)
 * [14 years, 4 months ago](https://wordpress.org/support/topic/plugin-contact-form-7-customizing-form-button/#post-2475754)
 * Thank you Takayuki!
    You were right, that did remove the gray border but also
   removed my text!
 * Also, for some reason the ‘submit button action’ is relegated to the upper half
   of the button.
 * So much appreciate your assistance!
    Happy new year! mj
 *  Thread Starter [mj thiel](https://wordpress.org/support/users/mj-thiel/)
 * (@mj-thiel)
 * [14 years, 4 months ago](https://wordpress.org/support/topic/plugin-contact-form-7-customizing-form-button/#post-2475767)
 * Figuring the css bit out Taka. However, my sent message is not visible, and the
   email message contains no information, simply this:
 * From: [your-name] <[your-email]>
    Subject: [your-subject]
 * Message Body:
    [your-message]
 *  Thread Starter [mj thiel](https://wordpress.org/support/users/mj-thiel/)
 * (@mj-thiel)
 * [14 years, 4 months ago](https://wordpress.org/support/topic/plugin-contact-form-7-customizing-form-button/#post-2475769)
 * Thanks for letting me know about where to place the css. Moved to my theme style
   sheet.

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

The topic ‘[Plugin: Contact Form 7] Customizing form button’ is closed to new replies.

 * ![](https://ps.w.org/contact-form-7/assets/icon.svg?rev=2339255)
 * [Contact Form 7](https://wordpress.org/plugins/contact-form-7/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/contact-form-7/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/contact-form-7/)
 * [Active Topics](https://wordpress.org/support/plugin/contact-form-7/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/contact-form-7/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/contact-form-7/reviews/)

 * 4 replies
 * 2 participants
 * Last reply from: [mj thiel](https://wordpress.org/support/users/mj-thiel/)
 * Last activity: [14 years, 4 months ago](https://wordpress.org/support/topic/plugin-contact-form-7-customizing-form-button/#post-2475769)
 * Status: not resolved