Support » Plugin: Contact Form 7 » [Plugin: Contact Form 7] Can someone please help how to align the text field

  • 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

Viewing 13 replies - 1 through 13 (of 13 total)
  • 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 {
    label {

    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.



    Forum Moderator

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

    That hasn’t worked.

    Actually it has! Thanks a lot much appreciated.


    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.


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

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


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

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


    Worked for me

    Perfect! You’re a star!


    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.

    I read this page

    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>

    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>

    and other formats like left 25% and right 25%

    Help would be appreciated.

    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:

    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>

    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;

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

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘[Plugin: Contact Form 7] Can someone please help how to align the text field’ is closed to new replies.