How to Build a Web Form


  1. Log into OU Campus
  2. Hover over "Content" in the top, blue toolbar
  3. Click on "Assets"
  4. Click on the "New" drop-down buttonImage Placeholder
  5. Select "Form"
  6. Fill out the Asset Info:
    1. Name the form according to these naming conventions:
      1. /name of folder the form will be used in
      2. official form name
      3. Example: /admissions TOFT Registration Form
      4. This helps all OU Campus users keep their assets together by grouping them according to site folder
    2. Skip Description, Tags, and Lock to Site
  7. Fill out the Access Settings:
    1. For the Access Group - select your website's access group name
    2. For the Available To - select your website's access group name
  8. Choose and fill out the form field elements:
    1. What is a Form Field element? These are the types of fields available for you to use in your web form. Here are the options:
      1. Single-line text field - great for short answers and free-entry text
      2. Multi-line text field - great for long answers and free-entry text
      3. Radio buttons - lists multiple choices, but the user is only able to select one. Choices are displayed as a vertical list with a button next to each of them. 
      4. Checkboxes - the same idea as Radio buttons, but users can select more than one option. Perfect for "Select all that apply" questions.
      5. Drop-down - displays a collapsing list of options for users to choose from. Users can only choose one of the options in the drop-down list.
      6. Multi-Select - same concept as a drop-down list, but users can select more than one option. I do not recommend this option for forms that will see a lot of mobile traffic because the multi-select is hard to operate on a touch screen.
      7. Date/Time Picker - displays a calendar or a calendar and time selector for users to choose and date and/or time. Great for "Date of Birth" and other date-based questions. 
      8. Instructional Text - this field does not allow the user to submit anything, but it does allow the form builder to insert additional text between form fields. It is great for breaking up forms into sections or providing additional instructions or context to form field questions. 
    2. Insert your chosen form fields into the form body. Click the green plus button next to each field type to add it to your form body. 
    3. Fill out the form field info for each field you want to use:
      1. Label - This is what the user will see when you publish the form
      2. Name - This is what OU Campus uses to know which field is which when processing the form. OU Campus will auto-fill this field for you after you click off of the "Label" field
        1. You can add your own field names by deleting the auto-generated field name and inputting your own
      3. Helper Text - not required, but helpful to add if you want users to answer the form field in a specific format. An example of Helper Text is "mm/dd/yyyy" for date format.
      4. Default Text - not required. This option allows the form builder to specify a default submission to the field
      5. Required - Not required. Select this checkbox to make this field required for the user to fill out before the form will submit
      6. Validation - not required. this allows you to do basic validation on certain field types. Email address validation will make sure the submission looks like a regular email address, Minimum Length allows you to set a minimum on submission length - useful for phone number validation, Regular Expression validation allows form builders to build custom validation schemes.
      7. Advanced - this field allows for additional formatting and data properties to be used for the field. Please see Using the Advanced Form Field section for LDP Forms for more information. 
  9. Now that all your form fields are inserted and labeled correctly, move on to the Email Messages settings.
    1. Email Messages allow for form submissions to be emailed to an email account upon submission. Use this section if you want the form to send submissions to an email address for your office, or if you want to send an email message to the user who submitted the form.
    2. Click "Add" under the Email Messages section to get started.
      1. Add the "To" email address. This can be your email address, your department or offices, or any address you wish to send form results to.
        1. If you want to send an email to the user who submitted, make sure you asked for the user's email in your form fields. Place your cursor in the "To" field and type two opening curly braces - {{
        2. Then start typing the field name assigned to the field that gathers email addresses - OU Campus should bring up a list of fields to choose from once you start typing. Choose the appropriate field to insert the user's email address.
      2. Add the "From" address - this will always be "forms@atu.edu". This is a specific email used for form submissions, please do not use any other email address.
      3. Add the Subject Line
      4. Add the email body. The email body editor allows you to do plain text, but no rich text editing. You can insert any form submission by using curly braces {{ and choosing the field you want to insert. Example: 
        1. First Name: {{firstname}}
      5. A fast way to build a form submission email is to select the "include all submitted values" checkbox. This will insert an unformatted list of the field submission after any body text in the email. It's not pretty, but it is fast. 
    3. You can add multiple email messages if you want. If you would like the form to submit to multiple email addresses, you must fill out an Email Message section for each separate email address. 
  10. Now do the Form Settings section:
    1. Success Message - 
      1. Text Option (Default)  - write in a small success message for users to see after they submit the form. Example: "Your form was submitted successfully. You will be contacted by [Office Name] shortly."
      2. URL Redirect - Tell the form to redirect users to a different page once they have submitted the form. This is useful for gating content behind a form to collect information, or providing event information. It is bad practice to use a URL redirect to send users to a page that is not designed to be a form thank you page. 
    2. Failure Message -
      1. Input text for a user to see if the form does not function properly. Example" Form failed to submit properly. Please contact [Office Name] at example@atu.edu for assistance. 
    3. Save Results in Database
      1. Click this button to save the results in a CSV for you to pull later. How to access form results for OU Campus web forms
    4. Submission Button Text
      1. You can change the submission button to display different text. It will say "Submit" by default if you leave it blank. 
    5. Advanced Field
      1. Leave this part blank
  11. Click "Save"
  12. Click "Publish" on both of the publish windows


Visit the How to insert an OU Campus form into a webpage help article to learn how to add your newly created form to your website.