This is the first of two how-to articles on using SurveyGizmo to create Contact Forms, Lead Gen Forms, Support Requests, Newsletter Signups, or any kind of custom form. SurveyGizmo makes a great all-purpose web form tool for embedding data-collection forms on your website. We use the term “survey” frequently around here (duh!) but take it to mean any kind of data collection. The word “survey’ here can easily stand in for web form, and vice versa.

No need to get the IT department involved or set up custom processing code. Just add your questions and drop a small snippet of code on your website – done! Plus, you get some special features that you can’t get from a regular web form.

• Track complete vs. abandon stats
• Send email auto-responders (as with many forms), but also have a downloadable text file with contact info.
• Send your data to more than one place – i.e. accept newsletter subscriptions as part of a contact form and post the subscription back to your Email Service Provider’s API.

This week we have several new, related updates

• New Tutorial: Creating Contact, Lead Generation, Newsletter, and Support Forms
• New Question Templates: 4 new templates for quick form setup
  1. Contact Form – Simple
  2. Contact Form – Extended
  3. Support Form
  4. Newsletter Signup – Extended
• New Look & Feel Template: a Contact Form/Embedded design template with clean simplicity for embedding surveys into your website smoothly

You can see examples in use on our own SurveyGizmo contact form and Widgix contact form. We have reprinted the tutorial here for convenience, but you can find it and others on the SurveyGizmo Tutorial pages.

Creating a Single Step Contact Form

A single-step contact form means that users fill out a single page, and then they see a thank you after submitting.

Step 1: Create a new survey using one of our contact form templates

Create a new survey and choose one of the contact form templates that seems closest to your need.

• Contact Form – Simple
• Contact Form – Extended
• Support Form
• Newsletter Signup – Extended

You can and should edit the questions and layout, so just pick something similar. Read more about the basics of creating a new survey.

The templates all have examples of forms and email auto-responders.

Step 2: Edit the questions

Modify the questions to suit your needs. Clicking the notepad icon will allow you to modify many options. You can also add or reorder questions.

Step 3: Handling the submitted data

You have to decide what happens after the user clicks the submit button. Every data form or survey in SurveyGizmo always has at least two pages. The second page acts as a Thank You page, but it can also hold actions to act on the data collected. Use these actions to send email or push data.

Email auto-responders

All of the Contact forms contain examples of email auto-responders. You can modify these or add additional ones. You can read more about setting up Email Auto-responders here.

Pushing information out of SurveyGizmo

SurveyGizmo Pro and Enterprise accounts have access to an Action type called HTTP Post. This is used to push data to outside services like Email lists, newsletter signups, customer databases, etc. You can transmit information to other outside services such as SalesForce.com, Constant Contact, Campaign Monitor, etc.

Step 4: Modify your look and feel

When you are finished with your questions, it’s time to move on to modify your look and feel. If you used one of our Contact Form Templates, it already comes with a look and feel template that is well-suited to being embedded on a website.

You may, however, want to tweak the width of the form, the font size or font family, text color, the background color, or Submit Button text. You can change all those things on the Look & Feel tab. You can also select different templates or modify the HTML or CSS if desired.

You can click “Preview” to view the included Look & Feel or modifications. For you designers out there – it is also possible to modify the look of a survey by adding CSS to your site that acts on the survey form’s ID and Class names.

Step 5: Embed the form on your site

When you are happy with your preview, it’s time to “Launch” (publish) the Contact Form. Clicking Launch will take you to the Publishing tab. You’ll most likely want the Embed Option 2 – the Javascript Option. You can cut and paste this small snippet of Javascript code and place it on the page in your website where you want the form.

Usually you’ll create a blank Contact Us page on your own site using your own template/design. When the page is viewed, the form will fill in dynamically and be wrapped in your site’s design.

A Special note to WordPress or other CMS users like Drupal, etc.

You can create a page or a post and paste in the Javascript snippet. You need to make sure you paste the Javascript code into the HTML, so if you are using the Rich Text Editor click on the HTML button and paste the code in there. If you paste it in the Rich Text Editor directly it won’t work, because the code will be interpreted as copy text.

You’re done – go visit the page and test your form!

Email auto-responders will run immediately (unless you set a time delay). Stats will begin to show up in 10 – 20 minutes. It’s useful to think of the “Abandoned” data as “views” on your form where someone didn’t fill it in. This is natural on most web sites, but if you feel more people should be filling out the form, you might make changes and compare the data over time to achieve a more useful form.

If you create some forms, feel free to post links here to show them off.

Read Part 2 . Contact Forms: Increase conversions with multi-step web forms