[Plugin: Contact Form 7] Customizing form button

  • mj thiel

    (@mj-thiel)


    14 years, 4 months ago

    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)

    14 years, 4 months ago

    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

    (@mj-thiel)

    14 years, 4 months ago

    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

    (@mj-thiel)

    14 years, 4 months ago

    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

    (@mj-thiel)

    14 years, 4 months ago

    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.