Grow your CSS skills. Land your dream job.

Style an Opt-In Form

  • # May 24, 2010 at 7:03 pm

    Hi,
    I am trying to style an opt in form inside of a wordpress text widget but I can’t seem to get my head aroung how to do it.
    I was wanting to put an image in the top left corner with some text to the right of the image and my text input forms below.
    I have some css style but I am not sure what I need to do with it.
    Do I need to define the exact widget?
    or define the form within the widget?
    Here is the css that I have…

    Code:
    #subsidiary #text-9 #website-workbook-form {
    width: 250px;
    }
    #website-workbook-form .fieldset {
    background-color:#DEEEFF;
    border:1px solid #781351;
    margin:0 0 5px;
    padding:1px;
    }
    #website-workbook-form .legend {
    background:transparent url(images/free-report.jpg) no-repeat;
    border:1px solid #781351;
    color:#FFFFFF;
    font-family:arial,verdana,sans-serif;
    font-size:15px;
    font-weight:bold;
    height:32px;
    padding:2px 6px;
    }

    /* Form information */
    #website-workbook-form p.form-info {
    width:275px;
    }

    This is obviously not all of the css for the form but I fgured if I can’t get the basic properties right there is not much point in trying to get the rest sorted.

    the site I am working on is…
    http://goldcoastwebsites.com/
    to access the site to have look you will need the following…
    UN
    help
    PW
    123456

    inside the text widget I have the following…

    Code:
    What Goes Into A Successful Website

    What Makes A Successful Website.

    Simply enter your first name and email address in the spaces provided below:











    We respect your email privacy

    I will keep trying to figure it out on my own but would love some feedback and help.

    Some of the styles above are not what I want in the finished result they have just been used for testing purposes.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".