How to Configure Titan CMS Forms on Your Responsive Website

How to Configure Titan CMS Forms on Your Responsive Website

Titan managers, take note:

  • We no longer use tables to configure forms on Titan within responsive websites.
  • Given recent advances in responsive web capabilities, we recommend a new approach to the layout of form elements.
  • Pass this How-To along to your users, to keep them abreast of the changes and the opportunities that come with them.

1. Begin editing your page. Select the Forms Editor from the Add New Block dropdown.

2. Name your form and write a description.

3. Edit at the top of the Form Content field to bring up a WYSIWYG editor similar to the Freeform block. The editor includes a new component, the Titan Forms modal. Use it to add each text box, drop-down list, check box, radio group, etc., to your form. Place other content before, after, or between your form elements.

4. Current responsive web capabilities prompt a new approach to the layout of the form elements.

5. Follow these steps with each element:

  • Begin typing your label or question (Full Name:). Then hold the Shift key while you press Enter. This will apply a soft-break.
  • Open the Titan Forms modal.
  •  Select the desired element, complete the selections inside and press OK.
    • In a text box, the theme of your website might override any Pixel Width you enter, so entered values would not affect your layout. The Value you enter for Number of Rows is important for multi-line textboxes.

  • Press Enter and repeat the process for your remaining elements.
  • To return to and further edit an element, double-click the element to open the Titan Forms modal.
  • If you have marked a field as required, supply a specific error message, including the title of the information that is incorrect. When a user submission fails, all error messages display at the top of the form under this message: “The following required items were not provided or are in the wrong format. Please provide the required responses and submit again:”

6. When you have finished entering content into the WYSIWYG, press OK to return to the Forms Editor. Complete the remaining selections for your form. If you are unsure about a specific selection, use the default. Add the Follow-up Text to confirm submission and suggest any next steps to the user. Complete the information for User Confirmation Email, if any.

7. When your entries are complete, press OK to return to editing the page where the form will display.

8. Keep the user in mind as you build your web forms:

  • Group your content/questions in a clear, organized pattern.
  • Designate fields as required or optional. Notate the exceptions.
  • Most of the time, we want to create a form that the user completes quickly. However, in the case of complex information, provide more direction and slow down the user to ensure accuracy.
Originally Published: Thu, July 21, 2016