This article will show you how to create a form in CivicOptimize.

Instructions

1. Navigate to Forms
   
2. Click the + Create button in the lower right corner
   
3. Fill out the fields on the Summary tab
   
   
   • Settings:
     • Form Name (Required): Add a name for your form, this is the name that will appear in the app
     • Description: Type a brief description of the form and what it contains
     • Associated Apps: Select the apps the form will appear in
     • Tags: Tags can be used to filter and sort your forms in the forms list. For example, these can be used to distinguish between internal and external forms. 
   • Access: 
     • Start/End Date: If desired, enter the dates this form will become available and unavailable
     • Authentication: Choose if the form is Public or Private
       • Private: Only authenticated users are able to view and submit the form
       • Public: Anyone can view and submit the form without needing to log in
   • Buttons: Choose where you would like users to go after clicking "Submit" or "Cancel"
     
     • My App: The user will be returned to the Forms list in your app
     • Back: The user will be sent to the previous page
     • Close Page: The form page will close
     • Redirect to URL: Specify a URL to direct the user to
   • Validation: Configure an API endpoint for the form to validate against. The endpoint will be called prior to submission and any submission events. 
   • Personalization & Receipt Generation: Configure an API endpoint for the form to generate a receipt number that can be used to search for submissions and also personalize form content. The endpoint will be called prior to the form load. 
4. Select Save
   
5. Navigate to the Builder tab 
   
6. Select Add New Element to add new elements to your form
   
7. Select the Element Type 
   
   
   • Note: Selections will appear in blue. We recommend making Heading and Information the first two elements of your form. That way, your form includes an appropriate title and any necessary information or instructions your users need to complete the form. View more information about the available Form Element Types. 
8. Fill in the element's detail fields
   
   
   • Label: This is what will be displayed to the form users
   • Size: The size of the Heading text
   • Show Conditionally: This option is used when you want the element to only be shown under a certain condition. Learn more about Conditional Logic.
   • Advanced:
     • Name: This is what the element will be named when submitting data
       • Note: This will not be visible to users
     • CSS Classes: If desired, add CSS classes to the element
     • Meta Data: Enter JSON above to add custom configuration to this element for your developers to consume.
   • Note: View more information about Form Element Best Practices. 
9. Add additional elements as desired, for user input fields you will have additional options:
   
   
   • Label: This is what will be displayed to the form users
   • Hint: Allow the label to have more instructions if needed
   • Placeholder: Enter placeholder text that will display in the form's field before being edited by the user
   • Default Value: Add default data that will populate in the field unless changed by the user before submitting
   • Required: Make a field required for submission
   • Read Only: Set a field to "read-only" (not requiring user input) 
   • Show Conditionally: Choose to only show the field if specific conditions are met
     • Note: Conditions can only be linked to Autocomplete, Number, Calculation, Checkboxes, Radio Buttons, and Select elements.
   • Advanced:
     • Name: This is what the element will be named when submitting data
     • Regular Expression Pattern Validation: Enter a regex pattern and select a flag
     • CSS Classes: Add CSS classes to the element
     • Enable Data Lookup: Enable Data Lookup
     • Enable Element Lookup: Enable Element Lookup
     • Meta Data: Enter JSON above to add custom configuration to this element for your developers to consume.
   • Note: View more information on Element Types
10. If needed, click the two lines on an element to reorder the list
    
11. If desired, you can add pages to the form
    
12. Select Preview to view your form in mobile view or click Save 
    
13. Navigate to the Workflow tab 
    
14. Select Add Submission Event 
    
    
    • Note: You must create an Email + PDF submission event to make the form active.
15. Fill out the Submission Event fields
    
    
    • Event Type (Required): Select the Email + PDF type
    • Label: Add an optional label to the submission event
    • Exclude Elements: Choose to exclude specific elements from the submission event
    • Email Address (Required): Enter the email address to send the email to after a successful submission
    • Email Subject Line: Add an email subject line for the form submission
    • PDF File Name: Enter a name for the PDF file
    • Use email template: Toggle on to select an existing email template from the drop-down menu
    • Display submission ID in PDF: Turning this on will ensure the submission ID is added as a footer to each page of the PDF
      
    • Include payment details in PDF: Toggle on to add a page break after the form content and include the payment receipt information
    • Page break on form pages: Turning this on will create a page break in the PDF that reflects the page breaks in the form itself
      
    • Run Conditionally: Set conditional parameters for the submission event
    • Note: Several fields allow submission data injection. Select the question mark next to the field for example values. 
16. Add additional workflows/submission events as needed
17. Select Save 
    

Related Articles

• Submission Events Overview
• Form Element Types
• Add Conditions to a Form