Salesforce B2C Commerce 24.7 > Developing Your Site > Development Components

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.
Salesforce Commerce Cloud D2C: Quick Start Guide
Learn how to build, customize, and launch a fully functional D2C store using Salesforce Commerce Cloud. From initial setup to branding, product configuration, and checkout optimization, this course will equip you with the skills to go live fast and scale.
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
The route: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 the server.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 the pdict variable. To clear the form, you must manually call the clear 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 the ViewData object used for rendering the template. The server module in the modules folder includes a forms.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.
Salesforce Javascript Developer I - Certification Tests
Not just another prep course—this is your shortcut to passing. Tackle 80+ handpicked questions, plus a final timed test that mirrors the real exam. Master JavaScript for Salesforce and go from 'hoping to pass' to knowing you will. Ready to start?