Use editable form fields in code-based experiences

Last update: July 7, 2025

CREATED FOR:

  • Experienced
  • User

For both more flexibility and control over the code-based experiences, Journey Optimizer allows your development team to create JSON or HTML content templates containing specific predefined editable fields.

When creating a code-based experience, non-technical marketers can then directly edit these fields in the interface, without the need to even open the personalization editor, or to touch any other code elements in their journey or campaign.

This capability provides a simplified experience for marketing users while allowing developers more control over the code content, resulting in less room for errors.

Understand the form field syntax

To make portions of an HTML or an JSON code payload editable, you must use a specific syntax in the expression editor. This involves declaring a variable with a default value that users can override after applying the content template to their code-based experience.

For example, suppose you want to create a content template to apply it to your code-based experiences, and allow users to customize a specific color used in different locations, such as frames or buttons’ background colors.

When creating your content template, you need to declare a variable with a unique ID, for example “color”, and call it at the desired locations in the content where you want to apply this color.

When applying the content template to their content, users will be able to customize the color used wherever the variable is referenced.

Add editable fields to HTML or JSON content templates

To make some of your JSON or HTML code editable, start by creating a code-based experience content template where you can define specific form fields.

NOTE
This step is usually performed by a developer persona.

➡️ Learn how to add editable fields to code-based experience templates in this video

  1. Create a content template and select the Code-based experience channel. Learn how to create templates

  2. Select the authoring mode: HTML or JSON.

    CAUTION
    Changing the authoring mode will result in losing all of your current code. The code-based experiences based on this template need to use the same authoring mode.

  3. Open the personalization editor to edit your code content.

  4. To define an editable form field, navigate to the Helper functions menu in the left navigation pane and add the inline attribute. The syntax to declare and call the variable is automatically added in your content.

  5. Replace "name" with a unique ID to identify the editable field. For example, enter “imgURL”.

    NOTE
    The field ID must be unique and cannot contain spaces. This ID should be used everywhere in your content where you want to display the variable’s value.

  6. Adapt the syntax to suit your needs by adding parameters detailed in the table below:

    Action
    Parameter
    Example
    Declare an editable field with a default value. When adding the template to your content, this default value will be used if you don’t customize it.
    Add the default value between the inline tags.
    {{#inline "editableFieldID"}}default_value{{/inline}}
    Define a label for the editable field. This label will display in the code editor when editing the template’s fields.
    name="title"
    {{#inline "editableFieldID" name="title"}}default_value{{/inline}}

  7. Click Preview form fields to check how the editable form fields will display in the code-based experiences applying this template.

  8. Use the {{{name}}} syntax in your code at every place where you want to display the value of the editable field. Replace name with the unique ID of the field defined earlier.

  9. Proceed similarly to add other editable fields, wrapping each of them with the {{#inline}} and {{/inline}} tags.

  10. Edit the rest of your code as needed, including the IDs corresponding to the editable fields you defined. Learn how

  11. Save your template.

Use decision policies in editable field forms

When creating a code-based experience content template, you can use a decision policy to leverage offers in your editable form fields.

  1. Create a code-based experience template as described above.

  2. Click Add decision policy either using the Show Decisioning icon from the right rail of the edition screen, or in the expression editor from the Decision policy section on the left menu.

    Learn how to create a decision policy in this section.

  3. Click the Insert policy button. The code corresponding to the decision policy is added.

  4. After the {{#each}} tag, insert the code corresponding to the editable form field(s) that you want to add, using the inline syntax described above. Replace "name" with a unique ID to identify your editable field. In this example, use “title”.

  5. Click Preview form fields to check how the editable form fields will display in the code-based experiences applying this template.

  6. Insert the rest of your code above the {{/each}} tag. Use the {{{name}}} syntax in your code at every place where you want to display the value of your editable field. In this example, replace name with “title”.

  7. Save your template.