Custom Styling and Scripting

Metaforms supports a wide range of Custom Styling and Scripting in your surveys.

Let's take a look at all of them:

• Normal number question that can be used for the other scenarios listed

• Number list question with two columns: one column where respondent can answer and other column where the percentage is auto calculated by comparing the answer given in the previous number question.

  Validation to make sure the sum of answers in the first column is equal to the number entered in the previous number question.

• Radio question with conditional follow-up question on same page Validation to make sure if yes is selected, the follow up question should have answer and if no is selected the follow up question should not have answer

  When selection is "No" or nothing is selected When selection is “Yes”

• Checkbox list question with percentage input fields to fill in if the checkbox is selected in the row If checkbox is selected, corresponding percentage field becomes active for input. If checkbox is not selected, percentage field remains disabled.

  Validation to make sure the percentage can only be entered if corresponding checkbox is selected and the sum of all entered percentages must equal 100%. If checkbox is unchecked, corresponding percentage field should be empty

  

• Number list question with two columns: current percentage (auto-populated from previous question), and future percentage input fields.

  Current percentage column displays data piped from Q10. Future percentage column requires user input for anticipated usage. Validation to ensure sum of all future percentages equals 100%. Only products with >0% usage from Q10 are displayed.

  

• Multiple checkbox question with grouped answers and exclusive "None of the above" options within each group. Each group has its own "None of the above" option that is exclusive to other selections within that specific group only.

  Validation to ensure "None of the above" options are mutually exclusive with other selections within their respective treatment groups, but selections can be made across different treatment groups.

  

• Showing subsequent text box only when the previous text box has data in it and with exclusive checkbox option. Validation to ensure "I don't know" checkbox is mutually exclusive with text field entries. If "I don't know" is selected, all text fields must be empty. If any text field has content, "I don't know" cannot be selected

• Checkbox list question with two columns: first column is auto-populated from previous question and second column is for respondent to select. Validation to ensure respondents should select one option in each group.

  

• Showing the total number of selections dynamically in a checkbox question with rows and columns.

  Validation to make sure at least one response is given for each column.

  

• Enable continue button on clicking on a link in the page.

  Without clicking on hyperlink

  With clicking on hyperlink

• Exclusive checkbox for number list question with two columns. Number boxes will be disabled when the checkbox is checked in that column. Validation to ensure if the checkbox is checked in the column, number boxes should not have data. If the number boxes have data, checkbox should not be checked in that column.

• Multiple question with collapsible question list With collapsible list closed.

  With collapsible list opened.

• Trigger based setup, based on radio question response. Other questions will be displayed or hidden dynamically. Piping of the option selected in one radio question in to the title of the other radio question. Validation to make sure based on the response to the first question, check if the question that needs to be shown have data.

  With selecting None

  With selecting stub 1 it will show P6. With selecting stub 2 it will show P5. Piping the text with what is selected in P5.

• Text box list question with a checkbox in the right and if the checkbox is checked the text boxes in that particular rows should be disabled. If the text box is answered, the checkbox should not be checked for that particular row. Validation to make sure the text box is not answered if the checkbox is checked for that row. If the checkbox is not checked, the text boxes in that row should be answered.

• Open-ended question with popup validation for short responses:

  • If a respondent's open-ended answer is less than 20 characters, a pop-up box will automatically appear.

  • This pop-up prompts the user with: "Would you please elaborate on your response?"

  • It provides two options:

    • "Yes, I will elaborate": If selected, the respondent is allowed to go back and edit their previous response, presumably to add more detail.

    • "No, I have nothing to add": If selected, the respondent is allowed to proceed.

  • A critical instruction is that if the respondent chooses "No, I have nothing to add" in the pop-up, the current page will automatically submit, moving them to the next question without requiring an additional click on a "Next" button.

  • Validation to validate if the character is less than 20 character, no should be selected in the radio question before moving forward. if more than 20 character, no response should be there in the radio question.

• Number question with range validation and input character limit. Input field limited to maximum 3 digits (0-999). JavaScript prevents entry of additional digits after 3 characters are entered.

  Validation ensures entered value is between 0-999 and no more than 3 digits can be input.

  

• Radio question with rows and columns with grouped column headers.

  JavaScript dynamically adds hierarchical headers: "Reading Purpose" as main header, with "Learning" and "Entertainment" as sub-headers grouping the individual activity columns.

  

• Number list question with dynamic total and remaining points calculation. Shows running total of entered points and remaining points needed to reach 100. Values update in real-time as respondent enters data.

  Validation ensures total sum equals exactly 100 points across all activities.

  

• Number input question (Q34d) followed by slider question (Q34e) with dynamic range validation.

  Number input field with 5-digit ZIP code format validation using verify="zipcode" to ensure exactly 5 numeric digits.

  Validation: ZIP code format validation ensures exactly 5 numeric digits using regex pattern.

• Checkbox question with conditional option disabling based on previous question Q34d - Minimum daily reading goal: Simple number input field for entering minimum minutes. Q34e - Maximum daily reading goal: Interactive slider with dynamic range: - Minimum value: Automatically set to Q34d answer - Maximum value: Fixed at 240 minutes - Real-time updates when Q34d value change Validation ensures maximum goal cannot be less than minimum goal entered in previous question.

• Radio question with rows and columns featuring a corner label for clarity. Corner label "Reading Format ↓ / Activity →" added to top-left cell using JavaScript to orient respondents on what each axis represents.

  

• Radio question with rows and columns featuring forced desktop layout on mobile devices.

  Forces desktop view layout for this matrix question on mobile devices to ensure optimal readability and interaction, preventing the condensed mobile layout that might make the grid difficult to navigate.

  

• Checkbox question with rows and columns featuring sticky/frozen column headers during scrolling.

  JavaScript applies sticky positioning to header row so column headers ("Physical Books," "E-books," "Audio books") remain visible at top of view port when scrolling through the genre list, maintaining context for users.

• Checkbox question with drop-down multi-select interface.

  Genres are presented in a drop-down menu with check boxes instead of traditional list format. Selected items display in the drop-down box after selection, conserving screen space while allowing multiple selections.

  

• Video/audio question with mandatory playback completion before proceeding.

  Continue button is hidden until the entire video/audio content has been played through to completion. System tracks playback status and only enables navigation after full consumption of the multimedia content.

  

• Audio question with mandatory playback completion before proceeding. Continue button is hidden until the entire audiobook excerpt has been played through to completion. System tracks audio playback status and only enables navigation after full consumption of the audio content.

  

• Number list question with "Other" option featuring dynamic placeholder text. The "Other" row includes a text field with placeholder text "Please specify other category" in light grey that disappears when user starts typing. JavaScript manages the dynamic placeholder behavior and styling.

  Validation ensures each number input is between 0-100.

  

• Checkbox question with "Other" option that requires text input to enable selection.

  The "Other" checkbox is initially disabled and can only be selected when text is entered in the specification field. If text is removed, the checkbox automatically becomes disabled and cleared.

  Validation ensures "Other" selection is always accompanied by specific user-provided details.

  

• Image display question with enlargeable pop-up functionality.

  Concept image is initially displayed in smaller inline format with "Click to enlarge" link. JavaScript creates pop-up modal with larger image version, overlay effect to focus attention, and close button to return to main survey.

  

• Checkbox question with ranking functionality: select genres and rank them in order of preference. Rank input fields are initially disabled and only become active when corresponding genre checkbox is selected. System enforces consecutive ranking (1, 2, 3, etc.) and auto-adjusts ranks when selections change. Rank cells are clickable for easy ordering. Validation ensures ranks match number of selected genres and maintains consecutive numbering.

• Checkbox question with dynamic selection limit - maximum 3 selections allowed. Once 3 genres are selected, all remaining unchecked options become disabled. If a selection is removed, disabled options become re-enabled, allowing users to change selections within the 3-item limit. JavaScript provides real-time feedback and enforces the selection constraint.

  

• Number question with real-time currency formatting. JavaScript automatically adds commas for thousands separators and handles decimal points as user types (e.g., 1234.56 displays as 1,234.56). Range validation ensures input is between 0 and 999,999. Real-time formatting provides immediate visual feedback for improved readability of monetary values.

• Number question with conditional follow-up question on same page.

  Q37b asks for number of books owned (0-999 range). Q37c only appears if the number entered is greater than 50, asking about willingness to donate books with radio options "Yes, definitely," "Maybe," and "No." JavaScript dynamically shows/hides Q37c in real-time as the user types in Q37b, based on the 50-book threshold

• Number list question with rows and columns featuring exclusive "None" check-boxes and automatic column totals. For each row, selecting "None" disables and clears all number fields in that row. Entering numbers in any field automatically deselects and disables the "None" checkbox for that row. Column totals automatically calculate and display the sum of numbers entered across all formats for each genre in real-time.

• Drop-down question with different options for each row based on genre. Each genre has tailored drop-down options:

  - Fiction: Physical, E-book, Audio

  - Non-Fiction: Physical, E-book, Audio, Digital

  - Academic: Physical, E-book, PDF

  - Children's Books: Physical, Interactive, Audio

  JavaScript manages different option sets for each row while maintaining consistent styling across all drop-downs.

• Checkbox question with rows and columns featuring automatic selection dependency.

  When "Purchase" checkbox is selected for any genre, the "Read" checkbox for that same genre automatically becomes selected. The "Read" checkbox cannot be unchecked while "Purchase" remains selected, maintaining logical consistency that you must read a genre to purchase it.

  JavaScript enforces the dependency relationship between columns while allowing independent selection of "Read" only.

  Validation ensures logical relationship between reading and purchasing behaviors across Fiction, Non-Fiction, and Academic genres.

  

• Checkbox question with rows and columns featuring column-specific validation and "Other" specification fields. Validation requires at least one selection per time period column (Morning, Afternoon, Evening). The "Other" row includes separate specification text boxes for each column, appearing when "Other" is selected for that specific time period.

  JavaScript manages column-specific "Other" specification and enforces minimum selection requirements per time period.

  

• Number list question with rows and columns featuring auto-populated reference column from previous question. The "Total" column is automatically filled with data from Q39c and is read-only/disabled for editing. Respondents enter Physical and Digital book counts for each genre, with the Total serving as a reference point.

  Validation ensures data consistency by linking to previously entered totals while allowing breakdown by format.

• Number list question with rows and columns featuring auto-populated totals and sum validation.

  The "Total" column is auto-filled from Q39e and read-only. For each genre row, Physical + Digital must equal the Total. Validation displays error messages if the sum doesn't match, with visual indicators (red highlighting) showing validation status.

  Clear validation instructions are displayed above the table explaining the sum requirement for each category.

• Number list question with three columns featuring dynamic patient counts punched from previous question.

  • Shows current patient counts from previous question (e.g., "2 HFpEF patients currently treated") and asks for treatment decisions across three categories:

    • Column A: Type of HF Patient (treatment changes/initiations)

    • Column B: With T2D (patients with diabetes and treatment changes)

    • Column C: With CKD (patients with kidney disease and treatment changes

  • Validation includes screening thresholds:

    • HFpEF treatment changes <3: terminate

    • HFmrEF treatment changes <3: terminate

    • HFrEF treatment changes <2: terminate