Ever have someone nudge you and whisper–Psst, Buddy. You can do better. Well, pretend that’s us. We’re here to help you do better. And specifically here in form land today, we’re going to talk about embedding forms. What pitfalls to avoid well, falling into, and we’ll share tips on how to make sure you’re embedding those forms like a real pro.
3 Pits. Don’t Fall Into ‘Em.
1. If you’re already using a certain background image or texture on your own website, chances are you’ll want your form’s background to match. But sometimes aligning images and copying color codes can be a hassle. No worries. To make the whole process go a lot smoother, we automatically make form backgrounds transparent when they’re embedded with one of our provided codes. That way, any existing background you have set on your website will “show through” and your form will blend right in.
2. We’re going to make a wild guess here and assume that you probably already have your own logo or banner added to your website. And we’re also assuming that you don’t necessarily want the Wufoo logo that’s automatically included at the top of your form’s theme (it’s ok, we don’t hold it against you). If you do want to add an extra logo to the top of your form, you can always add something directly to your page, above where the form is embedded.
3. A Wufoo form also has some standard borders around it to give it a little more definition when viewed on its own. Of course, if you’re embedding the form into an existing page, you’re probably using a sidebar, or some other containing element. Rather than having two sets of conflicting borders, and needing to do a ton of CSS tweaking to get them both to play nicely, we make it easy by leaving out our border. The good news is that this lets you control all the border styling from the CSS on your own page.
And there you have it. In just 3 quick steps, you’re on your way to pro status when embedding forms. And remember, we’re always here to help you do better. Don’t forget to check out our handy Guides for even more expert tips like these. Form on, friends.
Comments
How the heck do we get a wufoo form embedded into a Mailchimp template ? wah wah wah wah wah
Posted October 10th, 2014 by Cammie.@Cammie, you probably don’t want to do that. The primary reason is that many mail clients don’t support fillable forms in email. Even worse, some email clients may think you’re trying to do something nasty and put your message in spam. I guess it is possible with Google forms. Best scenario is you let Mailchimp work its magic for email templates and use a nice big exciting button to go to your wufoo template hosted on the web.
Maybe you know this, but for anyone else reading…I’d recommend checking our wufoo URL templating. Using mailchimp you could add a link to your form and prefil fields using the Mailchimp merge tags like |fname|.
Posted October 10th, 2014 by Todd Heslin.Hi, I’d like to know more about embedding mailchimp tags in a wufoo form. Can you give an example of the html structure?
Posted October 10th, 2014 by Simon.Sure Simon. Mailchimp has a bunch of predefined tags that are used commonly for your lists, eg:
|fname|
|lname|
|email|
When you create any email template (regardless of the HTML) you will likely add links, whether it’s through the mailchimp interface or through anchor tags in your html. If you render the link like this:
[Open first anchor tag] href=”[somewufooFormUrl]/def/field1=|fname|&field2=|lname|” [close first anchor tag]
Then when the email is sent to each person on your list, they will all get slightly different parameters in the URL which are used to identify them when they hit the wufoo form. This could be a field to make it easier, eg first name and last name OR it could be hidden field that you use for tracking purposes.
This can get super powerful. I built a referral system based on this technique.
Resources (to Google):
– wufoo URL modification
– Mailchimp merge tags
Good luck!
Posted October 10th, 2014 by Todd Heslin.Oh just realised that the HTML of the anchor tag actually rendered. Let me try again:
[Open first anchor tag]
Posted October 10th, 2014 by Todd Heslin.href=”[somewufooFormUrl]/def/field1=|fname|&field2=|lname|”
[close first anchor tag]
First, thanks for the info! I think another thing to be alert to is when embedding a longer form into a Joomla content management system, specifically when viewed with Chrome and scrolling, the NEXT and PREVIOUS buttons usually don’t function correctly to move between form pages.
Also, it would be appreciated if you could get the wufoo Blog RSS feed working again so I could keep on top of these entries!
Thanks!
Posted October 10th, 2014 by Bob.@Bob: We’re looking into blog RSS feed at the moment, but in the mean time the best way to keep tabs on the blog is via our Twitter account: https://twitter.com/wufoo
Posted October 10th, 2014 by Johan Lieu.@Todd: Great tips on how to embed MailChimp tags into your wufoo form link.
Posted October 10th, 2014 by Johan Lieu.Can you let us create a cool “Add a Reply” field to stuff like this ?? 😀 That would be rad.
Posted October 10th, 2014 by Doctor Psionic.Thanks for the detailed info.Helped me a Lot !
Posted October 10th, 2014 by Tangerine Orange Key.