WD-10729 - update contact us forms #13918
Conversation
Demo
Jenkins 
demos.haus 
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #13918 +/- ##
=======================================
Coverage 74.12% 74.12%
=======================================
Files 107 107
Lines 2864 2864
Branches 957 957
=======================================
Hits 2123 2123
Misses 715 715
Partials 26 26 |
|
@juanruitina I think the problem is that it isn't implemented correctly yet, lines missing, double indents, so it looks confusing. @lizzochek Can we plase have the double grid indent removed, so all text lines up on the left and right, and then ca nwe please have the horizontal rules above each h2? I think then we'd be in a better place to evaluate whether the design is working or not. |
|
@lyubomir-popov @juanruitina you can see an updated version in this PR: canonical/canonical.com#1270 |
|
also, can we please do h4s and change the title of the popup to an h3 - lots of long questions, so we have to adapt |
|
@lyubomir-popov Do we have any research on how 50/50 performs on forms? As mentioned above, I'd expect users to fill a form sequentially, and with the 50/50 split they would end up zigzagging. I think it's OK to have two columns if left is an intro to the form and right the fields, but I'm not convinced about splitting fields like that. |
|
@lyubomir-popov updated in canonical/canonical.com#1270 |
|
Got confirmation from Jared on the two items I mentioned at the end:
|
|
Can you resolve the conflict, so I can have a clear view of the |
|
There's a bug in https://ubuntu-com-13918.demos.haus/security/esm#get-in-touch (and I guess every page that uses that component): When I click on one of the options (required) of "What kind of device are you using?*", it doesn't recognize it as selected. 
Also another issue is that there are fields that are required, but then there is no asterisk (I couldn't find the corresponding copy doc), such as: Can you add the is-required classname for those that have the Thanks |
These don't seem addressed in demos, can you check? Following up on the "legend" fields, I see them being useful for groups of checkboxes and radio buttons (should be fieldsets). Both fieldsets and legends have some styles coming from either Vanilla or browser styles. A cleaner markup for checkbox/radio fieldsets would look like this: <fieldset class="row--50-50 p-section--shallow u-no-padding" id="kind-of-device">
<div class="col">
<legend class="p-heading--4">What kind of device are you using?*</legend>
</div>
<div class="col">
<div class="row u-no-padding">
<div class="col-4 u-sv3">
<label class="p-checkbox">
<input required="" class="p-checkbox__input" type="checkbox" aria-labelledby="desktop/workstation" value="desktop/workstation" onclick="validateCheckbox(event, 'kind-of-device')">
<span class="p-checkbox__label" id="desktop-workstation">Desktop/workstation</span>
</label>
[...]
</div>
</div>
</div>
</fieldset>Border would need to be removed from the fieldset, I couldn't find a utility for that. Happy to pair to make this work, some further testing would be useful. |
|
Hi team, |
|
@carkod there are multiple Marketo submission and sync issues. my hunch is that it has to do with how the form submission has changed with the addition of the onsubmit="getCustomFields(event)" attribute |
What kind of problems are you having? Can you be more specific? |
|
@carkod the document linked by Erekle above has the information. mainly: we are receiving only email addresses in Marketo and not the contents of the rest of the fields even though they appear in the payload. in the case of comments from lead field, the value of that doesn't appear in the payload. i suppose that Marketo submission doesn't wait for the returining of the getCustomFields function. |
|
Hi team, I have updated the report with today's test results (included UTMs in the test). No forms have synced any fields this time unfortunately, only email addresses (see the sheet - marketo database Jun 20 test). |
@eabashidze Thanks. Are we having the same issues on the live site? |
|
Please change the background of all forms from white to #f3f3f3 (we have a class is-paper I believe, pls don't hardcode the hex value) |
|
This is not using the 50/50 split - either all should or not IMO. |
|
Most of the forms use the outgoing style as opposed to the rebranding, not sure if I'm missing anything? |
|
Moving this task to a feature branch, will address the design and form submission issues there. |
Done
Updated multiple contact forms. Please see more details in the Jira ticket.
QA
Issue / Card
WD-10729