home > blogs > vox

Insert a Contact Form into Your VOX Blog

VOX is a powerful publishing platform and is very easy to add email forms to. VOX allows you to add an email form to either an individual blog post or to the side bar featured on every page of your blog. Both of these options are outlined below.

Please visit our VOX blog to see a form in action.

Adding an Email Form to a VOX Blog Post

1. Design and Build the Form

The first step before stating in VOX is to generate the HTML code that will be used for the actual form. myContactForm.com offers a free form creation service that is easy to use, quick, and intuitive.

To get started with myContactForm.com, please read this tutorial.

2. Login to your VOX Account

a. Go to VOX.com and login to your account.

Vox Login

3. Create a New Post

a. Click the Create button to start a new post.

Create

4. Write the New Post

a. Write your new post as you would regulary do in VOX.

Post Editor

b. Once you get to the point in your post where you would like your email form, click the embed button.

Embed

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).

Paste Code

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 OK on the Embed a Widget window.

e. Select how you would like the email form positioned and click Insert

Position Widget

5. Publish the Blog Post

Once your form code has been embedded as a widget, Click Save.

A fully functioning demonstration form hosted on VOX can be seen here.

 

Adding an Email Form to the Side Bar in VOX

1. Create the Form HTML Code

It is important before stating this tutorial to generate the HTML code that will be used for the email form. myContactForm.com offers a fully customizable form software that works brilliantly.

We've writtend a comprehensive myContactForm.com tutorial that we recommmend reading.

2. Login to your VOX Account

a. Go to VOX.com and login to your account.

VOX Login

3. Add Email Form to Sidebar

a. Click You Button.

You

b. Click Change Your Design

Change Your Design

c. Click the Customize your sidebars under Select a layout

Select a Layout

d. A new window will open. Click configure next to the Embed option.

Choose Content Modules

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).

Paste Code

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 OK on the Embed a Widget window.

h. On the Choose Content Modules window make sure Embed is checked and then click Apply.

Apply

e. Your new Email Form will now appear in your blog's right column.

Form Preview in Sidebar

A fully operational demonstration form hosted on VOX can be seen here.