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
    • WPMU DEV Initiate

    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.

  • Abdul Wajed
    • Staff

    Hi jftitan,

    Hope you are having a great day!

    Glad to know that you figure out the CSS and heading in the right direction.
    And for additional form entries, unfortunately currently there is no options to add them but hopefully it will be considered in the future updates. Thanks

    Have a nice day. Cheers! :smiley:
    Wajed

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.