Form Mockup

Creating a Form Mockup

A form mockup is a draft version of your form (normally created in a Word document). It identifies each question, section, and field type before you start building in Dynamic Forms. Creating a mockup helps you visualize how the form will look and assures all required information is captured accurately.

Process:

1. Gather requirements - Work with your department or stakeholders to identify the form’s purpose, participants, and the data that needs to be collected.
2. Organize sections - List all sections and questions in a logical order (for example, Requester Information → Request Details → Review/Approval).
3. Define field types - Note each field’s type, such as Short Answer, Dropdown, Checkbox, File Upload, etc., for easy reference.
4. Identify form rules - Identify where specific fields or sections should appear based on responses (for example, if “Approved” is selected, display the approval details table).
5. Confirm required fields and field types - Indicate which fields are required (using an orange asterisk *) and note any field types (i.e., email format, phone number) or prefills (i.e., API, User Profile) needed.
6. Add form configurations and email settings - Document system-level settings and automated communications that need to be configured once the form is built.
   1. Form Configurations: Identify which features should be enabled at the form level, such as Workflow, Admin Notifications, and Custom Text, as well as participant-specific options like Return for Revision and Allow Saving Drafts.
   2. Form-Related Emails: List all participant emails (for example, Student Confirmation Email, Office Co-Signer Email, Office Confirmation Email, and Owner Notification Email). Include:
      1. When the email should send (e.g., after student submission, after office upload)
      2. The email subject line, body, and footer
      3. Any conditional emails triggered by specific form responses (for example, Approved vs. Denied)
7. Review and submit - Share the mockup with your department or anyone involved in creating the form for review, then submit it to the Dynamic Forms Team for review/approval before beginning the form build. 

Below is an example of a simple form mockup. It shows how a mockup should be structured and what details it should include.

What this form mockup shows:

• Form structure & permissions - separates student and office sections, showing which fields each participant can view and complete.
• Prefills & field setup - highlights where information prefills from the User Profile or API to reduce manual entry.
• Conditional logic (rules) - shows how fields and messages appear based on responses, such as delivery method choices or registrar decisions.
• Required fields & field types - identifies required fields, input formats, and field types (Email, E-Signature, File Upload) to help users enter information correctly.
• Form configurations & workflow - defines participant routing (for example, Student → Law Registrar Office) and settings such as Return for Revision.
• Form-related emails - outlines automatic email notifications for each participant, including subject lines, body text, and any conditional messages based on form responses.
• Internal review process - describes how the registrar reviews requests, uploads letters, or provides feedback before finalizing the form.
• User guidance & accessibility - uses clear instructions and consistent formatting to make the form easy to follow.

Questions? Contact Dynamic Forms ITS Team by emailing DynamicForms.ITS@yale.edu