This tutorial relates more to WordPress.com but will be helpful to those SmugMug users who want a visually appealing subscription form next to all those amazing photos! Let’s face it, the WordPress Subscription Widget ain’t too pretty! Of course, this will also work for contact or any other kind of form you need. So, let’s get started.
First, you will need to head on over to Wufoo and set up a free account. You can have up to three forms and 100 new subscribers (or form submissions) per month without having to pay a monthly fee. A popular request, payment options, can only be set up if you have a paid plan of $29.95 or more per month. You can get 5 free transactions to try it out but after that, you will need to pony up some cash.
Second, you could start from scratch with making a form, but let’s do this the fast and easy way. Go to the Wufoo Theme Gallery. Here, you will see a mailing list template ready for you to add your own style. Click “Add to Wufoo” (Depending on if you are logged in, you might see “Customize” instead.)
Once you add the template to Wufoo, you will come to a screen where you can add additional fields, but we’re going to skip that part because we already have our pre-made template! Yeah! Instead, click “Field Settings” where you have a few options to customize if you so choose. For a sidebar widget, Wufoo recommends the Large Field Size but I actually prefer the Medium. You can always come back and change this if you’re not liking the results. I also suggest changing the field label to Email or Email Address as Your Email Address is overkill. Also, if you add Instructions for User, it will make a side widget humongous. I think most users will be able to figure out the purpose of the email field, but feel free to fill this out.
Next, click on the next tab, “Form Settings”. Here, you can change the wording, Confirmation Settings (only paid accounts can redirect to another website), and Limit Form Activity. If you have a free account, you may want to pay special attention to this area. You are allowed 100 submissions per month and therefore may want to limit sign-up from the same IP, set the dates you want the form to be active, and/or limit the total number of submissions to make sure you stay in the free “zone.” Make sure to click “Save!” Immediately upon clicking Save, you’ll have three options. Click the 2nd, Setup Email Notifications for this form.
Email Notifications is an understatement. You can easily feed your sign-ups, registrations, etc. through several outlets. Personally, I use mailchimp. You can also, send notifications to your email address and set up mailchimp or other service later. Any service that can import an RSS feed or uses Web Hooks can get your Wufoo info. However, if you are using your Wufoo form to send updates from your blog or newsletter, they won’t magically come from WordPress anymore. You will need to send them out manually (Eeks!) or set up a free account with mailchimp, aweber, or other email service. So why would you want to put it in all this work when WordPress does it automatically? Because WordPress does it automatically! There’s zip control when it comes to knowing exactly when and how the email notifications are sent. You make a boo-boo and need to correct a typo, too bad because it’s already been sent to your readers. Boo! I also think weekly wrap-ups are more efficient than getting an email every time I update my blog. You may be of a different opinion, but fortunately, you can choose however often you want to send out email subscriptions with the control that wufoo provides.
Last, comes the fun part– making our form look ‘purty’. Go to the Themes Gallery. You may have your own color palette, but I suggest picking one of the palettes that closest resembles your site colors. If anything, it will give you an idea of how to display the contrasting shades and colors of your website within your form. After picking a color scheme, click “Add to Wufoo” where you will be able to go back and fine tune the colors.
While in the Theme Designer, you are able to customize everything within your form. For the purposes of a subscription widget in your sidebar, the Section Title and Section Description will not be displayed. Instead, it relies on the Main Title and Description. As to backgrounds- Wallpaper and Header are not displayed.
After clicking “Save Theme”, you will come to the main menu where you can view all your forms. Before we grab the code to (finally!) add to our WordPress website, make sure the theme you just tirelessly created is attached to your form. You should either see the theme you just saved or Default Theme. Once you have the correct theme attached, click “Code”.
Now that we’re in the Form Code Manager, select the second tab- Embed Form Code. Copy the WordPress shortcode and then go paste it into a text widget or a page, post, or where ever WordPress shortcodes are accepted!
Now that you have finally placed the new form in your website, you may decide you need to apply some more tweaks to get it looking the way you want. Just go back to your Wufoo Form Manager where you can edit any of your form elements. I’ve only touched on the basics of using Wufoo. There’s much more you can do, only limited by your imagination, a little CSS knowledge, and a bit of patience ;) I was going to show how I changed the ‘ugly button’ (submit), but this tutorial has run too long as it is. It’ll have to wait til next time! Perhaps a tutorial on how to integrate it with Mailchimp might be in the future as well. Hopefully, this will at least get you started. If you need more help, there’s some really good documentation on the Wufoo website as well…not so much on the WordPress side but hopefully that will change soon!
UPDATE: NB: As far as I can tell, there is not a way to “make” WordPress.com users not subscribe from their toolbar or non WordPress.com users to use the new grey “follow” button that’s appearing in the right corner of our blogs. So you may have two different email subscriptions going out anyways. The only deterant I know of is in:
Settings > Discussions > Show a ‘subscribe to blog’ option in the comment form.
If there’s other options, I’d love to hear them!
Also, I think the widget is a bit slow right now, but dummy me, put the css style sheet for my button on my main blog.
I think if I move it to my SmugMug Hugs storage, it should load faster (can’t seem to upload a .css file to WP(.com). Workaround anyone?) but that’s beyond the scope of this tutorial. I’ll try to show that in another tutorial. :)
- Wufoo question ” WordPress.com Forums (onecoolsitebloggingtips.com)
- Embed Wufoo forms and surveys with a simple shortcode – WordPress.com (en.blog.wordpress.com)