Collect data submitted via HTML forms

This package allows C1 developers to insert HTML forms on web pages in C1 and collect and save input data when the form is submitted. The submitted data is saved as "field name" = "value" pairs in an XML file, which can be later opened and viewed as, for example, a Microsoft Office Excel spreadsheet. An email notification is sent to the website owner as well as the user who has filled out the form. When the form has been submitted and processed, a custom HTML response message is displayed to the user.

How to implement Composite.Forms.FormSubmitHandler

  1. Configure the email host to use the email features of the package (please see "Email Host Setup").
  2. From the Content or Layout perspective, insert the Composite.Forms.FormSubmitHandler function ( Insert > Function), or add the following code: 
     
<f:function name="Composite.Forms.FormSubmitHandler" xmlns:f="http://www.composite.net/ns/function/1.0"> 
  <f:param name="FormId" value="RegistrationForm" /> 
  <f:param name="HTMLForm" value="~/Frontend/Composite/Forms/FormSubmitHandler/RegistrationForm/HTMLForm.html" /> 
  <f:param name="Response" value="~/Frontend/Composite/Forms/FormSubmitHandler/RegistrationForm/Response.html" /> 
  <f:param name="ShowFormPost" value="True" /> 
  <f:param name="EmailFrom" value="mymail@mydomain.com" /> 
  <f:param name="EmailRecipients" value="mymail@mydomain.com" /> 
  <f:param name="ReceiptEmailField" value="Email" /> 
  <f:param name="ReceiptEmailIntro" value="~/Frontend/Composite/Forms/FormSubmitHandler/RegistrationForm/ReceiptEmailIntro.html" /> 
  <f:param name="ReceiptEmailSubject" value="Thank you for registering as Composite.Forms.FormSubmitHandler user!" /> 
</f:function>
  3. Specify its required parameters:
    • Form Id: The ID for the form, which will be used when storing data
    • HTML Form path: The path to a file that contains the HTML form to display on a page. See the sample in Creating the HTML form file below.
    • Response path: The path to the file that contains XHTML-formatted response message to display on a page after the form has been submitted. See the sample in Creating the response message file below.
  4. If necessary, specify its optional parameters:
    • Show Form Post: When 'True', the submitted form's "field name: value" pairs are displayed to the user on a page in addition to the response message ('True' by default).
    • Email From: The sender's email address used when sending an email notification.
    • Email Recipients: The list of the recipients' email addresses used when sending an email notification.
    • Receipt Email Field: When specified, a receipt email is sent. This field from the form post is used to get the user's email address.
    • Receipt Email Intro path: The path to the file containing text to put in top of receipt email. See the sample in Creating the receipt email intro file below.
    • Receipt Email Subject: The subject for the receipt email message.

Creating the HTML form file

The form displayed on a page with FormSubmitHandler must be created and saved as an HTML file withing the C1 website. For illustration purposes, use the sample below:

  1. Create a HTML new file: ~/Frontend/Composite/Forms/FormSubmitHandler/RegistrationForm/HTMLForm.html.
  2. Paste the sample form HTML in the file: 
     
<form action="http://www.composite.net/HTMLForm.html" method="post" name="MyForm"> 
  <h4>Composite.Forms.FormSubmitHandler user registration form</h4> 
  <div> First name: <span class="required">*</span><input type="text" size="20" name="FirstName" class="text" id="FirstName" maxlength="100" maxsize="100" /></div> 
  <div> Last name: <span class="required">*</span><input type="text" size="20" name="LastName" class="text" id="LastName" maxlength="100" maxsize="100" /></div> 
  <div> Email: <span class="required">*</span><input type="text" size="20" name="Email" class="text" id="Email" maxlength="100" maxsize="100" /></div> 
  <div> Country: <span class="required">*</span><select class="other" name="Country" id="Country"><option></option><option>Denmark</option><option>Netherlands</option><option>Other</option></select></div> 
  <div> Comments <textarea cols="30" rows="2" name="Comments" class="text" id="Comments"></textarea></div> 
  <input type="submit" class="btn" value="Submit" /> 
</form>
  3. Save the file.
  4. Specify the above path in the HTML Form path parameter of the Composite.Forms.FormSubmitHandler function.

Creating the response message file

The file must be created that contains a response message displayed to the user after the form has been submitted. For illustration purposes, use the sample below:

  1. Create a new HTML file: ~/Frontend/Composite/Forms/FormSubmitHandler/RegistrationForm/Response.html.
  2. Paste the sample response in the file: 
     
  <h4>Thank you for registering! </h4> 
  <p>You have now been registered as Composite.Forms.FormSubmitHandler user!</p> 
  <p>If you have any questions please send an e-mail by clicking <a href="mailto:support@composite.net?subject=Question%20regarding%20Composite.Forms.FormSubmitHandler">here.</a></p> 
  <p>You have provided the following information:</p> 
  3. Save the file.
  4. Specify the above path in the Response path parameter of the Composite.Forms.FormSubmitHandler function.

Creating the receipt email intro file

When sending email notifications, an introduction text can be optionally supplied for the email message in addition to the input data supplied automatically. For illustration purposes, use the sample below:

  1. Create a new HTML file: ~/Frontend/Composite/Forms/FormSubmitHandler/MyEvent/ReceiptEmailIntro.html.
  2. Paste the sample introduction text in the file: 
     
<p>This text you will see in the email!</p>
  3. Save the file.
  4. Specify the above path in the Receipt Email Intro path parameter of the Composite.Forms.FormSubmitHandler function.

Viewing saved input data

Once the form has been submitted, the input data filled out by the user is saved in an XM file as "field name" = "value" pairs. For the samples presented above, you can find the file here:

~/App_Data/FormSubmitHandler/RegistrationForm/

The following is the sample of the saved input data:

 
<Results> 
  <Result FirstName="John" LastName="Smith" Email="john.smith@someserver.net" Country="Denmark" Comments="A couple of comments" p2:FormId="RegistrationForm" p2:Date="2010-02-26T12:06:53.801293+02:00" xmlns:p2="http://www.composite.net/ns/form/submit/handler/1.0" /> 
  <Result FirstName="Jane" LastName="Doe" Email="jane.doe@someserver.net" Country="Netherlands" Comments="A few comments" p2:FormId="RegistrationForm" p2:Date="2010-02-26T12:10:02.7221653+02:00" xmlns:p2="http://www.composite.net/ns/form/submit/handler/1.0" /> 
</Results>

When accessing these XML files from the System or Layout perspectives, you can view it in Microsoft Office Excel as a table:

  1. In the System or Layout perspective, expand ~/App_Data/FormSubmitHandler/RegistrationForm/
  2. Right-click the XML file in the folder.
  3. In the context menu, click Export to Excel.
  4. When prompted, select Open withMicrosoft Office Excel and click OK.
  5. Click Yes, when informed about a file extension different from the file format.

In general, the path to the XML file with saved input data is built up as:

~\App_Data\FormSubmitHandler\[FormID]\[YYYYMM].xml

where:

  • [FormID] is the From ID specified in the Form Id parameter of the Composite.Forms.FormSubmitHandler function ("RegistrationForm" in the above sample)
  • [YYYYMM] is the current year (4 digits) and month (2 digits) ("201002" in the above sample)

Important Notes

  1. The e-mail functionality of this function will use an SMTP Server on the local host (server) by default. You can cange this behaviour by editing ~/web.config and include the /configuration/system.net/mailSettings section. Read more about configuring the e-mail host in web.config.
  2. To remove unwanted elements from the email, please use the class="hidefromemail" attribute.

Requirements

Composite C1 version 2.0 SP 1 or later

SHARE