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.
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:
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.
Since this is a contact form, I’m also adding a Paragraph Text field for the message.
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:
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:
Here I'm selecting a color for the form's background by entering "#eeeeee" as the RGB number on the right:
If you want to change the font, select the font box and a lightbox will pop up with a variety of font options.
When you’re all done designing, select Save Theme and give it a name.
To apply a theme to your form, go back to the Forms tab and change the theme from "Default Theme" to your chosen theme.
Embedding the Form
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.
Save it, and...you’re done! You should see your awesome form on its own page, like so:
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.
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 :)