Part 5: Create a Web Form

In this part of the exercise, you define a Web Form for Orders for use in on an external site.

1. Because a Web Form is meant for external customers, it requires two additional fields which you need to create first:
   1. Go to the Configuration page, under the Customization tile, click Objects. Navigate to Orders > Fields.
   2. Create two new fields: From Name (Text Field) and From Address (Email Address).
2. Go to the Configuration page, under the Customization tile click Objects. Navigate to Orders > Forms > Default Layout.
3. Click Clone Layout.
   
   
   
   
4. For the Name, type WebOrderLayout, and then select the Web Forms option.
   
   
   
   

   Accept the note that some fields are mandatory for the selected layout and click Save.

5. Add a Form Control of type Section to the top of the Form, named Submitter Information.
6. As the From Name and From Address fields already appear in the Basic Information section by default, move them to the new Submitter Information section.
7. Moreover, add Field Subject from the Elements panel to the Submitter Information section.

   Note: All mandatory fields as mentioned in the note above now belong to your Web Form.
   
   
   
   

8. Click Save Changes. 
9. Moreover, edit the properties of the fields From Name, From Address, Subject, and Description to make them all Required fields.
   
   800px
   
   
10. Go to the Configuration page, under the Customization tile, click Objects. Navigate to Orders > Web Forms and click New Web Form.
11. Fill-in the fields as shown in the following screenshot:

    Choose MyWebForm as Title and provide a Description. For the Generate option, the Case Form Link setting means that you will be given a URL link for the Web Form. Select your WebOrderLayout Form from the drop-down and provide your own User Profile.
    
    
    
    

12. Click Save.
13. A Link box opens with instructions for copying and pasting the provided script:
    
    
    
    

    Follow the “alternative directions” by copying and pasting the provided URL into a new Web browser tab to see your resulting Web Form:
    
    
    
    

14. Optionally, edit the Web Form to generate customizable HTML instead:
    1. Go to the Configuration page, under the Customization tile, click Objects. Navigate to Orders > Web Forms.
    2. Edit the Web Form MyWebForm as shown, specifying Customizable HTML for the Generate option and selecting the highlighted fields:
       
       
       
       
    3. Click Save.
    4. Click Generate HTML.
       
       
       
       
    5. Copy and paste the provided code into a Text editor, such as Notepad. Save the file with an HTML extension (for example, MyWebOrder.html).
    6. Double-click on the HTML file saved above to open it in a new Web browser tab:
       
       
       
       
15. Housekeeping: Remove fields From Name and From Address from the Default Layout form of the Orders object as they are only required on the Web Form:
    1. Go to the Configuration page, under the Customization tile, click Objects. Navigate to Orders > Forms.
    2. Select Default Layout. Remove fields From Name and From Address from the section Basic Information.
    3. Click Save Changes.

Taking It Further

To extend what you learned in this exercise, use the AgileApps Cloud wiki pages (http://agileappscloud.info/) to learn how to implement Form Scripts in your AgileApps application.