# Send a form

Next step is to learn how you can modify the data in the Form and push it back to the data source.&#x20;

## **To send a form:**

1. Select your **Form** and navigate to the **Triggers** section.
2. Select **On Submit** in the first dropdown menu, and next click **Create action** in the **Select action** menu.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FiKTNjKWDkcYNSckI7Qgq%2FCleanShot%202025-03-18%20at%2012.49.53%402x-min.png?alt=media&#x26;token=ebe04cd8-4e9d-4aac-98bb-6769ed695dbb" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The new action you create will be bound to the **On Submit** trigger of the form thus enabling sending data to the data source.
{% endhint %}

3. For the new action, select your data source and the appropriate step, for example, **Update row.**
4. Choose the table, if needed, and specify the field and values that you want to update.

{% hint style="info" %}
You can also use the HTTP with **POST** request step to send data to the API.
{% endhint %}

5. If you're not using an HTTP request, you need to configure the following:

* In the **Filters** section, configure the **identifier** that will be used for record matching. You can refer to it as:

<pre><code><strong>{{ui.formName.value.fieldName}}
</strong></code></pre>

`formName` is the name of your Form component, `fieldName` is the name of the field.

* In the **Configure Row** section, add `{{ui.formName.value.fieldName}}` to the value of the field you want to update.

<div data-full-width="false"><figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FxBp8I3AV7EjQAgIplJxG%2FCleanShot%202024-12-02%20at%2015.27.29%402x-min.png?alt=media&#x26;token=d6f5e15b-94a2-4d8c-bbfd-c0fa17c3e123" alt=""><figcaption></figcaption></figure></div>

To save time configuring each field separately, you can switch to JS mode in the **Configure Row** section and send the form value object as:

```
{{ui.formName.value}}
```

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FaCCVqoVntY8u6ZgySvTs%2FCleanShot%202025-03-18%20at%2012.53.35%402x-min%20(1).png?alt=media&#x26;token=52014a7e-c0de-42ac-a002-5b52b7fffd7c" alt=""><figcaption></figcaption></figure>

6. Now, click on the **plus sign** under the *update* action step and select **Execute Action** from the list. This will trigger another action after the first one (update action) is completed.
7. In the **Action to execute** dropdown, select the action that loads your data.&#x20;

{% hint style="info" %}
The **update** action updates data in the data source, so to make sure the table displays actual information you need to add another action step to reload its values.
{% endhint %}

8. Modify any values in the form and click **Submit**.\
   If everything is configured correctly, it will change the form value, and the table will be updated with new values as well.

{% embed url="<https://demo.arcade.software/1BtG9S9QPfglFsq84WLz?embed=&embed_desktop=inline&embed_mobile=tab&show_copy_link=true>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.uibakery.io/build-from-scratch/getting-started/send-a-form.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
