Wix Forms: Designing Your Site Forms
Design your form to add a splash of individuality to your visitors' experience. Customize the background color, change button text or adjust shadows and borders to bring the form to life.
How do I know if I'm using old Wix Forms or new Wix Forms?
This article will help you understand the differences between old and new Wix Forms.
Designing your site forms on desktop
Design the way your form looks on desktop with advanced styling options at your fingertips.
To design your site forms on desktop:
New Forms
Click the relevant form on your page.
Click Settings.
Click the Design tab.
Customize the form design using the available options:
Form Background: Choose the form background color, as well as the border color and width.
Form Fields: Select a form field style and customize the color, opacity, font, etc.
Tip: You can design how fields appear in different states: Regular, Hover, and Error.
Header and Paragraph: Choose a font and color for the form text.
Buttons: Design the form buttons including how they appear on hover (e.g. submit button, back button, etc.)
Note:
The color of drop-down menus and calendar drop-down fields matches the field color set in your form’s design settings. The opacity for these drop-downs is always 100% and cannot be changed.
Old Forms
Click the relevant form on your page.
Choose which part you want to design:
The entire form
Click the Design icon
.
Click Customize Design.
Tip: You can also select a different look for your form at this point.
Choose what part of the form you want to design:
Input fields: Update the design of all the form fields.
Note: This option changes every form field. Click an individual field to design only that field.
Submit button: Customize the button visitors click to submit the form.
Form background: Change the background of the form (space around the form fields).
Use the available design options:
Fill Color & Opacity: Customize the background color of the element. Click the color box to select the background color and drag the slider to increase or decrease the opacity.
Border: Add and customize the border of the element. Adjust the border style, color and opacity.
Corners: Curve the corners of the element. Enter a value in any of the corners to change the others, or click the Lock
icon to adjust each corner individually.
Shadow: Add a shadow to the element.
Text: Change the font, size and color of text on your input fields and the submit button.
Tip: You can design the input fields and submit button for different states (e.g. Regular, Hover). The available design options depend on the state you choose.
An individual form field
Select the field you want to design.
Click Customize Design.
Tip: You can also select a different look for your field at this point.
Use the available design options:
Fill Color & Opacity: Customize the background color of the field. Click the color box to select the background color and drag the slider to increase or decrease the opacity.
Border: Add and customize the border of the field. Adjust the border style, color and opacity.
Corners: Curve the corners of the element. Enter a value in any of the corners to change the others, or click the Lock
icon to adjust each corner individually.
Shadow: Add a shadow to the field.
Text: Change the text color, font and size of the field.
Note:
When customizing your form, some elements such as the rating field, upload button, checkboxes and radio buttons may not be affected by the changes.
Designing your site forms on mobile
Design your forms for mobile screens to make sure they look great and work perfectly.
To design your site forms on mobile:
New Forms
Go to the mobile editor (Wix Editor) or the mobile breakpoint (Studio Editor).
Click the relevant form.
Click Settings.
Click Design.
Customize the form design using the available options:
Form Background: Choose the form background color, as well as the border color and width.
Form Fields: Select a form field style and customize the opacity, font, font size, etc.
Tip: You can design how fields appear in different states: Regular, Hover, and Error.
Header and Paragraph: Choose a font and color for the form text.
Buttons: Design the form buttons including how they appear on hover (e.g. submit button, back button, etc.)
Tip:
You can edit field position for mobile devices using the form builder.
Old Forms
Go to the mobile editor.
Click the relevant form.
Click the field you would like to design.
Click the Settings
icon to adjust the form's mobile text settings.
(Optional) Click the Layout icon
to choose the form's padding and spacing and formatting.
(Optional) Click Animations and Effects to add an animation to your form.
What's next?
Choose who gets notified after a visitor fills out a form. Set form submissions to go directly to your email inbox and more.
FAQs
Click a question below to learn more.
What can I customize in the thank you message?
In new Wix Forms, the Thank you message style and color setting lets you customize the message shown after a visitor submits your form. Change the text theme, font style and font size.
Can I change the color of input and option text?
Yes. In new Wix Forms, you can change the color of input text (text a visitor types) and option text, such as checkbox labels and multi-choice options.
Click the relevant form on your page.
Click Settings.
Click Design.
Click Form Fields.
Scroll to Input text color and choose the color for text visitors type into fields.
Scroll to Option text color and choose the color for answers visitors select.
Can I design form fields for different states?
Yes. In new Wix forms, you can customize how fields appear in different states, such as Regular, Hover, and Error.
Can I split my form into sections?
Yes. You can create a multi-step form in both versions of Wix Forms to break your form into manageable sections for your visitors.