WordPress.org

Ready to get started?Download WordPress

Forums

Custom Contact Forms
Field Names to the Left of the Fields? (4 posts)

  1. OhYa1337
    Member
    Posted 1 year ago #

    is there a way
    Field Names to the Left of the Fields?

    like this:

    Name: [____________]

    Phone: [____________]

    http://wordpress.org/extend/plugins/custom-contact-forms/

  2. stevielamb83
    Member
    Posted 1 year ago #

    I would think that you could achieve this using CSS. I would try to float the form labels left using CSS. ie (label {float:left;}. Also, you may need to give the labels a width.

  3. peteratomic
    Member
    Posted 1 year ago #

    Didn't work for me. :(

    Find a BR tag under every form label when I view source. Is that being written by the plugin??

  4. Marjolijn Harvey
    Member
    Posted 1 year ago #

    do you use firebug in mozilla?
    Try that to find the CSS selector you need.
    I've achieved it using float:left for labels and float:right for input fiels, however, to make it pretty I also had to use position:relative for the fields to move them up to align with the labels and clear:both to make sure that the captha numbers weren't in the middle of nowhere.
    Here is my test site where you can see the form,
    and here is the CSS:`/*Changing the form font family and size*/
    label {
    font-family: calibri,arial,verdana,sans-serif;
    font-size: 17px;
    margin-right: 0.5em;
    cursor: default;
    }

    /*Changing the form default bottom/top padding and margins to none and a larger maximum width*/
    form.customcontactform div, form.customcontactform-sidebar div {
    margin: 0;
    padding: 0;
    }
    form.customcontactform, form.customcontactform-sidebar {
    margin-top: 0px;
    margin-bottom:0px;
    padding-top: 0px;
    padding-bottom:0px;
    max-width: 800px;
    }

    /* Changing the button colour, giving it rounded corners, floating it to the right and clearing both to move it from the default below the form on the left, to the custom below the form on the right*/
    .button, .Button, input[type="submit"] {
    background-color: #46679E;
    border: 2px solid #46679E;
    color: #FFFFFF;
    font-weight: bold;
    height: 24px;
    line-height: 16px;
    padding: 0 2px;
    -moz-border-radius: 10px;
    -khtml-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    clear: both;
    float:right;
    }

    /*Custom Form Labels for Name, Email, Message and captha to float left*/
    form.customcontactform div label, form.customcontactform-sidebar div label {
    float:left;
    }
    /*Custom form input fields for Name, Email, Message and captha to float right, give an equal width and move down 25px to align with the labels*/
    form.customcontactform div input, form.customcontactform div select, form.customcontactform-sidebar div input, form.customcontactform-sidebar div select, form.customcontactform div textarea, form.customcontactform-sidebar div textarea{
    float:right;
    width: 450px;
    bottom: 25px;
    position: relative;
    }
    /*Move the captcha number image from below the label 'Type the numbers', to next to the label*/
    .customcontactform div img#captcha-image{
    clear: both;
    float: left;
    position: relative;
    top: 20px;
    left: 150px;
    }
    /*Move the 'Type the numbers' input text up so it is align with the label and captcha number image*/
    form.customcontactform div input#captcha1{
    position: relative;
    top: -30px;
    }
    `

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.