Webform layout test

This webform is to test the layout of various items we used often.

  • General information
  • Second page example

The first page or first item should always be the general information. It is usually connected to CiviCRM and should always include:

  • Individual prefix
  • First name
  • Last name
  • email
  • job title
  • organization name

There is a template form to clone so that these connections are automatically set up.

[FEEDBACK: the <ol> or <ul> isn't working]

Alliance information
[FEEDBACK: the styling of the fieldset title should be bigger than the questions. I've added styling in the element CSS, but it isn't working - please check]
font-size: 1.75rem; line-height: 2.375rem;
Please type in the full name of your organisation, i.e. "NCD Alliance (NCDA)".
Plus
This is more info text
This is a text field, where the answer would be one or a couple of words.
This is a text area, where multiple sentences are requested. You can add a word or character counter, with a minimum and maximum amount.
1.1. Networks part of the alliance (select all that apply):
Checkboxes other, one column [FEEDBACK: descriptions with only one paragraph <p> don't have the correct formatting - see next question with two <p> and the formatting is fine]
1.2. Networks part of the alliance (select all that apply):

Checkboxes other, two columns

[FEEDBACK: checkboxes with more than one column need top-padding adjustment for the "Other" text field.]

1.3. Networks part of the alliance (select all that apply):
Checkboxes other, three columns
1.4. NCDA impact goals the alliance worked on as part of the work supported by the Advocacy Institute (select all that apply)

Checkboxes, side by side
2.1. Programme track participated in

Radios, one column, [FEEDBACK: columns not working]
2.2. Programme track participated in

Radios, two column, [FEEDBACK: columns not working]
2.3. Programme track participated in

Radios, three column, [FEEDBACK: columns not working]
2.4. Programme track participated in

Radios, side by side
2.5. Programme track participated in

Radios, buttons flexbox
2.6. Programme track participated in

Radios, buttons horizontal, [FEEDBACK: padding on left and right of text should be identical for each, like in the buttons]
2.7. Programme track participated in

Radios, buttons vertical (stacked)
2.8. Exposure to important global moments (Fourth High-Level Meeting on NCDs, among others) during the 3rd Phase of the Advocacy Institute improved our alliance’s ability to conduct advocacy work.
Radios with "Other" option

Whenever there's a question that asks the user to rate something. Options available are agreement, comparison, importance, quality, satisfaction, ten scale, and would you. Can also add custom options.

[FEEDBACK: 1. the table needs to be formatted and styled; 2. the z-index of the header goes above the menu; 3. the sticky header doesn't work]

Whenever there's a question that asks the user to rate something. This option is a custom list based on experience.

[FEEDBACK: 1. the table needs to be formatted and styled; 2. the z-index of the header goes above the menu; 3. the sticky header doesn't work]

Likert with custom answers.

[FEEDBACK: a minimum width should be added to the question to avoid this layout issue - options should span on multiple lines if needed]

Select up to five across all categories.

This is a 'Table select' element.

[FEEDBACK: formatting and styling needs to be adjusted]

4.1. After participating in the 3rd Phase of the Advocacy Institute, which capacity areas does your alliance still most need support in?
Organisational development: Governance and organisational processes
Organisational development: Strategic planning and sustainability
Organisational development: Resource mobilisation/fundraising
Planning and implementing advocacy campaigns
Engagement with policymakers and decision-makers
Building partnerships and multisectoral engagement
Communication and media advocacy
4.2. Please sort the following items Poids
Seed
Accelerator
Media related to NCDs
Another option
Engagement with policymakers and decision-makers

This is a 'table select sort' element.

[FEEDBACK: formatting and styling needs to be adjusted]

4.3. Please sort the following items Poids
Lived experience
Accelerator
Moderate impact
Webinar
Engagement with policymakers and decision-makers
An ending

This is a 'table sort' element.

[FEEDBACK: formatting and styling needs to be adjusted]

This is a 'select' element.
5.2. What motivates you to join the Our Views, Our Voices Advocates Directory?
This is a 'select other' element type.
6. After participating in the 3rd Phase of the Advocacy Institute, which capacity areas does your alliance still most need support in? (Select up to five across all categories)
Other
DESCRIPTION: These are the 'checkboxes other' element
DESCRIPTION: This is a "fieldset" with custom CSS for the border [FEEDBACK: the formatting of the paragraph isn't the same if there's only one <p>, instead of two, as seen above]

DESCRIPTION: This is a "fieldset"

[FEEDBACK: the default description for this should be above the child elements, in this case another fieldset with checkboxes other]

7.1. More information (acordeon)

This more information box acts like an accordeon revealing information.

[FEEDBACK: label styling not correct and paragraph styling only correct if there are 2 <p>, incorrect if only 1. Also, should the styling of the accordion be like the rest of the website and use the "+" instead of the arrow?]

This section provides more details.

[FEEDBACK: the font needs to be adjusted manually, doesn't fit with the hierarchy]

This is text that can be displayed in the more text.

Multiple paragraphs available.