This article will show you how to create a form in CivicOptimize as well as how to delete an existing form.
Create a Form
- Navigate to Forms
- Click the + Create button in the lower right corner
Configure the Form Summary
The Summary tab is where you will edit the settings, access, and other configurations for the form.
- Fill out the Settings fields
- 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.
- Set the form Access
-
Start/End Date: If desired, enter the dates this form will become available and unavailable
- You can also configure a message that will appear whenever anyone tries to access the form URL outside of your published dates.
- You can also configure a message that will appear whenever anyone tries to access the form URL outside of your published dates.
-
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
-
Start/End Date: If desired, enter the dates this form will become available and unavailable
- If needed, configure where you would like users to go after clicking the Buttons
- 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
-
Display a button to download the submission PDF: This toggle adds a Download PDF button to the submission message, allowing users to immediately download a copy of the PDF after completing the form. The PDF customizations are the same as any workflow event, allowing you to exclude specific elements, rename the PDF, and add the submission ID or page breaks.
-
Customize the display after submission: This option allows you to customize the content of the submission message, allowing you to include additional context or links to other import URLs.
- (Optional) Add a Submission Title. The title will replace the form name as the title for any associated approvals and the default name for saved drafts.
- (Optional) Use the Personalization section to configure an endpoint that can be used to personalize form content prior to form load
- (Optional) Configure a Validation endpoint for the form to validate against. The endpoint will be called prior to submission and any submission events.
- (Optional) Use Receipt Generation to configure a custom receipt identifier for your form that can be used to search for submissions or configure an endpoint that can be used to personalize form content prior to form load.
- (Optional) Toggle on Autosave to automatically resume the form if autosave data is present
Note: When toggled on, the pop-up asking the user if they would like to start again or continue with the autosave will be skipped, ensuring that the user always continues with their autosave data. - Select Save
- Follow the instructions below to add form elements on the Builder tab
Use the Form Builder
The Builder tab is where you will create the fields (also known as elements) for your form. You can add elements manually, use an existing form template, or convert a PDF to a form.
- Navigate to the Builder tab
- Select Add New Element to add new elements to your form
- You can also choose to use a form template or upload a PDF form
- Create From Template: Choose a form template from our library to get a head start on creating your form.
- Create From PDF Form: Upload a PDF form to convert it to a CivicOptimize form. Please note that results aren't guaranteed as this feature is in beta. Review the output and make any necessary modifications.
- You can also choose to use a form template or upload a PDF form
- 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. - Fill in the element's detail fields
Note: View information about Form Element Best Practices.- 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. 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.
- 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
- 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)
- Display a Hint: Add a hint to allow the label to have more instructions. You can choose to have the hint display as a tooltip or below the element label.
-
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.
- If needed, click the two lines on an element to reorder the elements
- If needed, you can add pages to the form to help streamline and organize the flow of the form
- Select Preview to view your form in mobile view
- Click Save
- Follow the instructions below to add a Workflow to the form
Add a Workflow to the Form
Workflows allow you to configure processes such as who will be notified of a submission, if approval is required, or if the user will be able to submit a payment when completing the form.
- Navigate to the Workflow tab and click Add Submission Event
- Fill out the Submission Event fields
Note: Several fields allow submission data injection. Select the question mark next to the field for example values.- Event Type (Required): Select the applicable event type. We recommend adding an Email + PDF or Email type to receive an email notification when a user has submitted the form.
- Label: Add an optional label to the submission event
- Exclude Elements: Choose to exclude specific elements from the submission event
- Email Addresses (Required): Enter the email addresses 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
- Add additional workflows/submission events as needed
- Select Save
- Now that your form is created you can share it with users! Learn how to add the form to an app or embed the form on your webpage.
Delete a Form
Instructions
- Navigate to Forms
- Select the three-dot action menu next to the form you wish to remove
- Click Delete
- Select Delete on the pop-up that says Are you sure you want to delete [form name]?
Comments
Let us know what was helpful or not helpful about the article.0 comments
Please sign in to leave a comment.