WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
Adding Classes (1 post)

  1. msuth
    Member
    Posted 2 years ago #

    Hi,

    I'm new to WordPress and have just installed your contact form.

    I downloaded the styles.css and added the following two classes.

    .blueform input[type=text], textarea {
      -webkit-transition: all 0.90s ease-in-out;
      -moz-transition: all 0.90s ease-in-out;
      -ms-transition: all 0.90s ease-in-out;
      -o-transition: all 0.90s ease-in-out;
      outline: none;
      padding: 3px 0px 3px 3px;
      margin: 5px 1px 3px 0px;
      border: 1px solid #DDDDDD;
    }
    
    .blueformfocus input[type=text]:focus, textarea:focus {
      box-shadow: 0 0 5px rgba(81, 203, 238, 1);
      padding: 3px 0px 3px 3px;
      margin: 5px 1px 3px 0px;
      border: 1px solid rgba(81, 203, 238, 1);

    The page I have my contact form is http://msuth.co.uk/tdp/3/contact-us/ as you can see, the multi-line textbox at the bottom picks up the css but the single line ones won't.

    The site I got this CSS from is http://css-tricks.com/snippets/css/glowing-blue-input-highlights/

    I had to give both blocks a name (.blueform and .blueformfocus) as without this it affected the search bar at the top.

    http://wordpress.org/extend/plugins/contact-form-7/

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic