Howto: Build a contact form with a Polldaddy survey

I just added a contact form to the about page here using a Polldaddy survey. While it’s not as straight forward as installing a plugin to do the job, I think it’s worth doing because it touches on all aspects of Polldaddy survey creation. After you’ve created this contact form on your own blog you’ll know how to create a Polldaddy survey, a custom style sheet and how to change the language in the form too. It’s very flexible.

Here’s how I did it.

1. Login to Polldaddy and on the dashboard create a new survey for your contact form.
   
2. Give your form a descriptive name and select the custom stylesheet. You’ll have to create a new one. I use the WordPress 2010 theme so I based my stylesheet on the Plain White theme. Changes are minor, mainly to accommodate width and font size. Grab the css file here and copy it into your style.
3. Now on to the questions. I created a simple Name, Email and Comment form.
   
4. You need to tell the survey where to send responses. After saving, go to Reports->Data and scroll down to the Email Notifications where you can fill in your details. You can also subscribe to an rss feed or send responses to a HTTP URL.

   

5. To embed the form in your website use the embed popup and choose “Website Inline”. The iframe code should be copied into the new page that will hold your contact form.

   

6. You’ll have a form that looks like this.

   

7. You’re not finished yet though. Submit the form and you’ll see the message, “Survey Completed”. That’s not exactly appropriate for a contact form is it? Go to the languages page and create a new Survey Pack. You can change just about every bit of text displayed in the form here. After you’ve saved the language pack go back to the edit survey page and select the correct language pack:
   
8. The one final job to do is to adjust the iframe size. I made each field of the form mandatory but that raises errors when you submit an empty form. Those errors make the form longer than the default and the iframe is too small to hold it. I bumped the height to 900 pixels and no more ugly scrollbars! There’s more empty whitespace below the form but my contact form is at the end of the page so I don’t mind.

You could also use the Javascript embed method, but that loads the survey form in a css popup window. I prefer the iframe method.

As you can see, Polldaddy surveys are incredibly flexible and offer a lot of customization options. I work on Polldaddy code every day so of course I’ll say this but I’d have no hesitation in recommending the service to anyone needing polls, surveys, quizzes or ratings. Create a free account and give it a spin!