Support » Plugin: Contact Form 7 » [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/

    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/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    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.

    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

    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]

    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.