competition BLOCK

Below is an Competition Block component. Component allows editor to add three steps with title and description in data component, background image, subcomponent with question, and subcomponent of subcomponent that represents answer on parent question component. Beside this, it also accepts primary interests field, mobile codes and country selector, terms of condition, privacy policies and Confirmation page.

EXAMPLE 1 - FULL WIDTH

Item added directly in the One Column Container with layout setting Full Width.

Margins: none

This is the Competition Block with all fields populated, except the confirmation page. The first noticeable thing is that the background content overlaps with the other content below. In terms of rendering content, there is no problem detected. Small UX problem on MOBILE, when the user goes through steps, maybe should the header with steps move with the content displayed, for example, if a user is on step 2. the header should move to step 2 and present it in the center of the page. Currently, this is static content with a horizontal scrolling possibility.

EXAMPLE 2 - NORMAL WIDTH

Item added directly in the One Column Container with layout setting Normal Width.

Margins: none

This is the Competition Block with all fields populated. Component looks good on all devices. It has same issues as full width.

EXAMPLE 3 - FULL WIDTH WITH NARROW MARGIN

Item added directly in the One Column Container with layout setting Full Width.

Margins: Desktop: 0 640px; Tablet: 0 63px; Mobile: 0 20px;

This is the Competition Block with all fields populated. Component looks good just on mobile and tablet devices, but is unusable on desktop screens. Same issues with overlapping and mobile header of component.

COMPETITION BLOCK

This is competition component without all titles and descriptions.

Maybe fields should be required in order not to have empty points on page.

contact us BLOCK

Below is a Contact us block component. The component allows an editor to add a contact form to the page, based on the user interest selected. When a user chooses the enquiry type contact form appears. Contact us can accept children (request refund reason and enquire reason that can be used beside predefined enquires). It looks like all layout types have a problem with enquiry type label since it's width isn't same as width of form labels on devices other then mobile. Didn't find a way to add refund reason I created as a subcomponent.

Custom made enquiry breaks the page, showing rendering error that it is unable to read undefined property.

EXAMPLE 1 - FULL WIDTH

Item added directly in the One Column Container with layout setting Full Width.

Margins: none

This is the Contact us block with all fields populated. No problem were detected with content rendering, it looks ok on all devices.

EXAMPLE 2 - NORMAL WIDTH

Item added directly in the One Column Container with layout setting Normal Width.

Margins: none

This is the Contact us block with all fields populated. Component looks good on all devices.

EXAMPLE 3 - FULL WIDTH WITH NARROW MARGIN

Item added directly in the One Column Container with layout setting Full Width.

Margins: Desktop: 0 640px; Tablet: 0 63px; Mobile: 0 20px;

This is the Contact us block with all fields populated. Component looks good on mobile and tablet devices, but is shifted too much for desktop screens. There is no problem with rendering items on the page.

subscription BLOCK

Below is a subscription block component. The component allows an editor to add a Heading that is used at each step of the form, intro description, intro subscribe button theme, personal data heading, description and button theme, privacy policy, marketing preferences, link to share button, that can also be a subcomponent of block, account link, etc. For some reason share button created as subcomponent isn't displaying in content. When form is completed and subscribe button is triggered, it changes to secondary style defined in component, but I don't get any message that subscription went as expected or failed.

Example 1 - Full width

Item added directly in the One Column Container with layout setting Full Width.

Margins: none

This is the Subscription block with all fields populated. No problem were detected with content rendering, it looks ok on all devices.

EXAMPLE 2 - NORMAL WIDTH

Item added directly in the One Column Container with layout setting Normal Width.

Margins: none

This is the Subscription block with all fields populated. Component looks good on all devices, and renders without any problem.

EXAMPLE 3 - FULL WIDTH WITH NARROW MARGIN

Item added directly in the One Column Container with layout setting Full Width.

Margins: Desktop: 0 640px; Tablet: 0 63px; Mobile: 0 20px;

This is the Subscription block with all fields populated. Component looks good on mobile and tablet devices, but is shifted too much for desktop screens. There is no problem with rendering items on the page.