WordPress.org

Support

Support » How-To and Troubleshooting » Trouble Aligning Full Input Fields

Trouble Aligning Full Input Fields

  • I use Contact 7 on my site, http://www.mcaddengroup.com. 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.

    -Dan

    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…

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
        <head>
    
            <title>Aligning Form Fields Using a Table</title>
    
            <style type="text/css">
    
                .input-align
    
                {
    
                    text-align:right;
    
                }
    
            </style>
    
        </head>
    
        <body>
    
            <form action="">
    
                <table style="width:260px">
    
                    <tr>
    
                        <td>
    
                            <label for="name">Name:</label>
    
                        </td>
    
                        <td class="input-align">
    
                            <input id="name" type="text" name="name" />
    
                        </td>
    
                    </tr>
    
                    <tr>
    
                        <td>
    
                            <label for="email">E-mail:</label>
    
                        </td>
    
                        <td class="input-align">
    
                            <input id="email" type="text" name="email" />
    
                        </td>
    
                    </tr>
    
                    <tr>
    
                        <td>
    
                            <label for="subject">Subject:</label>
    
                        </td>
    
                        <td class="input-align">
    
                            <input id="subject" type="text" name="subject" />
    
                        </td>
    
                    </tr>
    
                </table>
    
                <p>
    
                    <label for="body">Body:</label><br />
    
                    <textarea id="body" name="body" cols="30" rows="6"> 
    
                    </textarea><br />
    
                    <input type="submit" />
    
                </p>
    
            </form>
    
        </body>
    
    </html>

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