Accessibility: Creating an Accessible Wix Form | Help Center

Learn how to use Wix to build your site and business.

Design and manage your site using intuitive Wix features.

Manage subscriptions, plans and invoices.

Run your business and connect with members.

Learn to purchase, connect or transfer a domain to your site.

Get tools to grow your business and web presence.

Boost your visibility with SEO and marketing tools.

Get advanced features to help you work more efficiently.

Find solutions, learn about known issues or contact us.

Improve your skills with our courses and tutorials.

Get tips for web design, marketing and more.

Learn to increase organic site traffic from search engines.

Build a custom site using our full-stack platform.

Get matched with a specialist to help you reach your goals.

Home

Creating your site

Creating an accessible site

Making your site accessible

Accessibility: Creating an Accessible Wix Form

3 min

In this article

Step 1 | Display field titles
Step 2 | Define your field titles
Step 3 | Customize the form's design
Step 4 | Enable visual indicators on your site

Forms allow site visitors to submit information, join a mailing list, and more. When creating a form, it's important to keep accessibility in mind to ensure that everyone can view and use it.

Follow the steps in this article to build a form that visitors can navigate and interact with, and get the most out of your site.

Step 1 | Display field titles

Display field titles to allow visitors to identify each form field. Displaying titles provides clarity, and indicates to visitors the field they are currently in.

To display field titles:

Select the form in your editor.
Click Edit Form.
Select a form field.
Click Settings.
Hover over the field title and click the More actions icon .
Click Show field title.

The forms center. A field has been selected, and the cursor is clicking 'Show field title'.

Step 2 | Define your field titles

After you've enabled field titles, make sure you clearly define them. The title should be specific to ensure visitors know what exactly is required (last name, phone number, etc.).

To define the field titles:

Select the form in your editor.
Click Edit Form.
Select a form field.
Click Settings.
Enter the text under Field title.
Click Save.

The forms center. A field has been selected, and the cursor is clicking the title field.

Step 3 | Customize the form's design

Adjusting the form's fields and buttons by state (Regular, Hover, and Error) can create a logical visual experience. We recommend customizing the design for the Hover state, for example - so visitors know which part of the form they're interacting with.

Good to know:

The Hover state is how the form field / button looks when a visitor hovers over it. The Regular state is how it's displayed before a visitor interacts with it.

To customize the form's design:

Select the form in your editor.
Click Settings.
Select Design.
Choose which part of the form you want to customize:
- Fields:
  1. Select Form Fields.
  2. Select Hover from the drop-down menu.
  3. Change the field design:
    - Fill color & opacity: Set the color of the field background and drag the slider to change the opacity.
    - Border color & opacity: Set the color and opacity of the field border.
- Buttons:
  1. Select Buttons.
  2. Select the button you want to customize (Submit, Back, Upload, etc.).
  3. Click the Hover tab.
  4. Change the button's design:
    - Text color: Set the color of the button text in the hover state.
    - Color & opacity: Set the color of the button background and drag the slider to change the opacity.
    - Border color & opacity: Set the color and opacity of the button's border.

The form field design panel is open. The hover state has been selected, and the cursor is clicking the color box.

Tips:

You should also customize the form fields in the Error state to ensure improved accessibility.
Learn more about colors and contrast in site accessibility

Step 4 | Enable visual indicators on your site

Visual indicators can help those with different vision / mobility needs navigate your site. When you enable them, visitors using the Tab key can see a blue box around the section or element they are on. Learn more about visual indicators

Visual indicators are automatically enabled on sites built in the Studio Editor.