Replace input element to select element on Join Mozilla sign-up page

RESOLVED FIXED

Status

mozilla.org
Webdev
RESOLVED FIXED
7 years ago
7 years ago

People

(Reporter: Ryan Merkley, Unassigned)

Tracking

(Blocks: 1 bug)

Details

(URL)

(Reporter)

Description

7 years ago
The t-shirt selection section of the sign-up page currently uses a text input element, which requires users to type in their preferred t-shirt type (male or female), and their size selection (S, M, L, XL, XXL).

The BSD toolset that generates the form does not allow us to use select elements or radio buttons. BSD have suggested using Javascript to alter the form once the DOM has loaded.

This is not an ideal solution, but the current situation creates challenges fulfilling orders accurately and quickly because users can insert any text they wish, and is limiting our ability to offer other options, including other colours of the t-shirt. We recommend deploying the Javascript solution as a temporary option until we deploy a new storefront later this year.

We'll have to create each of the custom fields using the BSD control panel, then add some code to each fundraising page:

Paul Osman mocked up some sample Javascript:

// the jQuery object is assigned to the identifier 'bQuery' on BSD pages
bQuery(document).ready(function() {
    bQuery('input[name="custom1"]').replaceWith('<select name="custom1"><option value="WS">Women\'s S</option><option value="WM">Women\'s M</option>...</select>');
});

The fields are named custom+id where id is an autoincrementing integer. So if we had select elements for t-shirt size, t-shirt colour, they'd be 'custom1' and 'custom2' respectively. One code block for each custom field, for each locale.

I've copied security and QA to put this item on your radar. BSD does not have a staging server, so we would have to review this code in advance, and then review it live on the production server.

Crowd Favorite will be writing the code, as they built the sign-up page.
(Reporter)

Updated

7 years ago
(Reporter)

Updated

7 years ago
Blocks: 649698
This code has been implemented and tested on cfdev21.com (using new content via Ryan for 3 form fields, size concatenated into a single upon submission):

http://cfdev21.com/home.php?locale=en_US

The custom2 field ("Color") is simply transformed in to a select box. The custom1 field is changed in to a hidden element and then 2 new select boxes are added for Fit/Sex and Size. Upon form submit these two values are combined in to the custom1 field's value and then the form elements are disabled so that the values don't submit.

There is no submit button as this is not the BSD page, but we've tested by triggering submit on the form and catching the form state with a console.log statement.

Sample custom1 submit values are: "womens small", "mens large", "womens xxl"
Status: NEW → RESOLVED
Last Resolved: 7 years ago
Resolution: --- → FIXED
(Reporter)

Comment 2

7 years ago
This looks great. Grammar nit: should be "Women's" and "Men's" throughout.

Does this require QA?
We've tested on our side, I'll send a pull request to Paul so the code can get a sanity check and you can let us know if there are any questions. A quick note that the previous pull request we sent was not received (included Czech l10n updates).

In short:

* config.php has a new function to configure the form fields: bsdtools_custom_fields_to_select_data()
* each string has been wrapped for localization (may need to be checked when the non-English forms are updated)
* custom2 is transformed to select box using JS
* two new fields are added into the page and combined into custom1 upon submit

If you'd like, we can push this up to BSD for Mozilla to do a sample transaction and verify all fields come across as expected.
The three fields (Size, Fit, Color) have been pushed to BSD:

https://donate.mozilla.org/page/contribute/protect-the-web

We'd like to request Mozilla QA the form submission, focusing primarily on the three t-shirt fields and what is both a) submitted via the JavaScript-replaced form fields (JS required), and b) the resulting data stored in the custom fields within BSD.

Please let us know if you have any questions.
You need to log in before you can comment on or make changes to this bug.