Forms
You can create HTML forms in B2C Commerce using templates and controllers. Using form definitions, you can also persist form data during a session and store it in system objects or custom objects.
- Creating a Form
You can create a standard HTML form that uses AJAX for validation and error rendering. If you're creating a simple form that doesn't store data, is easily localized, and only requires client-side validation, this type of form is appropriate. You can also create a complex form that stores data, requires server-side validation, and has sophisticated localization requirements. Sophisticated localization can include adding, removing, or rearranging fields in the form or changing the data object you have to store with form data. - Localizing a Form
You can change the structure of a form depending on the locale. For example, you can include different address fields, such as state or province, depending on the country. To localize the form structure, you can create different form definitions for each locale. These form definitions have the same name, but a different structure or different fields for different locales. - Validating Form Data
Server-side validation on form data is configured in the form definition. SFRA uses jQuery AJAX methods to render a page after server-side validation. - Saving Form Data
Theroute:BeforeComplete
event is used to store form data. Different APIs are used to save data, depending on the type of form. - Clearing or Refreshing a Form
In SFRA, you use theserver.getForms
function to get the form data structure from the relevant form definition and convert it into a JSON object. The object is then added to the data passed to the template, so that it's available to the template via thepdict
variable. To clear the form, you must manually call theclear
method. - Prepopulating Form Data
You can prepopulate forms with information from system objects, custom objects, and form data. - Converting Form Data to JSON Objects
You can prepopulate forms with information from system objects, custom objects, and in-memory form data. This data is available directly from the model you're working with or from theViewData
object used for rendering the template. Theserver
module in themodules
folder includes aforms.js
module that converts form data into JSON objects. For more information, see the following functions in the server-side JSDoc. - Securing Forms
Use the new CSRF (Cross-Site Request Forgery) framework to add fields that are protected from request forgery.
Infocenter Retirement: On June 30, 2023, the Infocenter was retired, and documentation currently hosted on the Infocenter will be published to Salesforce Help, Commerce Cloud Developer Center, and Salesforce B2C Commerce Developer Documentation Resources. For more information, see the release note.