WordPress.org

Ready to get started?Download WordPress

Forums

Trouble Aligning Full Input Fields (3 posts)

  1. mcaddengroup
    Member
    Posted 5 years ago #

    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?

  2. digitz
    Member
    Posted 5 years ago #

    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

  3. mcaddengroup
    Member
    Posted 5 years ago #

    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>

Topic Closed

This topic has been closed to new replies.

About this Topic