How to Build a Custom Contact Form on your Wix Website

By:
Heloise Montini

Wix is one of the main platforms for you to build a website for your business. You can count on beautiful and responsive templates, and give it your own touch using apps and plugins. Build pages, albums, portfolio, and even start your own e-commerce, creating a beautiful and useful product page. 

But there’s an essential page any business must have. You’re going to need a contact form. Although Wix offers a contact page with a simple form, you can build up your own form, leaving your website more customized. This is also a great way to set brand awareness. 

Contact forms are of extreme importance to any business. They’re the bridge for communication and it automatically connects customers, leads, and prospects to your business.

Learn how to build the perfect contact form for your Wix page, customizing it, giving it the business identity. And also count on three contact form templates to use as inspiration or to customize them. 

Why use a Contact Form on your Wix Website

A contact form is a must-have on any business website. Is through your contact form that prospects and customers will reach you out, making questions about your business, or giving their feedback and opinion. Contact forms are a gateway to start a conversation and build the perception of an open business, that allows participation and interaction from any person interested in sending you a message.

Here are the five top reasons for you to add a contact form to your Wix based business website:


Get more leads

The contact form can also work to get you more leads, just as a lead generation form. If a person is filling out your contact form, it is a good sign of their interest in your business. So, this is a great moment to add an opt-in asking if the visitor wants to know more from the business and allowing you to add their email address to the mailing list. Besides, these are quality leads, with huge chances for conversion.


Make it easier for the lead to reach you 

Users have questions, opinions, or natural interest in contacting your business. It is part of your job to establish an easy path for them. And that’s the contact form reason for existing. Giving a free pass to the visitor to start a conversation with the business is also a great sign to show your customer experience, showing how great your business is.


Automate tasks

Leaving the contact form on autopilot helps you with your tasks and also to develop more significant and urgent tasks on your to-do list. With an automated contact form, you have the possibility to receive emails 24/7 and all of them can receive back an automatic, with a very human tone preferably, message as a response.


Understand your audience

With Form Analytics and Abandoned Form Recovery features, you can get to know your audience as they fill out the form. And this knowledge gives you the power to adapt your form and improve it, receiving more submissions, growing your mailing list, and, eventually, your revenue.


Avoid Spams

Not only avoiding spam messages but also keeping your website safe, is one of the benefits of having a contact form instead of just providing an email address. All because of robots on the internet sending unwanted emails. But on a contact form, you can add a ReCaptcha check-box and avoid spammers, leaving your email box clean, and increasing your chances of only getting relevant messages.


How to create a contact form for Wix: a Step-By-Step


Wix allows you to embed an HTML code to the page you’re creating. And it is not hard to do so. Just remember that the first step is that you must create your contact form with the MightyForms app, and then copy and paste the code into Wix. But no worries, we are going to explain step by step what you must do so you can have a fully customized, beautiful, and responsive contact form on your Wix page.

How to choose a type of contact form for your Wix page

Contact forms are, by principle, a simpler type of form. With only essential fields, not asking for too much data, and made specifically to start a conversation, allowing the lead to create a relationship with the business.

But, there are numerous examples of how a contact page can be built, and how you can create an impressive and highly converting contact form.

Amaze the lead and make it easy for them to reach out to your company. Your form must be clear, quick to fill out, intuitive, responsive, with a proper number of fields. When choosing your Wix contact form make sure it follows such specifications and also gives you the possibility to customize it with the business’s identity.

Prefer a clean form, with short and essential information and elements, just enough to offer all the ways to reach your company, like a phone number and a map with the address, and also fields where leads can leave their name, email address, and their message. It’s also interesting if you allow the lead to send you files along with the form. It enables those that want to send you more detailed messages.

Your form can yet be one-page or multi-step, depending on its length and objective.

Creating your form


The first step is to sign in to your MightyForms account. If you don’t have one yet, don’t lose your head. It is easy, quick, and free to sign up to MightyForms.

Now that you’re logged on to your MightyForms dashboard, it is time to pull up your sleeves and start working. Building a form, as you’re going to see, is easy-peasy when you’re using MightyForms. 

You can start by using a template from our template set, or start building from scratch. In both cases you can customize, adding the business characteristics, like the color scheme and the logo.


Customizing your form

All the fields you need can be added by clicking on the plus sign next to the field name or by dragging-and-dropping the field on the builder. Your forms need some must-have customization. Add your company’s logo, choose the colors, change the font.

create a contact form online

Make sure each field is important for your goal with the contact form, and that all of them are relevant, otherwise you can end up losing leads for asking too much. A study revealed that 37% of the respondent will drop off the form if it asks for the phone number, as an example, unless it is an optional field.

You can make each field have the appearance you need for it, adjusting its size and position, and making sure only essential fields are tagged as Required. 

Select the typography, the colors, and the shape of field boxes.

Customize your contact form so it is a perfect match for your business characteristics and can fulfill your goal to have more submissions.


Use features and integration to automate your form 

Boost your forms, and create beautiful, responsive, and automated forms that streamline your workflow, cutting off tasks, and making processes easier to handle.

To track your form’s performance you can use the Abandoned Form Recovery feature, as an example, and have automatic data from when forms are submitted or abandoned, which enables you to send messages to lost leads, and delight those who have yet to submit their forms.

When you use a contact form you may offer the lead the possibility of attaching files to it. For uploaded files, you can integrate it to  Google Drive or Dropbox, and then have any submitted file organized in a single space.

form builder integrations _ MightyForms

One more feature that is a must-have for your contact form on Wix is the autoresponder. Set up a message to appear after each submission. Make sure it’s personalized with lead data from the form, like their name. 

MightyForms has yet many others integrations and features. You can connect to even  more using webhooks or through Zapier

Learn about features and integrations and make use of your forms fully. And if you have any doubt, you can contact us. But, if you want to explore more in-depth and use all the elements that can automate your contact form, you can always count on help from our experts.


How To Customize Your Wix Contact Form

Since you’re using Wix, you’ll need to embed the form to your page, but it doesn't mean that you can’t customize the contact form to have the look you wish for it. You can make your form resemble the rest of your landing pages, and make it belong to your website, having the same characteristics and personality.

Design your Theme

The first step is going back to your form and select to change its design.

Then you can select a Theme from the catalog or edit the form’s design as it goes. You can easily create your own theme and save it, having access to it for future form designs.

Select a font

The second step consists of selecting the font you are using. Remember that it must follow the characteristics of the business, creating an identity. Users must be able to recognize your business throughout the design elements, such as typography, color scheme, and logo. 



To change the font you have to select among the options from the sidebar on the right side of the screen.

Define the color scheme

On the third step, you’ll change the color scheme. This option is also on the sidebar on the right side of your dashboard screen.

Define color scheme for web form _MightyForms

Use the color scheme that speaks to your business identity. You want to be easily recognized, and this is an easy way to accomplish it. You can also build up your own custom color scheme, making it closer to your goals.

Select a Background image, color, or transparency

The fourth step is to change the background page. It can be with colors or by uploading an image. Make the contact form more beautiful, and recognizable, with a custom image.

 

And you can also do a lot more, using the advanced settings, which gives you the opportunity to change not only the page background, but the form's background, and also all the fields shape and color, even add a specific font for title, fields, and choices. You can make your form perfect for your purpose, and build it in a way that mixes up with the page you’re embedding it into.


How to embed a custom HTML Contact Form on Wix

At the top of your MightyForms builder, you’ll find the Share button. Click on it to access the Embed Code so you can place the contact form you’ve just created into your Wix page. To embed your form is as simple as a copy-paste process.

 Now, to add your contact form on your Wix page you can follow the next steps:

Go to Add > More > Custom Embed

You can add the HTML code by clicking "Add" on the tool bar inside your Wix builder. Then Drag & Drop the HTML iframe section.

Paste the HTML iframe code

Click "Enter Code" and paste the code. 

And just like that you can have your fully customized, on autopilot, responsive, and beautiful contact form on Wix.

If you change anything later on the MightyForms dashboard, your form will update automatically on Wix.


Use a ReCaptcha to protect your Contact Form from spammers

To avoid spammers and keep your website secured you can add a ReCaptcha to your contact form on Wix. This is a simple act that comes with great benefits for security, which on the web is essential.

Detect unnatural access to your forms and abusive traffic, that doesn’t have user interaction. Using ReCaptcha you can detect human interaction apart from bots and other malicious attacks.

When you build a form with MightyForms the ReCaptcha is automatic and free for all users. Then, no worries with malicious bots attacking your form, you’re automatically protected.


Pros and Cons of hosting your site on Wix

You know this  - everything has a good side and a bad side. The same goes for website hosting  platforms, such as Wix. 

Wix has the advantage of free plans available, with limited features and templates, but yet very accessible, and, most importantly, SEO friendly and responsive. But, at the same time, they don’t offer all plugins and apps, lacking several plugins when compared to other hosting platforms services.

Let’s see more details that make this platform great for your business, and points you must consider before choosing Wix.


Three Bright Sides of Wix


To build a Website is easy and intuitive, which helps you build your website in a few moments, and always with a good look. With the apps and plugins offered you can make your website complete, useful, and branded with features that can be integrated for a better user experience. All made with a few clicks.


It has a good site loading speed, which help with SEO and reduces the bounce rate. A page that takes too long to load can lose leads. It takes only one second of delay to reduce by 7% the number of conversions. Therefore, a platform that offers fast loading speed is a plus for conversions and SEO.


Tons of beautiful and responsive templates that can inspire you and let your company’s website be more interesting for the users. Your site can be attractive and generate more traffic and conversion when well built. Besides, templates don’t require you to know about coding in order to create a complete and useful website.


Three Downsides of Wix


The free plan has Wix branding, making it less personal for business. This means that if you want to create an identity you must have a paid version.


No tracking on the free plan, which makes it harder to understand your audience and follow the development and growth of the site. If you just need to track your form, you can still count on MightyForms' form analytics though.


The design setting can minimize creativity, since it has all the pre-made features, fields, and templates, having the minimum customization. This also affects the business identity on the web.


Contact Forms Templates for Wix

Templates are out there to help you, both as inspiration or shortcut to make your job easier when building up your own contact form. Remember that the best templates are those that allow you to change, update, and customize every detail about the form, giving it the business’ identity.


Simple Contact form with map

A simple contact form is, sometimes, everything you need to get more leads and fulfill the task of having a way to establish a communication channel.

Being open to the audience is a great start to get to know them and also to create a good customer experience.

Adding a map to the contact form can be a gamechanger, conveying your business to be open for visitors and giving the lead the idea of belonging. Also, it helps with local SEO, since users looking for your type of business can have access to it through the proximity it is from them.


Call back contact form

For a more personalized customer service, you may offer as an alternative to the traditional contact form the option for the lead to wait from your business to reach out by offering a Call Back Form, where the visitor adds their contact information and waits for your business to contact them. Make sure you have an automatic and respectful message saying how long it will take for the lead to be reached out by your business.

You can be assured that the lead is legit and has a sincere desire to engage in conversation with your business. And, using this type of form, you can ensure quality leads, raising the chances for conversion.


Detailed contact form

Another possibility is to have an in-depth information type of form. You can gather more data about the lead, and also provide more information about your business, like adding a map to the form.

When using a longer form you may choose to make it a multi-step form, displaying each part about one question at a time, and leaving it less overwhelming for the lead to respond.

One last tip is to make sure to mark any required field only in case of extreme necessity, to avoid any abandonment over intrusive or too many fields.


With MightyForms you can start building beautiful and responsive contact forms for your Wix based business, for free. Try it now.

By:
Heloise Montini

Heloise Montini is a journalist and SEO specialist. She writes about travel, news, and, as a hobby, creative writing. She is always available for new challenges and learning.