[plugin MM Forms] vertically aligning input fields

  • elcsjapan

    (@elcsjapan)


    15 years ago

    First, I’m very new to WP, so I’d appreciate if you made your answers simple and explicit.

    I’m using MM Forms to create an event registration code. I want to place the input fields to the right of the labels, and I want the input fields to align vertically. I’ve managed to produce the look I want using code (custom) below, but when I use this code, data input doesn’t register (e.g., when the “register” button is pushed, the user doesn’t get an answer, and the information is not sent to my database.) I get the function I need but without the alignment when I use code (original) below.

    Can anyone tell me what I’m doing wrong? After the several days I’ve spent trying to figure this out by myself, I’d really appreciate any help you could give me.

    Code custom:

    <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:500px">
                <tr>
                    <td>
                        <label for="given-name">Given Name:*</label>
                    </td>
                    <td class="input-align">
                        <input id="given-name" type="text*" name="given-name" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="family-name">Family Name:*</label>
                    </td>
                    <td class="input-align">
                        <input id="family-name" type="text*" name="family-name" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="hash-name">Hash Name:*</label>
                    </td>
                    <td class="input-align">
                        <input id="hash-name" type="text*" name="hash-name" />
                    </td>
                </tr>
<tr>
                    <td>
                        <label for="home-hash">Home Hash:</label>
                    </td>
                    <td class="input-align">
                        <input id="home-hash" type="text*" name="home-hash" />
                    </td>
                </tr>
<tr>
                    <td>
                        <label for="mother-hash">Mother Hash:*</label>
                    </td>
                    <td class="input-align">
                        <input id="mother-hash" type="text*" name="mother-hash" />
                    </td>
                </tr>
<tr>
                    <td>
                        <label for="e-mail-address">E-mail Address:*</label>
                    </td>
                    <td class="input-align">
                        <input id="e-mail-address" type="text*" name="e-mail-address" />
                    </td>
                </tr>
<tr>
                    <td>
                        <label for="country">Country:*</label>
                    </td>
                    <td class="input-align">
                        <input id="country" type="text*" name="country" />
                    </td>
                </tr>
<tr>
                    <td>
                        <label for="postal-code">Postal Code:*</label>
                    </td>
                    <td class="input-align">
                        <input id="postal-code" type="text*" name="postal-code" />
                    </td>
                </tr>
<tr>
                    <td>
                        <label for="prefecture">Prefecture:* (n/a if not applicable)</label>
                    </td>
                    <td class="input-align">
                        <input id="prefecture" type="text*" name="prefecture" />
                    </td>
                </tr>
<tr>
                    <td>
                        <label for="city">City:*</label>
                    </td>
                    <td class="input-align">
                        <input id="city" type="text*" name="city" />
                    </td>
                </tr>
<tr>
                    <td>
                        <label for="street-address-1">Street Address 1:*</label>
                    </td>
                    <td class="input-align">
                        <input id="street-address-1" type="text*" name="street-address-1" />
                    </td>
                </tr>
<tr>
                    <td>
                        <label for="street-address-2">Street Address 2:</label>
                    </td>
                    <td class="input-align">
                        <input id="street-address-2" type="text*" name="street-address-2" />
                    </td>
                </tr>
            </table>
</form>
    </body>
</html>
<p><label for="Gender">Gender:*</label>     [radio Gender "female" "male"]</p>
<p><label for="RegistrationOption">Registration Option:* </label>[select* RegistrationOption "Early Registration (up to June 1st; 23,000 yen)" "Regular Registration (June 1st - July 31st; 26,000 yen)" "Late Registration (August 1st - September 11th; 32,000 yen)"]</p>
<p><label for="FoodRequirements">Food Requirements (e.g., vegetarian):</label></br>
[textarea FoodRequirements]</p>
<p><label for="shirtsize*">Shirt Size (Western):* </label>[select* shirtsize "XXL" "XL" "L" "M" "S" "XS" "XXS"]</p>
<p><label for="comments">Comments:</label></br>
[textarea comments]</p>
<p>[submit "Register"]</p>

    Code Original:

    <p><label>Given Name:* [text* given-name] </label></p>
<p><label>Family Name:* [text* family-name] </label></p>
<p><label>Hash Name:* [text* hash-name] </label></p>
<p><label for="Gender">Gender:*</label>     [radio Gender "female" "male"]</p>
<p><label>Home Hash:     [text home-hash] </label></p>
<p><label>Mother Hash:     [text mother-hash] </label></p>
<p><label>E-mail Address:*     [email* e-mail-address] </label></p>
<p><label>Country:*     [text* country] </label></p>
<p><label>Postal Code:*     [text* postal-code] </label></p>
<p><label>Prefecture:* (please insert "n/a" if not applicable) [text* prefecture-province-state] </label></p>
<p><label>City:*     [text* city] </label></p>
<p><label>Street Address 1:*     [text* street-address-1] </label></p>
<p><label>Street Address 2:     [text street-address-2] </label></p>
<p><label for="RegistrationOption">Registration Option:* </label>[select* RegistrationOption "Early Registration (up to June 1st; 23,000 yen)" "Regular Registration (June 1st - July 31st; 26,000 yen)" "Late Registration (August 1st - September 11th; 32,000 yen)"]</p>
<p><label for="FoodRequirements">Food Requirements: (e.g., vegetarian)</label></br>
[textarea FoodRequirements]</p>
<p><label for="shirtsize*">Shirt Size (Western):* </label>[select* shirtsize "XXL" "XL" "L" "M" "S" "XS" "XXS"]</p>
<p><label for="comments">Comments:</label></br>
[textarea comments]</p>
<p>[submit "Register"]</p>

Viewing 4 replies - 1 through 4 (of 4 total)
  • WEB11

    (@web11)

    15 years ago

    If you are talking about the radio buttons labels being inverted this is what I did to fix it:

    In mm-forms.php I replaced:

    if (preg_grep('%^label[_-]?first$%', $options)) { // put label first, input last
                        $item = '<span class="mmf-list-item-label">' . $value . '</span>&nbsp;';
                        $item .= '<input type="' . $input_type . '" name="' . $name . ($multiple ? '[]' : '') . '" value="' . attribute_escape($value) . '"' . $checked . $onclick . ' />';
                    } else {
                        $item = '<input type="' . $input_type . '" name="' . $name . ($multiple ? '[]' : '') . '" value="' . attribute_escape($value) . '"' . $checked . $onclick . ' />';
                        $item .= '&nbsp;<span class="mmf-list-item-label">' . $value . '</span>';
                    }

    with

    if (preg_grep('%^label[_-]?first$%', $options)) { // put label first, input last
                        $item = '<span class="mmf-list-item-label">' . $value . '</span>&nbsp;';
                        $item .= '<input type="' . $input_type . '" name="' . $name . ($multiple ? '[]' : '') . '" value="' . attribute_escape($value) . '"' . $checked . $onclick . ' />';
                    } else {
                        $item = '<span class="mmf-list-item-label">' . $value . '</span>&nbsp;';
                        $item .= '<input type="' . $input_type . '" name="' . $name . ($multiple ? '[]' : '') . '" value="' . attribute_escape($value) . '"' . $checked . $onclick . ' />';
                    }
    Thread Starter elcsjapan

    (@elcsjapan)

    15 years ago

    Hi Web11,

    No, they’re not inverted. It’s that the form becomes inactive. As a user, I can input information into the form, but when I hit the “register” button, the I get no response and the information doesn’t get sent to the database.

    But in the form without table formatting, the form is active (the user gets a “your form has been sent” (or something like that) message and the information gets sent to the form’s database, and I get an e-mail notification. But, the fields don’t line up if they’re placed to the right of the label.

    So, with the “original” code I get a form that works, and with the “custom” code I get a form that looks good. But I need a combination of both.

    Thanks for trying to help, though.

    ahimsauzi

    (@ahimsauzi)

    15 years ago

    Hi elcsjapan,

    Did you try using css instead of tables? It sounds like the plugin does not support tables or there is a conflict with table markup and the javascript.

    Just create a custom template to the form and use the original markup to populate that page. I did not try to assign classes to the “<p>” elements in the original code but it should not conflict with javascript.

    Thread Starter elcsjapan

    (@elcsjapan)

    15 years ago

    Hi ahimsauzi,

    Thanks for your help. I really don’t know how to do that. Could you give me a sample of the code?

    Thanks for helping!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘[plugin MM Forms] vertically aligning input fields’ is closed to new replies.