> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Tutorial | Customize a Wix Form

## Article: Tutorial | Customize a Wix Form

## Article Link: https://dev.wix.com/docs/develop-websites-sdk/get-started/tutorials/user-interface/tutorial-customize-a-wix-form.md

## Article Content:

# Tutorial | Customize a Wix Form

When you use the [Wix Forms app](https://support.wix.com/en/article/about-wix-forms) to create a form on your site, it comes with built-in functionalities. However, you might still want to customize the form further.

In this tutorial, you'll learn how to customize a Wix Form using the JavaScript SDK. You'll display a custom thank you message using user input from the form submission.

You'll complete the following steps to customize your form:

1. [Set up a Wix Form on your site](#step-1-add-and-set-up-a-wix-form)
2. [Display a personalized thank you message](#step-2-display-a-personalized-thank-you-message)

## Step 1: Add and set up a Wix Form

1. [Add and set up a Wix Form](https://support.wix.com/en/article/adding-and-setting-up-a-form-on-your-site) on your site in the Wix Editor.

2. Configure your form with the following fields:

   - **First Name** (text input)
   - **Last Name** (text input)
   - **Donation Amount** (number input)

3. Change the form's default ID to `myForm`. You'll use this ID to reference the form in your code in the next step.

## Step 2: Display a personalized thank you message

In this step, you'll add code to display a custom thank you message when a form is submitted. It'll include personalized information from the form elements.

1. Add an empty [text element](https://support.wix.com/en/article/studio-editor-adding-and-customizing-text) with the ID `thankYouText` to your site to display the thank you message.

2. Set up the form submit success handler and get form field values.

```javascript
$w("#myForm").onSubmitSuccess(() => {
  const formData = $w("#myForm").getFieldValues();
  // Code in next step goes here...
});
```

3. Extract specific field values from the form data.

```javascript
// ...Code from previous step
const firstName = formData.first_name;
const lastName = formData.last_name;
const donation = formData.donation;
// Code in next step goes here...
```

4. Display the personalized thank you message:

```javascript
// ...Code from previous step
$w(
  "#thankYouText"
).text = `Thank you ${firstName} ${lastName}, for your generous donation of $${donation}!`;
```

## Full code

```javascript
$w("#myForm").onSubmitSuccess(() => {
  const formData = $w("#myForm").getFieldValues();

  const firstName = formData.first_name;
  const lastName = formData.last_name;
  const donation = formData.donation;

  $w(
    "#thankYouText"
  ).text = `Thank you ${firstName} ${lastName}, for your generous donation of $${donation}!`;
});
```