home > content management systems (CMS) > wix

How to Add Email Forms to Your Wix Web Site

Wix is a powerful website authoring tool that is easy to add email forms to. The steps for doing this are outlined below.

A demonstration form created using a Wix web site can be seen here.

1. Create Your Form HTML

The first step in integrating an email form into your website is to build the actual HTML code for the form. The easiest and quickest way to create the form code is to use myContactForm.com.

myContactForm.com features a free online wizard that steps you through the entire form building process. myContactForm.com has just about any feature you could ask for including auto-responders, CAPTCHA, file attachements, CSS styling, data exports (Excel, CSV, Text, HTML, etc.), pre-made templates, and much more.

Click Here to read a tutorial on creating the form HTML using myContactForm.com.

2. Go to Wix.com and Login to Your Account

a. Go to wix.com and click the Login link

Go to Wix.com

b. Enter you login details

Enter Your Login Details

3. Add the Form Code to Your Wix Site

a. Hover over the screen shot of your site and click the Edit button

Click the Edit Button

b. Under Manage Pages click the Page you would like to add an email form to.

Select Which Page to Edit

c. Click the Go to Editor button

Click the Go to Editor Button

d. Add a new HTML Widget by hovering over Add then Widgets then HTML

Add a New HTML Widget

e. Select Blank HTML

Select Blank HTML

f. Maneuver the Blue HTML Widget Box so that it is located where you would like to to appear. Stretch it to the appropriate size.

Manuver the HTML Widget

g. Left Click the Blue HTML Widget Box and click Settings

Click the Widget Settings

h. Paste the form HTML into the Insert HTML Code box (CTRL+V or Right Click and Select Paste). If you do not have your form code created and copied, please read this tutorial to learn how to do so.

Paste in the Form Code

i. Note the Width of the HTML widget and click OK.

Click OK

If you are having problems getting the form to fit within the allotted area, you can change the width of the form within the myContactForm.com Control Panel by:

1. Logging in to myContactForm.com

2. Clicking the Edit button

3. Clicking the Form Appearance button

4. Stepping through the steps until you see Form Width. Set the Form Width to a value slightly less than the width shown in Wix.

5. Click the Form Management button

6. Click Get HTML and copy the new HTML

7. Go back to WIX and update the HTML code for the widget

 

j. Click the Save button in Wix. This will publish the updated site.

Click the Save Button

 

4. Configure the Form Location Setting

a. Login to myContactForm.com

b. Click the Edit Button

c. Click the Basic Form Information Button

d. Enter the following URL into the form location setting:

flashquix.com/embeds/*

Configure the Form Location Setting

e. Click

 

5. Test Your Form

Open a web browser and go to the web page containing your form. Fill out the form and press the submit button to test it.

A demonstration form created using a Wix web site can be seen here.