Form Center | External Integration Forms

This article describes setting up a simple external integration form to ask users for their addresses and return their trash collection day information. First, we will ensure that the external integration features are enabled. Next, we will create a simple form to collect the user’s address and send this information to an external web service.

Enable the External Integration Feature

1. Sign in to your website solution
2. Navigate to the Form Center module:
   
   1. Expand the Modules menu
   2. Select the Content tab
   3. Click Form Center
      
      Note: You can also navigate to your Form Center using the URL, www.yourwebsite.com/Admin/FormCenter.
3. Click the Properties tab:
4. Locate the External Integration option:
5. Check the box to enable External Integrations:
6. Click the Save Changes button:

Go to Article Navigation

Create an External Integration Form

For this example, we will add a short answer field where the user can input their email address, and address details, in addition to short answer fields that will display the water bill due date and amount owed.

1. Sign in to your website solution
2. Make sure the External Integration feature is enabled
3. Create a new form in the Form Center
   1. Add input fields to the form
      1. Create a short answer field for the user's email address:
         
         1. Add the External Name for the field:
         2. Click the field's Save Changes button:
      2. Create short answer fields to display the user's water bill details:
         
         1. Click the field's Save Changes button:
4. Select a save option:
   
   • Save: Saves any changes made to the form
   • Save and Publish: Saves the changes made to the form and publishes the form for use

External Names

The external name is the identifier for the field that Form Center will send to the external server. A field’s external name must match whatever name the external web service is expecting.

For this example, we assume that the external service will use the following code to retrieve the address the user entered when submitted as HTML:

string address = Request.Form["EmailAddress"]

Because the external server expects the field name to be EmailAddress, we enter this value in the External Name field for the address short answer. There is no hard requirement that you change this value, Form Center will auto-generate an external name for each field. The auto-generated external names will be something like e_1, e_2, e_3. The external integration command will work as long as the external server or web page is programmed to expect these field names. However, we recommend that you put a meaningful value into the external name field, such as Address1, City, State, Zip, Name, and so on.

Go to Article Navigation

Add an External Integration Command Button to a Form

This section will show you how to add an External Integration Command button to a Form in the Form Center.

The external integration command button creates a button on the form, which, when clicked, will send all information the user has filled out on the form to the external server, and populate empty fields with the values received from the external server.

1. Sign in to your website solution
2. Navigate to the Form Center module:
   
   1. Expand the Modules menu
   2. Select the Content tab
   3. Click Form Center
      
      Note: You can also navigate to your Form Center using the URL, www.yourwebsite.com/Admin/FormCenter.
3. Select the category your form is in:
   
   • If needed, create an external integration form
4. Locate your external integration form:
5. Click the Actions button next to the form's name:
6. Select Modify:
7. Navigate to the form's canvas:
8. Click and drag the External Integration field type onto the canvas:
9. Fill in the button's information fields:
   
   • Label: The field's name
   • Instructions: A brief description of how to answer the field
   • Width: How wide the field appears on the form
     • 1/4: The field is one-fourth as wide as the form
     • 1/3: The field is one-third as wide as the form
     • 1/2: The field is half as wide as the form
     • 2/3: The field is two-thirds as wide as the form
     • 3/4: The field is three-fourths as wide as the form
     • Whole: The field is as wide as the form
   • Type: This field is automatically set to External Integration
   • Service URL: A service URL property contains the configuration for the external server. The service URL property contains 2 parts, each enclosed in braces "{ }"
     • Part 1: Contains the protocol to use when communicating with the server, such as HTTP or HTTPS
     • Part 2: Contains the web addresses of the web service or web page to use when connecting to the external service
       • An example of a Service URL would be {HTTP}{http://externalintegrationservice.azurewebsites.net/api/Water/Bill}
         • In this example, the protocol being used is HTTP. This protocol instructs the Form Center to send the information as a standard HTTP POST request and expects an HTML document in response
           
           Note: Please review the Service URL configuration and Data Exchange Format article for more information about Service URL configurations.
   • Button Text: The text that displays on the button
10. Click the field's Save Changes button:
11. Select a save option:
    
    • Save: Saves any changes made to the form
    • Save and Publish: Saves any changes made to the form and makes the form available for use
      
      Note: Often, for external integration forms, the external integration command button takes the place of the typical "Submit" button (although this does not have to be the case).

Go to Article Navigation

In-Article Glossary

Review the Municipal Websites Central's Glossary of Terms for a comprehensive explanation of the acronyms, abbreviations, and product-specific terminology. The terms located in this section are listed alphabetically:

• HTML: Hypertext Markup Language
• HTTP: Hypertext Transfer Protocol
• HTTPs: Hypertext Transfer Protocol Secure
• URL: Uniform Resource Locator

Go to Article Navigation