Tutorial | Customize a Wix Form

When you use the Wix Forms app 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
2. Display a personalized thank you message

Step 1: Add and set up a Wix Form

1. Add and set up a Wix Form 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 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.

3. Extract specific field values from the form data.

4. Display the personalized thank you message:

Full code