WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
Can someone please help how to align the text field (14 posts)

  1. dtgeulah
    Member
    Posted 3 years ago #

    I would like to show the labels side by side with the text field. However, when I do this the text field appears right next to the label. Thus, the text fields are not corretly aligned. I make spaces but WP does not consider them. I tried <p> but it does not help.
    I appreciate if somebody could assist me

  2. glideranderson
    Member
    Posted 3 years ago #

    You will have to use specific CSS Styling targeted at the label and input fields.
    You can float the input fields to the left:
    'input {
    float:left;
    }
    label {
    float:right;
    }'

  3. James_Bull
    Member
    Posted 3 years ago #

    I would like to know where you put that bit of CSS code? Is it in the file called contact-form-7/styles.css under the plugin edit tab for Contact Form 7? Or should it be put in the overall theme style sheet?

    (If it's the former then my file contact-form-7/styles.css say it is inactive, how do I activate it?)

    I would be very grateful for some help.

  4. esmi
    Forum Moderator
    Posted 3 years ago #

    Try adding it to the bottom of your theme's stylesheet.

  5. James_Bull
    Member
    Posted 3 years ago #

    That hasn't worked.

  6. James_Bull
    Member
    Posted 3 years ago #

    Actually it has! Thanks a lot much appreciated.

  7. mross55
    Member
    Posted 3 years ago #

    Hi,

    Is there a way to set up a large contact form up in two columns instead of one (the way its set up) otherwise it would be scrolling too far down the page.
    For example, have name: email: on the same line with the boxes below them

    I'd be grateful for some help.

    Thanks

  8. James_Bull
    Member
    Posted 3 years ago #

    <div style="float: left; width: 50%;">

    <p>Your Name [text* your-name] </p>

    </div>

    <div style="float: right; width: 50%;">

    <p>Your Email [email* your-email] </p>

    </div>

    Worked for me

  9. mross55
    Member
    Posted 3 years ago #

    Perfect! You're a star!

    Thanks

  10. mross55
    Member
    Posted 3 years ago #

    I have 3 check boxes I'd like on a single row instead of listed underneath each other.

    Can someone please explain how to do that?
    Thank you.

  11. mross55
    Member
    Posted 3 years ago #

    I read this page http://contactform7.com/2009/11/21/custom-layout-for-checkboxes-and-radio-buttons/

    The default style on mine is in a list format, yet it doesn't say so in the code: <p>Text Printing[checkbox Text-Printing "Colour Print" "B&W" "Colour & B&W"]</p>

  12. mross55
    Member
    Posted 3 years ago #

    Hi,
    The two columns worked really well.

    How do you get 3 or 4 columns?

    I've tried different things; e.g.
    <div style="float: left; width: 100%;"> <p>Your Name [text* your-name]Your Email [email* your-email] Your Name [text* your-name]Your Email [email* your-email]</p>
    </div>

    and other formats like left 25% and right 25%

    Help would be appreciated.
    thanks

  13. James_Bull
    Member
    Posted 3 years ago #

    I haven't tried this so not sure if it works, but I came across this and it sounds like what your are looking for:

    http://www.wipeout44.com/brain_food/css_staying_afloat.asp

    Especially this part:

    Extra tips for CSS Floating
    Float: center; does not exist

    Don’t ask me why this has never been added to the CSS library but it is easily fixed, if you want to center a div within a float tag simply create a div without the use of the float attribute and use the following margin settings:

    <div style="float: left; width: 600px;">
    <div style="width: 300px; margin-left: auto; margin-right: auto;"></div>
    </div>

    Margin auto does not work in IE?: Yes another IE related bug but heres the fix, for Internet Explorer you will also need to add the following to your CSS for this centering to work.

    html, body {
    text-align: center;

  14. mross55
    Member
    Posted 3 years ago #

    Thank you so much James, I'll give it a shot.
    Cheers

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic