Trouble Aligning Full Input Fields

  • I use Contact 7 on my site, https://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

    Thread Starter mcaddengroup

    (@mcaddengroup)

    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…

    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="https://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.