Beginner
How to add contact forms and buttons on Wix
Quick Answer
Adding contact forms and buttons on Wix is simple through the Add Elements panel. You can drag and drop pre-designed forms and customize them, or create custom buttons that link to contact pages or trigger actions.
Prerequisites
- Active Wix account
- Published or draft Wix website
- Basic understanding of Wix Editor
- Access to your website's backend
1
Access the Wix Editor
Log into your Wix account and navigate to My Sites. Click Edit Site on the website where you want to add contact forms and buttons. Wait for the Wix Editor to fully load.
Tip
Make sure you're working on the correct page where you want the contact elements to appear
2
Open the Add Elements Panel
Click the Add Elements button (+ icon) on the left sidebar of the editor. This will open the elements library where you can find various website components including forms and buttons.
3
Add a Contact Form
In the Add Elements panel, click on Contact & Forms. Browse through the available contact form designs and click on your preferred option. Drag and drop the form onto your page where you want it to appear. The form will be automatically added with default fields.
Tip
Choose a form design that matches your website's overall aesthetic
4
Customize the Contact Form
Click on the newly added form to select it. Use the Settings panel that appears to customize form fields, labels, and validation rules. You can add, remove, or modify fields like name, email, phone, and message. Configure the Form Submissions settings to specify where form responses should be sent.
Tip
Always test your form by filling it out and submitting to ensure emails are being received
5
Add Contact Buttons
Go back to Add Elements and click on Button. Select a button style that complements your design. Drag the button to your desired location on the page. Click the button to edit its text, such as changing it to
Contact Us or Get In Touch.Tip
Use action-oriented text on buttons to encourage clicks
6
Configure Button Actions
With the button selected, click the Link icon or What does this button do? option. Choose from actions like Page (to link to a contact page), Email (to open email client), Phone (to initiate calls), or External URL. Configure the specific action based on your needs.
7
Style and Position Elements
Use the design tools to customize colors, fonts, and sizes of your contact forms and buttons. Ensure they're positioned strategically on your page for maximum visibility. You can use the Arrange options to layer elements and the alignment tools to position them precisely.
Tip
Place contact elements above the fold or in prominent locations like headers and footers
8
Preview and Publish
Click Preview to see how your contact forms and buttons look on desktop and mobile devices. Test the functionality by filling out forms and clicking buttons. Once satisfied, click Publish to make your changes live on your website.
Tip
Always check mobile responsiveness as many visitors will access your contact forms on mobile devices
Troubleshooting
Contact form submissions not being received
Check your Form Settings and verify the email address in Site Settings > Business Info. Also check your spam folder and ensure email notifications are enabled.
Button links not working properly
Recheck the button's link settings by clicking the button and selecting Link Settings. Ensure you've selected the correct action type and entered valid URLs or email addresses.
Forms or buttons not displaying correctly on mobile
Switch to Mobile Editor view and adjust the positioning and sizing of elements. Use the Mobile Actions menu to hide or show elements specifically for mobile devices.
Contact form fields not validating input correctly
Click on individual form fields and check their Validation Settings. Ensure required fields are marked as mandatory and email fields have proper email validation enabled.
Ready to get started with Wix?
Put this tutorial into practice. Visit Wix and follow the steps above.
Visit Wix →