• Introduction
• Creating and Managing Datatypes
• Creating and Managing Fields
• Widgets
• Creating Specific Fields
• Using Input Forms with Datatypes
• Test Your Knowledge

Using Input Forms with Datatypes

To allow the visitors of your website to add data to your datatypes from their web browsers, you should add input forms to web pages.

The Composite.Forms.Renderer package can create these input forms automatically and handle the input information for you. All you have to do is to add the Composite.Forms.Renderer function to a web page and link it to a global datatype that will hold the input information.

The data added via these forms will be added to the corresponding datatype and can be read or used from within the C1 application.

You can set up this Composite.Forms.Renderer function to receive email notifications every time a person submits data via the form. CAPTCHAs can help you avoid automatic form filling by spam bots etc.

Adding Input Form to Web Page

Before you add an input form to one of your web pages, you should:

1. Make sure that the Composite.Forms.Renderer package has been installed in your instance of Composite C1.
   
2. Have a global datatype available to hold data entered by the user via the form with all necessary fields added and set up.

Please note that if your datatype contains Data Reference fields of the C1 Page, C1 Image, C1 Media File, or C1 Media Folder reference type, you should change their default widgets to the corresponding Selectors or Optional Selectors. Currently Composite.Forms.Renderer does not support these widgets. Change the widgets as follows:

• C1 Image: Composite.Widgest.DataReference.DataTypesIImageFile.Selector
• C1 Page: Composite.Widgest.DataReference.DataTypesIPage.Selector
• C1 Media File: Composite.Widgest.DataReference.DataTypesIMediaFile.Selector
• C1 Media Folder: Composite.Widgest.DataReference.DataTypesIMediaFileFolder.Selector

To add an input form to a web page:

1. Edit a web page where you want add the form.
   
2. On the page’s toolbar, click Insert, Function to open the Select Function window.
   
3. Locate and select the Composite.Forms.Renderer function and click OK.
   
4. In the Function Properties window, for the DataType property, select the datatype that will hold the input data for this form. All the fields in this datatype will become available in the form via the widgets you selected for this datatype.

   

   ^{Figure 50: Setting up Composite.Forms.Renderer}

5. Set other optional properties such as Intro Text, Response Text, Response URL, Send Button Label, Reset Button Label, Email, UseCaptcha.
   
6. Click OK.
   
7. Save and publish the page.

Now users can open this page in their web browsers and fill out the form. All the data entered in this form will be stored in the corresponding datatype.

^{Figure 51: The input form on a web page}

The following are the properties you should or can set up for the input form you create:

Setting Up Email Notifications

Optionally, if you would like to receive notifications every time a user submits a form on your website, you can set up email notifications for the Composite.Forms.Renderer used on a web page.

Important: To be able to send email notifications, make sure that you have configured an email host by editing ~/web.config and including the /configuration/system.net/mailSettings section. For information about configuring the e-mail host in web.config, please refer to http://docs.composite.net/ConfiguringEmailHost .

To send an email notification to one recipient:

1. Select the Composite.Forms.Renderer function on a web page and click to select its Email parameter.
   
2. Set its Value type to Execute a function call and the launch the function designer.
   
3. In the Select Function window, select the Composite.Forms.FormEmailHeader function and click OK.
   
4. Specify the parameters of this function and click OK:
   
   • From: The sender’s email address.
   • To: The recipient’s email address.
   • Cc: An optional field to specify other recipients’ email addresses to send an email notification copy to.
   • Subject: The email message’s subject
     
5. Click OK in the Function Properties window.

To send an email notification to two recipients:

1. Select the Composite.Forms.Renderer function on a web page and click to select its Email parameter.
2. Set its Value type to Execute a function call and the launch the function designer.
3. In the Select Function window, select the Composite.Forms.JoinEmailHeader function and click OK.
4. Now select the Email A parameter and repeat the above steps for setting up the Composite.Forms.FormEmailHeader function.
5. Select the Email B parameter and repeat the above steps for setting up the Composite.Forms.FormEmailHeader function, too.