Value 🆕

Dynamic value assignment anywhere.

Since 2.1.10 (3 Oct 2024)

The value(expression) allows you to dynamically set values within your form, making it easy to mirror or calculate values in real-time and pass into form data. This is especially useful for hidden fields, quiz scoring, dynamic data submission, or any context where data needs to be stored or modified without direct user input and sent through email.

Setup

Attribute: sf-react = value(expression) (see What is an expression?)

Where: any HTML element with value attribute. The value attribute can be used with the following elements: <input>, <data>, <button>, <meter>, <li>, <option>, <progress>, and <param>, <output>

Description: dynamic addition of value on an element based on the evaluation of a specified expression.

Key Usage Scenarios:

• Hidden Inputs: Set hidden input values dynamically based on user actions for later submission.

• Quizzes and Score Tracking: Update quiz scores or similar dynamic values on the fly as users interact.

• Dynamic Mirroring: Reflect data from one field into another, such as calculating and showing total scores or combining form entries.

---

Example

Hidden Input for Dynamic Score Tracking

We’re setting a hidden input’s value based on quiz answers so they can be pass into email data.

<!-- Form Container -->
<div sf="quizForm" sf-score="totalScore">
    <!-- Step -->
        <!-- Question with Score Calculation -->
        <input type="checkbox" sf-score-calc="add(checked, quizScore, 1)">
        <label>Question 1</label>

        <!-- Hidden input for total score -->
        <input type="hidden" name="totalScore" sf-react="value($v.quizScore)">
</div>

Here, the hidden input's value will reflect the total quizScore as users check/uncheck items, making it ready to submit with the form.