[MGNLDEMO-103] Demo advanced form including Multi-Step Created: 16/Sep/15  Updated: 11/Nov/16  Resolved: 06/Jan/16

Status: Closed
Project: Magnolia Demo Projects
Component/s: None
Affects Version/s: None
Fix Version/s: 0.9

Type: Story Priority: Major
Reporter: Christopher Zimmermann Assignee: Evzen Fochr
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: 0d
Time Spent: 2d 4h 25m
Original Estimate: Not Specified

Attachments: File travels-magnolia.css    
Issue Links:
Relates
relates to MGNLFORM-257 Multistep with condition list shows a... Closed
relates to MAGNOLIA-6373 Update Freemarker from '2.3.21' to '2... Closed
dependency
depends upon MGNLFORM-255 Going back and changing a field with ... Closed
depends upon MGNLFORM-274 SubStepFormEngine do not resolve next... Closed
depends upon MGNLFORM-277 Summary component - do not display co... Closed
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Date of First Response:
Epic Link: Travel Demo
Sprint: Kromeriz 25
Story Points: 8

 Description   

Why: Advanced forms are an important part of demoing Magnolia.

The form should be designed to include all of the out-of-the-box form elements. The form should include three steps. And show off the available validation.

When a user clicks the Book Tour button on a tour page, the demo should no longer launch the modal popup. It should rather link to a new page (not in the navigation) containing the form.
The form should look something like an order form - collecting customer information etc.

SPEC:
Please see branch for proposed layout of steps and fields and basic style adjustments.
https://git.magnolia-cms.com/projects/MODULES/repos/demo-projects/compare/commits?sourceBranch=refs%2Fheads%2FMGNLDEMO-103-exp&targetBranch=refs%2Fheads%2Fmaster

Features that are demonstrated
Multistep - with all steps shown
Conditional step
Every field
HTML Field - email
Summary
Honeypot
Required
Emails at end
Confirmation page at end.

Features not demonstrated
Use a pattern.
Use a placeholer.
Use disabled?

The fields are speced in this googledoc -
https://docs.google.com/document/d/1j9F7xs5uJqbnXlxL8zZFCHq_aRkrv5ijbxupb8uqDuA/edit#heading=h.asuz6dlenig1



 Comments   
Comment by Jan Haderka [ 17/Sep/15 ]

Please provide list of the fields for each of the pages in the form and conditions (if any) to switch to next page or skip or ...
If it is order form, it should probably be available on every tour page, so again we need design & location for the "order" button there.

Comment by Christopher Zimmermann [ 12/Nov/15 ]

Please see updated description and linked google doc for specification.

Comment by Christopher Zimmermann [ 16/Nov/15 ]

To implementor: Spec is a suggestion - lets discuss if you have ideas for improvement of how advanced form features are demo'd.

Comment by Michael Mühlebach [ 16/Nov/15 ]

Might it be an idea to look at the following two tickets in the context of this one?
MGNLFORM-257 and MGNLFORM-255

Comment by Evzen Fochr [ 09/Dec/15 ]

According to docu page upload file component in multistep forms this is only available on the last step and thats REVIEW.

Comment by Christopher Zimmermann [ 17/Dec/15 ]

Personal Details Page:

"breadcrumb" at top should not be all CAPS when one is on that step.

Title field should have length:small
First name should have length: medium
Last name should have length: medium
So that they are all on one line.

Remove Credit Card field - not necessary for this demo.

CSS for Review page.
(Please see attached file for suggestion.)
Bigger h2 for Confirm and Summary
Bigger caption
More padding above the STEP buttons at the bottom.
Summary page: values should all be vertically aligned with each other.

Comment by Evzen Fochr [ 17/Dec/15 ]

I suggest change here to:
.form-row .form-item-s

{ width:88px; }

.form-row .form-item-m

{ width:188px; }

.form-row .form-item-l

{ width:388px; }

88 is 100 - 10 for margin and - 2 for borders
So we can have 6 small or 3 medium or 1large+1megium on 1 line

Comment by Christopher Zimmermann [ 21/Dec/15 ]

For the form - please change the messages:
"You succesfuly booked your tour" > "Your tour is booked"
"Booking of tour was unsuccessful" > "There is a problem with your booking"

2nd message changed because it is also used on the Personal details page when there is a validation problem - and then the message is confusing because you did not try to book the tour yet.

On final review step, change label from "Submit" > "Confirm Booking".

Otherwise everything looks good to me.

Comment by Christopher Zimmermann [ 05/Jan/16 ]

Problem due to https://jira.magnolia-cms.com/browse/MGNLFORM-255
Reproduce

  • Set "Do you have special meal requirements" = Yes
  • Page 2> Breadcrumbs show "Meal".
  • Click "Halal"
  • Click "Next Step"
  • Click "Previous Step" to get back to first page.
  • Set "Do you have special meal requirements" = No
  • Click "Next Step" (Do not expect to see Meal in breadcrumbs, but it is.)
  • Fill in form and got to "Review" page. (Do not expect to see Meai and Halal in summary, but it is there.)
Comment by Christopher Zimmermann [ 05/Jan/16 ]

On the "Personal Info" page, the layout is too wide for narrow smart phones due to
.form-row .form-item-l

{ width:388px; }

Possible fix is to change this width to 288px.
I would also change the
.form-row input, .form-row select
rule to 288px (currently 300px) so that the styles look fine.

Note that this will make the form not line up with the "Previous Step" , "Next Step" buttons.

Comment by Jan Haderka [ 05/Jan/16 ]

Shouldn't that kind of things be taken care of by bootstrap rather than us forcing the width for all possible variations?

Comment by Christopher Zimmermann [ 05/Jan/16 ]

I know what you mean - but using the "vanilla bootstrap" that we are using means we would need to add additional boostrap css classes to the form rows and form items, like "col-md-6".
Otherwise we'd need to use sass/less to create a custom bootstrap with css declarations for the existing "form-item-s", "form-item-m", "form-item-l" clases.

I think the current approach is ok as it is leveraging the "form-item-s", "form-item-m", "form-item-l" classes that the form module provides. Maybe we could come up with some fancier css based on percentages and mediaqueries (as bootstrap does) - but I think its pretty straightforward and gets the job done.

Comment by Christopher Zimmermann [ 06/Jan/16 ]

Do not integrate until linked ticket https://jira.magnolia-cms.com/browse/MGNLFORM-255 is fixed.
(See my above comment from Jan 5th for the problem it causes.)

Generated at Mon Feb 12 05:16:20 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.