SSJS: Generate a Dynamic Form Based on a Data Extension

In this SSJS example, we will create a dynamic form based on a Data Extension. This post is not meant as a replacement for Smart Capture, but rather an alternative solution for more customized use cases. Through this post, you will gain a better understanding of:

• How to differentiate between POST and GET requests in CloudPages
• How to handle form data in SSJS
• How to dynamically create a form based on an existing Data Extension
• How to use SSJS and AMPScript together in a CloudPage

Data Extension used in this example

Resulting Form with the Data Extension Fields

Where This Could Be Useful

Salesforce Marketing Cloud's Contact Builder allows you to manually add data to a Data Extension, and Smart Capture provides an easy way to generate dynamic forms that save data directly to a Data Extension. However, this example offers an alternative approach that could be useful in scenarios where:

• You need more control over how form fields are generated and displayed.
• You want to implement conditional logic or custom validation that Smart Capture might not fully support.
• You aim to integrate with additional backend services or perform other tasks before saving data to a Data Extension.

By following this tutorial, you'll learn how to leverage SSJS and AMPScript together for more flexible form handling in CloudPages, providing you with a deeper level of customization and control.

How The Page Works

This solution is built within a single CloudPage that:

• Accepts a Data Extension External Key via the URL: The page captures the external key of the Data Extension from the URL parameter (de). This key is used to retrieve the fields of the specific Data Extension.
• Dynamically Renders a Form: Based on the retrieved Data Extension fields, the form is dynamically generated. Each form input corresponds to a field in the Data Extension and is rendered according to its field type (e.g., text, number, checkbox, etc.).
• Handles Form Submission and Saves Data: Upon submission, the form data is processed and saved into the corresponding Data Extension. The server-side script handles the form's POST request, ensuring data is stored accurately.
• Provides Basic Error Handling: The script includes error handling for situations like missing Data Extension keys or failed data submissions, displaying relevant messages to the user when issues arise.

The Code

Differentiating between GET and POST requests

In this solution, one of the first tasks is to determine whether the request is a GET or a POST. This allows us to either display the form or handle the form submission.

GET Request:

When the page is loaded via a GET request (usually when the user first lands on the page), the primary goal is to:

1. Retrieve the Data Extension Key from the URL.
2. Generate the Form based on the Data Extension fields.

Here's the basic structure for handling the GET request:

POST Request:

When the user submits the form, a POST request is triggered. In this step, we:

1. Capture the Form Data submitted by the user.
2. Save the Data into the Data Extension.
3. Handle Success or Error by displaying a message to the user.

Here's how the POST request is handled:

The GenerateForm() Function

The generateForm() function is the core of this solution. It dynamically builds the form by looping through the fields of the Data Extension, generating the appropriate HTML input elements based on the field type. This eliminates the need to manually code forms for every Data Extension, making the form creation process highly flexible and efficient.

How it works

1. Retrieve the Fields: The function takes an array of fields from the Data Extension and loops through them. Each field has a type (e.g., text, number, date), and this type determines what kind of input element will be generated.
2. Create the Appropriate Input Element: Based on the field type, generateForm() creates the corresponding form element using simple HTML tags (<input>, <checkbox>, etc.). For example, text fields will generate a text input, while boolean fields generate a checkbox.
3. Apply HTML Structure and Styling: In this example, basic HTML structure is used to wrap labels and input elements together. Styling can be handled separately (using Tailwind CSS, for instance), but the function focuses on ensuring that the form fields are mapped correctly to the Data Extension's field types.

Here's a breakdown of the code:

Key Parts of the Function:

• Field Type Handling: Each field type (text, number, date, etc.) is handled separately to ensure the correct HTML input type is generated. This ensures that the form is appropriately structured for the data types in your Data Extension.
• Label and Input Pairing: For every field, a corresponding label is created, followed by the input element. This ensures a user-friendly form where each input field is properly labeled.
• Dynamic Form Generation: The function returns the entire form as a string, allowing it to be injected directly into the page. This keeps the process highly dynamic, adjusting to the structure of whatever Data Extension you are working with.

Putting it All Together

Now that we've walked through the core components—differentiating between GET and POST requests and dynamically generating form fields with the generateForm() function—let's see how it all works as a complete solution.

How It Flows

1. Accept the Data Extension Key: The page first looks for the Data Extension key in the URL parameter (de). If it's missing, an error message is shown. Otherwise, we use this key to fetch the Data Extension fields.
2. Render the Form Dynamically: Using the generateForm() function, the form is dynamically built based on the fields retrieved from the Data Extension. Each field type (e.g., text, number, date, checkbox) is mapped to the appropriate input element.
3. Handle Form Submission: When the form is submitted, the data is captured via a POST request. The values entered by the user are processed and added to the Data Extension, while providing feedback on the success or failure of the data submission.
4. Display Messages and Handle Errors: Throughout the process, error handling ensures that the user is informed if something goes wrong (e.g., missing Data Extension key, invalid fields). Success or error messages are dynamically displayed based on the result of the form submission.

Complete Code Example

Here's the complete CloudPages code:

To use the form, paste the code into a CloudPage and publish it. Then, pass the de parameter in the URL, setting it to the External Key of the Data Extension you want to generate the form for.

Example: https://your-cloud-page-url.com?de=MyDataExtension

Conclusion

In this advanced example, we explored how to dynamically generate forms in Salesforce Marketing Cloud using SSJS, based on Data Extension fields. This approach offers flexibility and control, making it a great alternative to Smart Capture for custom form handling. By combining GET and POST request handling with dynamic form generation, you can easily adapt this solution to fit various use cases in SFMC, streamlining data collection and management.