Customizing CSS and Entries

I am wanting to customize the CSS styling of the Contact Widget, also is there an ability to add an additional form entries. I wish to add Name/LastName, Telephone number. But top priority is making a custom style sheet to make the form conform to the theme.

input[type="text"],
input[type="email"],
textarea
{
background-color: #fff;
color: #000;
width: 50%;
}

Am I heading in the right direction?

  • jftitan

    I've managed to work up something like this;

    form.wp-contact-form input {display: block;}
    form.wp-contact-form input[type="text"],
    form.wp-contact-form input[type="email"],
    form.wp-contact-form textarea
    {
    background-color: #fff;
    color: #000;
    width: 100%;
    }

    .button {
    font-size:16px;
    font-family:Arial;
    font-weight:normal;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
    border:1px solid #337fed;
    padding:9px 18px;
    text-decoration:none;
    background:-moz-linear-gradient( center top, #3d94f6 27%, #1e62d0 78% );
    background:-ms-linear-gradient( top, #3d94f6 27%, #1e62d0 78% );
    filter:progid:smiley:XImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0');
    background:-webkit-gradient( linear, left top, left bottom, color-stop(27%, #3d94f6), color-stop(78%, #1e62d0) );
    background-color:#3d94f6;
    color:#ffffff;
    display:inline-block;
    text-shadow:1px 1px 0px #1570cd;
    -webkit-box-shadow:inset 1px 1px 0px 0px #97c4fe;
    -moz-box-shadow:inset 1px 1px 0px 0px #97c4fe;
    box-shadow:inset 1px 1px 0px 0px #97c4fe;
    }.css_btn_class:hover {
    background:-moz-linear-gradient( center top, #1e62d0 27%, #3d94f6 78% );
    background:-ms-linear-gradient( top, #1e62d0 27%, #3d94f6 78% );
    filter:progid:smiley:XImageTransform.Microsoft.gradient(startColorstr='#1e62d0', endColorstr='#3d94f6');
    background:-webkit-gradient( linear, left top, left bottom, color-stop(27%, #1e62d0), color-stop(78%, #3d94f6) );
    background-color:#1e62d0;
    }.css_btn_class:active {
    position:relative;
    top:1px;
    }}

    So far I am heading in the right direction. I am also trying to figure out if I can add additional form entries.