By: Chris Coyier Back to Guides
It’s usually a challenge to market and promote anything these days, and getting people to do it for you is the holy grail. It might be one of the reasons why social media marketing has become so big these days. In this tutorial, we’re going to show you how you can add social media sharing buttons to your form so that you can get your users to help you spread the word and make your next promotional campaign a success.
For demonstration purposes, we’re going to create an example promotion that gives away…I don’t know…FREE Pulled Pork Sandwiches from McLoosies (my favourite!) and we’re going to use a Wufoo form to collect email addresses to let people know that our shop now features MORE pulled pork! Here’s how we’ll get our fans to help spread the news.
1) First, build a form.
You smartypants are probably masters of this, but just in case you need a refresher on form-building, check out this documentation (including video walk-through) about how our Form Builder works.
2) Add Social Sharing Buttons to the Confirmation Message
While still in the Form Builder, under the Form Settings tab on the left, you’re going to customise the confirmation message that users will see after filling in your form. Because Wufoo allows you to use HTML here, we’re going to add some anchor links with images inside them. Each social service has their own special link format for sharing new content. For example, Twitter just takes one URL parameter called Status:
<a href="http://twitter.com/home?status=TWEET-GOES-HERE-(includeURL!)"> <img src="http://yoursite.com/twitter-icon.png" alt="Share on Twitter" /> </a>
Here’s Twitter and Facebook all together. All the “whitespace” is removed from the HTML so that they show up nicely in a row.
<a href="http://www.facebook.com/sharer.php?u=https://examples.wufoo.com/forms/get-a-free-loose-meat-sandwich/&t=Get%20a%20FREE%20Loose%20Meat%20Sandwich!" target="_blank"><img src="https://s3.amazonaws.com/wfo/images/facebook_32.png" alt="Share on Facebook" /></a> <a href="http://twitter.com/home?status=I%20just%20got%20a%20FREE%20loose%20meat%20sandwich!%20https://examples.wufoo.com/forms/get-a-free-loose-meat-sandwich/" target="_blank"><img src="https://s3.amazonaws.com/wfo/images/twitter_32.png" alt="Share on Twitter" /></a> <a href="http://del.icio.us/post?url=https://examples.wufoo.com/forms/get-a-free-loose-meat-sandwich/&title=Get%20a%20FREE%20Loose%20Meat%20Sandwich!" target="_blank"><img src="https://s3.amazonaws.com/wfo/images/delicious_32.png" alt="Share on Delicious" /></a>
If you use this as a template, remember to customise the URLs and messages for your own promotion! The icons that we’re using are especially nice icons from Komodo Media. That set has loads more icons in it if you want to use different/more services.
3) Tart it up!
You’ll probably also want to:
- Customise the look of your form with custom colours, backgrounds and fonts.
- Integrate your form with an email marketing service or CRM.
- Send a confirmation email that includes a link to the coupon: