Mura 10: Forms

How to Create/Edit a Form

  1. From the back-end administration area, go to the Content section, select the Tree View tab, then select the Forms button.
  2. Click the three-dotted menu beside Forms and select Add Content.
  3. The Select Content Type dialog window should appear.
    • Form
      • The Form option is the most common selection used. Using this option will offer you the ability to create a form using a special user interface, specifically designed with form creation in mind.
    • Simple Form
      • The Simple Form option is typically used by developers so they have a way to include their own custom designed form, and yet allow the data to be collected and managed by Mura.
    • Folder
      • The Folder option is available so that you can create groupings of Forms. This is useful for grouping forms logically and also for keeping forms used by similar groups of users together so you only need to set permissions on the Folder, versus having to modify permissions for each and every form.
  4. The Create Form screen should appear.
    • Basic Tab
      • Title (required)
        • Enter a title for the form.
      • Content
        • Toolbar
          • This is where the actual content of the form is created. Across the top of the Content User Interface (UI) is a toolbar which allows you to add/create form elements. To rearrange form elements, simply click, drag, and then drop to your desired order.
          • Form Button
            • You may optionally click the "Form" button to enter specific information used when the form data is emailed to any addresses listed under "Send data to email address". You can also change the label of the Submit button, if desired here.
          • Section Button
            • If you select the "Section" button, it will create a grouping for form fields to belong to. Any fields listed directly below it will appear in that section. For developers, this merely creates a HTML "fieldset" element. Click on the "New Section" element itself to reveal options in the main window.
            • Any text entered in the Label field will automatically update the information elsewhere. For example, if you enter "Your Information" into the Label field, "Your Information" will also appear at the top of the section, and in the column of form fields.
          • Text Field
            • The Text Field is a commonly used form field used to collect simple data such as names, email addresses, phone numbers, etc.
            • Click the "New Text Field" element itself in the left column to reveal options in the main window. Any text you enter in the Label field will automatically update the name and other attributes just as it did in the previous "Section" button. This feature applies to all other form field types as well.
              • Basic Tab
                • Label
                  • Data entered here will appear with the form field so end-users know what to enter into the form field.
                • Name
                  • This field is primarily for developers, and the text here will become the "name" attribute of the form field itself.
                • Value
                  • You may enter a default value to be displayed when the form renders.
              • Advanced Tab
                • Size
                  • Primarily used by developers, data entered here will be used for the form field's "size" attribute.
                • CSS ID
                  • Primarily used by developers, data entered here will be used for the "ID" attribute of the form field.
                • CSS Class
                  • Primarily used by developers, you may enter a CSS class to be applied to the "class" attribute of the form field.
                • Wrapper Class
                  • Primarily used by developers, you may enter a CSS class to be applied to the container in which the form field is placed within.
                • Placeholder
                  • Data entered here will appear inside the form field, but is only "temporary" and will not be used if the form is submitted. For developers, this is the "placeholder" attribute of the form field.
                • Tool Tip
                  • Data entered here will be applied to the "title" attribute of the form field.
              • Validation Tab
                • Validation Type
                  • None
                    • No validation will be applied to the form field.
                  • Numeric
                    • Validates the data entered in the form field is numeric. If it does not validate, an error message will be displayed.
                  • Date
                    • Validates the data entered in the form field is a valid date format. If it does not validate, an error message will be displayed.
                  • Email
                    • Validates the data entered in the form field is a valid email address format. It does not verify whether or not the email address actually exists. If it does not validate, an error message will be displayed.
                  • Regex
                    • This field is reserved for experienced developers. Enter a JavaScript regular expression that should be invoked when validating the form field here. If it does not validate, an error message will be displayed.
                • Validation Regex
                  • If the Validation Type is set to "Regex", enter a JavaScript regular express to be used here.
                • Validate Message
                  • Text entered here will be displayed to end-users if the form field is required, or does not pass validation rules.
                • Required?
                  • If enabled, the Validate Message will be displayed to end-users who do not complete the form field.
          • Text Area
            • The Text Area form field represents a multi-line plain-text editing control.
          • Hidden Field
            • The Hidden form field does not show on the page. This field is typically used by developers to capture additional, or dynamic data such as the name of the page the form is being used on.
          • Radio Button Group
            • The Radio Button Group is a listing of many choices, where end-users may only select one.
              • Source Tab
                • Source Select Menu
                  • Create New
                    • Selecting Create New, and clicking the "Update" button will create a new List tab.
                    • For each option, enter a Label to be displayed to the end-user, and a Value to be stored in the database to indicate which option the user selected.
                    • To indicate a default selection, click the radio button next to your desired default row.
                  • Custom Display Object
                    • Primarily used by developers, you may enter the name of a Custom Display Object to use as the source for options.
                  • Custom Object
                    • Primarily used by developers, you may enter the name of a Custom Object to use as the source for options. Code example >
                  • Remote Source
                    • Primarily used by developers, you may enter a Remote Source to use as the source for options. Code example >
          • Checkboxes
            • A Checkbox allows you to select a single value for submission in a form (or not).
              • Source Tab
                • See the Source Tab section in the Radio Button Groups section above.
          • Dropdown Menu
            • The Dropdown Menu allows you to create a select menu of options for end-users pick from.
              • Source Tab
                • See the Source Tab section in the Radio Button Groups section above.
          • File Upload Field
            • The File Upload Field creates a form field to enable end-users the ability to attach files to their form submission.
              Note: Allowing the general public to upload files to your website may introduce a security risk. Please consult an experienced and qualified developer before using this feature.
          • Block of Static Text
            • The Block of Static Text button allows you to add text within the form itself. This is especially useful when you need to add instructions within the form.
          • Nested Form
            • The Nest Form button enables you to nest another Mura form within the form itself. This is useful when you have multiple forms that may contain duplicate information to be collected such as First Name, Last Name, Email, etc. You could create a separate form with only those fields, and then insert the form into the other forms requiring that data.
        • Page
          • In the far left column of the Content UI, you can create and/or delete additional "pages" of form fields. This is useful for long forms, and when you wish to display only a subset of form fields to your end-users to reduce the anxiety of completing a long form all at once.
          • Click the Plus sign to add a new page.
          • To delete a page, select the page you wish to delete, then click the circle with an "x" in the middle of it to remove the page.
      • Confirmation Message
        • Text entered here will appear for users after they successfully complete and submit the form. This is a great place to add information such as your organization's phone number, business hours, etc.
      • Send data to email address (Separate multiple email addresses by comma)
        • Enter a comma-delimited list of email addresses of where you would like email notifications sent to. Many organizations use a group email address of some kind for this field such as sales@yourdomain.com instead of entering individual's email addresses here.
    • Publishing Tab
      • Display

        • This field controls whether or not the form will be visible to users via the public, front-end view of your site.

        • Yes

          • If Yes, then the form will be visible to users via the public, front-end view of your site.

        • No

          • If No, the form will not be visible to users via the public, front-end view of your site.

        • Per Schedule

          • You may specify a schedule for the form to display, including the frequency of the display such as daily, weekly, monthly, etc. and when the form should stop displaying, if ever.

      • Content Parent

        • You may use this field to move a form to be grouped under another form or Folder of forms. See the Selecting New Parent section for more details and instructions.

      • Notify For Review

        • When enabled, Send to and Message fields will appear.
        • Send to
          • You may select one or more users to receive an email notification after saving or publishing the form. To select more than one person, use <CTRL> + click (on a PC) or <CMD> + click (on a Mac).
        • Message
          • Text entered here will accompany a link to view the form in the email notification.

      • Add Notes

        • This field allows you to enter informational notes which can be shared amongst content managers, without it appearing anywhere on the public, front-end view of the site.

    • Categories Tab

      • The Categories tab is where you manage a form's Categories. To learn more about Categories, including how to create/manage categories, and categorize content, visit the Categories section.

    • Tags Tab

      • The Tags tab is where you manage a forms's Tags. Visit the Tags section to learn more about Mura Tags.

    • Advanced Tab
      • Content ID
        • This is a unique identifier of the form and typically used by developers.
      • Caching
        • Mura uses "caching" to store data in memory, so future requests for that data can be served faster.
        • Exclude from Site Cache
          • If enabled, Mura will not include the form in Mura's data cache.
      • Locking
        • Mura offers the ability to "lock" forms so they will not be accidentally deleted by content managers.
        • Lock Node
          • If enabled, content managers will not be able to delete the form.
  5. After completing the form, select your desired publishing option to save your form.
  6. To add the form to a page or section of your site, please visit the Form Module section.

Managing Form Data

Whenever a Mura-created form has been submitted, the information is captured and stored in Mura's database. With Mura, you can view form data, and even export the data for archival purposes and/or to import it into a third-party system such as a Customer Relationship Management (CRM) system.

How to View and/or Download Form Data

  1. From the back-end administration area, go to Content, select the Tree View tab, click the Forms button.
  2. Click the three-dot menu next to the row of the form you wish to view/download data for, and select Form Data.
  3. Or,  select the form you wish to view/download data for.
    1. Then, click the Form Data button.
  4. You should see the Form Data Screen.
  5. From the Form Data screen, you can see the Total Records Available at the top of the screen.
  6. By default, the From field is pre-populated with the oldest form submission stored in the database, and the To field is pre-populated with the most recent form submission stored in the database. You may change these to your desired time range to limit the results to be returned.
  7. You can also choose which form field you would like to sort the results by and the sort direction.
  8. You may also perform a Keyword Search of form submissions by specific form fields.
  9. To view the data on the screen, click the View Data button.
  10. The form data results should now appear on the screen.
    1. You can edit and/or view more details of each result by clicking the three-dot menu and selecting Edit.
    2. From the form detail screen, you can make edits to your desired form fields, then Update or even Delete the form entry entirely.
  11. To download for results, from the Form Data screen, click the Download button.
    1. You should be prompted to save the file. The data will be exported as a .CSV (comm-separated values) file. This makes it easy to open in popular spreadsheet software programs, and even import the data into a third-party system such as a Customer Relationship Management (CRM) tool.
  12. You can also choose which form fields to display and/or export. To do so, click the Edit Display button at the top of the Form Data screen.
  13. You should now see a screen with a number of configuration options. Under the Available Fields menu, you can select a field you wish to display, then click the double right arrows pointing to the Summary Display Fields, or if you wish to modify the display of the "form detail" screen, you can select the double right arrows under the Detail Display Fields. To remove a form field from the display, simply click the form item in the display, and then click the double left arrows and it will be removed. You can also control the order of the display fields by selecting a field, and then clicking the Up or Down button, as desired. If you leave the Summary Display Fields empty or blank, by default, Mura will display and/or export all form fields.
  14. Once you've made your desired changes, click Update to save the new displays.
  15. Next time you either View Data or Download, you will only see the form fields selected, plus the default "Date/Time Entered" form field, which is created by Mura for all form entries.