Build Your Own 'Contact Us' Page with Wufoo Custom Form Builder

2 posts / 0 new
Last post
Jessica Horvath

Build Your Own 'Contact Us' Page with Wufoo Custom Form Builder

I’ve got a mighty impressive form builder to share with you today from Wufoo. There’s a lot of great features on Wufoo, and here are just some of the special things you can do…

  • Auto-send confirmation emails
  • Add CAPTCHA
  • Add field rules
  • Receive form submissions via text
  • Integrate with MailChimp
  • Use Typekit Fonts
  • And if you want to be extra fancy, you can add your own CSS!

Like the sound of that? Then keep reading because I’ll show you how to embed a gorgeous Wufoo form on your IndieMade site!

Building the Form

For this tutorial, I’m building a quick and simple contact form on Wufoo, but you can create any variety of form you want -- satisfaction surveys, custom order request forms, newsletter sign up, etc. If you can dream it, you can build it! Wufoo is a really powerful online tool that can do a lot, so I'm only going to cover the basics for you guys.

Step one is head over to www.wufoo.com and select Get Started - Free! Free accounts let you have up to three forms. All you need to sign up is an email address and password. Wufoo also let’s you pick out a subdomain to access all your saved forms, form themes, and entries.

Wufoo Sign-Up Form

You’ve made a Wufoo account -- hooray! Now you can click New Form and start adding some fields. You can quickly insert some ready made, “fancy pants” fields like Name and Email Address. If you need to make changes (ex. make it a required field), simply click on the new field and editing options will appear on the left. You can also reorder the fields by clicking the field and dragging.

And if you want the field to be required before submitting the form, go to the field's options shown here:

Required Fields

There are a few multi-option fields to choose from -- Multiple Choice (i.e. radio buttons), Checkboxes, and Dropdown. (Pro Tip: The Checkboxes field is the only field that will allow more than one selection!)

I'm going to use a Multiple Choice field to use as contact topics. When you’re editing the field, simply type in your own choices.

Wufoo Multiple choice Field

Since this is a contact form, I’m also adding a Paragraph Text field for the message.

Wufoo message field

If you head over to the Form Settings tab, you can give your form a name, add form submission confirmation, and cut down on spam by adding CAPTCHA or limit the number of submissions by the same IP Address.

Here I chose to add a text confirmation message, have Wufoo send the submitter an additional confirmation email, and set the CAPTCHA to appear automatically:

Wufoo Form Settings

Hit Save Form when you're done. Now that you have a functioning form -- let's make it look good too!

Designing the Form

This is the fun part! Wufoo let’s you design every aspect of your form, so the end result will align with your site’s colors and branding. Like IndieMade, you can specify your own RGB color value for each region of the form.

First though, I'm going to set the color to the wallpaper region as "None", so the form will blend in with the other elements of my IndieMade page:

Wufoo Wallpaper Color None

Here I'm selecting a color for the form's background by entering "#eeeeee" as the RGB number on the right:

Wufoo Background Form Color

If you want to change the font, select the font box and a lightbox will pop up with a variety of font options.

Wufoo Font Select

When you’re all done designing, select Save Theme and give it a name.

Name Your Theme

To apply a theme to your form, go back to the Forms tab and change the theme from "Default Theme" to your chosen theme.

Wufoo Pick Theme

Embedding the Form

Now we’re ready to embed this form to your IndieMade site! From the Form Manager page, you can access the embed options by selecting Code. Wufoo gives you several options to share and embed your form. My recommendation for IndieMade users is to select Embed Form Code and copy the JavaScript Version code.

Wufoo Copy Javascript

Because I want this form to be my main contact page, I’m going to add a new page called “Let’s Chat” by accessing my IndieMade dashboard and selecting Content > Pages > Add a New Page.

Add a new page

Next, type in your title and select Source from your text editor. Paste in your JavaScript, and if you’re adding this form as a page, be sure to select where you want the page to appear in your navigation.

Add A Page - Insert Form Code

Save it, and...you’re done! You should see your awesome form on its own page, like so:

Form on the page

Reading Submissions

Now that your form is built, designed, and embedded, it’s time to wait for the wave of submissions. But first, you should tell Wufoo where to send the submission notifications, so you'll know immediately when you get a new message.

To get to these settings, just go back to the Form Manager and click on Notifications. Here I've set up notifications to be received at an email address. You can also have the messages sent by text.

Wufoo Notification Settings

Save the changes you make, and you should now be notified whenever a submission occurs. Yay! You can also view submissions by selecitng Results on the Form Manager page.

Hope this little tutorial helped introduce you to Wufoo! If you try making your own form, I hope you let us know what you think :)



 

JohPlanSo

Hey Jessica!

Hey Jessica!

Cool and very intensive tutorial - well done!

But you can have it even more simple to create a new contact form with PlanSo Forms. Have a try with a preview directly in your browser at http://www.planso.net/planso-forms/. It's a very intuitive tool to create surveys, registration forms, payment forms and much more. 

Cheers,

Johannes

Please login or register to comment.