home > blogs > vox
How to Add Email Forms to VOX
Adding an email form to VOX is a quick and easy way to make your blog more interactive. You can choose to either add your form to an individual blog post or to the side bar featured on every page of your blog. Both of these options are outlined below.
A fully functioning demonstration form hosted on VOX can be seen here.
Adding an Email Form to a VOX Blog Post
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. Login to your VOX Account
a. Go to VOX.com and login to your account.
3. Create a New Post
a. Click the Create button to start a new post.
4. Write the New Post
a. Write your new post as you would regulary do in VOX.
b. Once you get to the point in your post where you would like your email form, click the embed button.
c. A new Embed a Widget window will open. In the Widget Code box paste your form HTML (Edit > Paste, or 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.
c. Once you have pasted your code, you will need to make a few changes manually in order to ensure that VOX formats it correctly.
1. Get rid of any new lines (hard returns) that are within the HTML code. When VOX goes to publish the post, it will interpret these as new lines and replace them with line breaks <br>, adding excessive white space to your form.
2. Make sure the elements of your form work with the template layout for your blog. I've found that making the form too wide or individual question fields too wide will often break the form. You may need to experiment with your form in order to ensure it works with the layout.
d. Click 
on the Embed a Widget window.
e. Select how you would like the email form positioned and click Insert
5. Publish the Blog Post
Once your form code has been embedded as a widget, Click 
.
A fully functioning demonstration form hosted on VOX can be seen here.
6. Verify the Form Location Setting
If you are using myContactForm.com, you will need to login and make sure that you've set the Form Location setting to the proper URL for your blog. Because VOX embeds your form within an iframe and creates a unique URL for it, the process is a bit more complicated than that of other blogs.
a. Go to your blog and get the iframe URL for the form. To do this:
a1. Go to you VOX blog.
a2. Click Submit on your form.
a3. An error message will come up stating that the form is not being sent from the proper URL. Highlight and Copy the URL that the error message gives you for the Form Location.
b. Login to myContactForm.com
b. Click the Edit Button
c. Click the Basic Form Information Button
d. Enter the URL that you copied from the error message in Step a3 above.
e. Click 
Adding an Email Form to the Side Bar in VOX
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. Login to your VOX Account
a. Go to VOX.com and login to your account.
3. Add Email Form to Sidebar
a. Click You Button.
b. Click Change Your Design
c. Click the Customize your sidebars under Select a layout
d. A new window will open. Click configure next to the Embed option.
e. A new Embed a Widget window will open. In the Widget Code box paste your form HTML (Edit > Paste, or 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.
f. Once you have pasted your code, you will need to make a few changes manually in order to ensure that VOX formats it correctly.
1. Get rid of any new lines (hard returns) that are within the HTML code. When VOX goes to publish the post, it will interpret these as new lines and replace them with line breaks <br>, adding excessive white space to your form.
2. Make sure the elements of your form work with the template layout for your blog. I've found that making the form too wide or individual question fields too wide will often break the form. You may need to experiment with your form in order to ensure it works with the layout. Generally a 95% wide form works well.
g. Click on the Embed a Widget window.
h. On the Choose Content Modules window make sure Embed is checked and then click Apply.
e. Your new Email Form will now appear in your blog's right column.
A fully functioning demonstration form hosted on VOX can be seen here.
4. Verify the Form Location Setting
If you are using myContactForm.com, you will need to login and make sure that you've set the Form Location setting to the proper URL for your blog. Because VOX embeds your form within an iframe and creates a unique URL for it, the process is a bit more complicated than that of other blogs.
a. Go to your blog and get the iframe URL for the form. To do this:
a1. Go to you VOX blog.
a2. Click Submit on your form.
a3. An error message will come up stating that the form is not being sent from the proper URL. Highlight and Copy the URL that the error message gives you for the Form Location.
b. Login to myContactForm.com
b. Click the Edit Button
c. Click the Basic Form Information Button
d. Enter the URL that you copied from the error message in Step a3 above.
e. Click