Building and Using Forms - Documentation topics on: building and using forms,.

Building and Using Forms

Click on the Pencil icon next to "Form Title" and give it a value of "My Contact Us"Fully functional dotCMS forms can now be created by anyone without having to know, or be exposed to, any HTML, Velocity, or Javascript.  Furthermore, all form contributions are now stored as dotCMS content and can now be dynamically queried or reported upon by dotCMS internal/external dotCMS pages as desired.  The video tutorial below demonstrates how to:

  • Create and deploy a dotCMS form on a page
  • View content contributions from forms
  • Create a page that dynamically displays submitted form content on a login restricted dotCMS "back-end" user page.

Steps to creating a simple Contact Us Form

  1. Log into the backend of your dotCMS instance
  2. Click on the Website tab
  3. Right-click on the desired folder that you would like to place the form page and thank you page, select New > HTML Page, name the page "My First Contact Us Form" and save the page.  Perform the same steps to create a page called "Thank You" in the same directory.  Use the same template when creating both pages.
  4. On the Thank You page you created, click the "+Add Content" button in the main body of the page and add a new piece of content such as "Thank you.  You will be contacted as soon as possible by one of our staff members" and "Save/Publish" the content on the page (remember the path to this page as you will need to provide it when you make your form).
  5. Click on the return to "Admin Screen" button to stop editing the page.
  6. Click on the Reporting tab (commonly role restricted),
  7. Click the "Add New Form" button on the right side of the page
  8. Name your form "My First Contact Us Form"
  9. Make sure the Content Type field is set to "Form"
  10. Click on the " Save Content Type" button
  11. You will notice that Form Title, Form Email, and Form Return Page fields have automatically been added to your Form Content Type.
  12. Click on the Pencil icon next to "Form Title" and give it a value of "My Contact Us"
  13. Click on the Pencil icon next to "Form Email" and place your own email address in the value field
  14. Click on the Pencil icon next to "Form Return Page" and place the relative path to your "Thank You" page (Ex: "/getting-started/forms/")
  15. Click the "Add New Field" button and add First Name, Last Name, and Email as text fields (required, searchable, show in listing).  Then add "Comments" as a required text area field and save the Form Content Type
  16. Click on the Website tab and re-open the "My First Contact Us Form" page you created in step 3.
  17. Click on the "+Add Content" Button on the main body of the page and select "Add Form" from the drop down menu.
  18. Select "My First Contact Form"

You should now see all of the fields you created in your Form Content Type on your page ready for form submission.  If you would like to override the default CSS styles applied to the form, simply place a piece of content above the form content with the replacement styling you prefer.  The video tutorial shows some default form styles being overwritten.

How to View Submitted Form Content

View Form Submissions as an Excel File

  1. Click on the Forms from the Reporting tab drop down menu
  2. Find the title of your form under the form name column, then look to the right under the Download to Excel column and click on the Excel icon to download and Excel file containing the current form submissions

View Form Submissions as Content

  1. Click on the Forms from the Reporting tab drop down menu
  2. Find the title of your form under the form name column, then look to the right under the Content column and click "view" link
  3. You will now see each separate form submission as an individual piece of content for that form.  Form submissions can be edited as content.  Click on any of the column headings to reorder form submission content by that column heading.

The Basics of Dynamic Form Reporting on a Login-protected Page

How to create a Simple Dynamic Listing will be covered in the next few tutorials.  In this tutorial we will simply give you an example pull of form content, show you how it is done, and then break down how content is dynamically displayed in the last three getting started tutorials.  Please preview the video tutorial before following the steps to create a dynamic report of content submitted from your "contact us" form.

  1. Click on the Forms menu item under the Reporting tab
  2. Find your "My First Contact Us Form" created earlier in this lesson, and click on the "view" link under the Content column
  3. Look in the left hand column under your form type search boxes and click on the down arrow to the right of the "Search" button and then on the "Show Query" option
  4. Copy the "Velocity Content Pull" sample code into a text editor like Notepad, WordPad, or Textwrangler, etc. Now modify the code, which should look something like this:
    #foreach($formContent in $dotcontent.pull("+contentType:RequestProspectus +(conhost:48190c8c-42c4-46af-8d1a-0cd5db894797 conhost:SYSTEM_HOST)",10,"MyFirstContactUsForm.lastName"))
      <h3>$velocityCount. $formContent.lastName, $formContent.firstName</h3>
  5. Now that you have the Velocity content pull, create a new page called "My Contact Us Report" in a directory of your choice from the Site Browser tab with a template of your choice.
  6. After creating the page.  Click on the "+Add Content" button in the main detail section of your page and select "Add Widget" from the drop down menu
  7. Select "Simple Widget" from the widget type listing and then click on the "+Create New" button
  8. Paste the code from your text editor into the widget and click the "Save / Publish" button.

You should now see a dynamic listing of your form submissions on the Page