WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
Customizing form button (5 posts)

  1. mj thiel
    Member
    Posted 2 years 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/

  2. Takayuki Miyoshi
    Member
    Plugin Author

    Posted 2 years 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.

  3. mj thiel
    Member
    Posted 2 years 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

  4. mj thiel
    Member
    Posted 2 years 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]

  5. mj thiel
    Member
    Posted 2 years ago #

    Thanks for letting me know about where to place the css. Moved to my theme style sheet.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic