Form Builder‎ > ‎

Form Builder Example

This example creates a Contact Form with a Message box and a Yes/No question. These features are added to the popup action form created in the Display Mode (Step 1: Initialization) example.
  1. In the Title text field, enter Contact Form. Contact Form is the Title name for the pop up action form.

  2. In the Form Align drop down menu, select Center. The Center option aligns the action form in the center of the page.

  3. In the Label Position drop down menu, select Left. The Left option positions the input text to the left position within the text box.

  4. In the Label Column Width, enter 160 to specify the column width for the text field.

  5. In the jQuery Theme drop down menu, select flick for the action form theme.

    Figure 1: Specifies Previous Steps




  6. Ensure all the Enabled check boxes are selected. The Enabled check box is next to the Type drop down box.

    • Selecting the Enabled check boxes include the fields on the action form.
     
  7. Click Add Custom Field button to insert a custom Title field.

  8. Then enter Message in the Title field and select Small Text from the Type drop down box.

  9. Click General to open the General settings window. In General Settings enter Send Us a Message in the Short Desc. text box. This message is a brief instruction to the user.

  10. Click General to close the General settings window.

    Figure 2: Displays General Settings Window




  11. Now click UI Settings to open the UI Settings window. In UI Settings enter width: 240px; height: 100px in the Control CSS Styles text box. 240 is the width in pixels and 100 is the height in pixels.

  12. Check the Enabled check box to include the Title text field on the action form.

  13. Click UI Settings to close the UI Settings window.

    Figure 3: Displays UI Settings Window




  14. Add another custom Title field using the Add Custom Field button identified with the green arrow on Figure 4.

  15. In the Title text field, enter Email Newsletter.

  16. Then select the Yes/No (Radio boxes) option from the Type drop down box.

  17. Now select the General settings option, then enter Send me Monthly Newsletter in the Short Desc. text box.

    Figure 4: Identifies Add Custom Field and Yes/No Radio box




  18. Click on Validations, identified with the green highlight on Figure 5, to open the Validations window. In the Validations window check the Field is Required check box. This field requires the user to complete the text field on the action form. 

  19. Then click Validations, to close the Validations window.

    Figure 5: Identifies Validations Window




  20. Finally, scroll down and click on the Save button, identified with the blue arrow on Figure 6. It may take awhile to save the form changes.

    Figure 6: Identifies Save Button




  • When the form is completely saved, the Form Builder (Step 2: The Form) page closes and return to the action form page.

    Figure 7: Identifies Action Form Module



  1. Click on the Access this resource link in the action form module, identified with the green highlight on Figure 7, to open the action form. This link will open the Contact Form, identified on Figure 8. Click on x or Cancel to close the Contact Form to return to the action form main page.

    • Notice the added Message text box and Email Newsletter radio button.


    Figure 8: Displays Contact Form


Comments