Support » Fixing WordPress » Trouble Aligning Full Input Fields

  • I use Contact 7 on my site, I want to have the input fields line up in a perfect column, aligned right on top of one another. When I work with text in WordPress you can select the button “align full” to accomplish that look. I want to do that with my three input fields. Right now, they are slightly off alignment from one to the next.

    Any ideas?

Viewing 2 replies - 1 through 2 (of 2 total)
  • you can use HTML in your form. 😉
    try using tables to align columns, or better define embedded CSS which again CF7 supports off the shelf.

    Good Luck

    Thanks for the lead. I found a website with code in CSS and Tables to vertically-align the input fields here.

    My problem is that I don’t know where to paste this newfound code. I have been playing around with the form section of the plug-in and haven’t been able to figure it out.

    Thank you in advance for the help.


    Here’s the form that I have created using Contact Form 7’s tag generator…

    <p>Name: [text* your-name 15/30] </p>
    <p>Email: [email* your-email 15/40] </p>
    <p>Phone: [text* your-phone 15/20] </p>
    <p>[submit "Send"]</p>

    And here’s the tables code I found…

    <html xmlns="">
            <title>Aligning Form Fields Using a Table</title>
            <style type="text/css">
            <form action="">
                <table style="width:260px">
                            <label for="name">Name:</label>
                        <td class="input-align">
                            <input id="name" type="text" name="name" />
                            <label for="email">E-mail:</label>
                        <td class="input-align">
                            <input id="email" type="text" name="email" />
                            <label for="subject">Subject:</label>
                        <td class="input-align">
                            <input id="subject" type="text" name="subject" />
                    <label for="body">Body:</label><br />
                    <textarea id="body" name="body" cols="30" rows="6"> 
                    </textarea><br />
                    <input type="submit" />

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Trouble Aligning Full Input Fields’ is closed to new replies.