How to Make Those Forms of Yours Personal with Templating

Ready to get personal? With those online forms of yours, that is. Good, because we’re amped to show you the ins and outs of our groovy Templating feature so that you can make your forms more personal in a (sometimes) impersonal digital world. So Templating…What are we talking about exactly?

Let’s go back to the world of [event planning](http://www.wufoo.com/gallery/templates/invitations/birthday-party/) and RSVPs, shall we? Say you’re following the advice of our fellow tips blogger, Kane, when planning that wedding extravaganza. You’re using Wufoo to rush along the invite process so you can dish out that delish free food. Being the planning pro that you are, you want to confirm your guests’ RSVPs with a message that includes what meal John or Sally chose, which inbox to check for the confirmation email, and (just for the fun of it) their specific ID number.

We’ll use Templating to make all of this happen! Seriously–it’s fast, easy and fun.

Okay…but how?

First: the form. We’ll follow Johan’s [guidance](http://www.wufoo.com/2014/04/04/back-to-basics-part-3/), and set up the entire form first. A few fields to ask who they are, if they’re coming, their preferred menu, and if they’ll bring a plus one:

We’ve set up a few field rules so that we can dynamically show follow-up fields based on the user’s response. What’s a Wufoo form without some Wufoo magic?

Now, here’s the really fun part. We’re going to set up a confirmation page specific to each user’s RSVP, which includes all of the details they just typed in.

1. Find your Field IDs

There are a couple of links that will always pop up when you set up your confirmation options–whether it’s a redirect, a confirmation email, a notification email, whatever. The two links you’ll see are known as Templating Options, and Template Tags (aka API Settings):

Templating Options will take you to our Help page on the templating feature, and Template Tags will take you to the “key” for the field identifiers in your form. Now, here’s the key for the form we just created:

In your case, we’ll want to use our friend’s first name (field 1), their email address (field 5), and their chosen menu (field 6). We’ll also use the entry ID, since we want the user to know their place in the list.

2. Plug in your Template Tags

When you’re putting together your templated text, the default format for a template tag is {entry:Field#}, where “#” is the number of the field I want populated. This changes a bit for “system fields” like the entry ID, but still the same idea: {entry:EntryId}. The tags are case-specific, so make sure you type it exactly as it appears!

Here’s the code you’ll use:

Awesome, {entry:Field1}!! We are so excited to see you on our special day. We’re sending the full details to {entry:Field5} as we speak.

We’ll see you July 20th—come ready to eat {entry:Field6}, show off your epic dance moves, and make totally merry with us.

PS. You’re #{entry:EntryId} on the guest list.

3. Sit back and watch the magic happen

Here’s the confirmation page I see after I RSVP:

And that’s all there is to it. Each new user to fill out your form will see a confirmation page tailored specifically to them–spooky fun, right?

You can also follow the same concept in confirmation emails, form rules, notifications of new entries, or (to a limited degree) redirects to another site. Outside the world of the hallowed RSVPs, just think of all the other possibilities–order numbers, event registrations, mad libs for your friends…we could go on and on.

I’ll be keeping a hawk’s eye on the comments below for brainstorming of cool ways to use templating in your form. Feel free to drop any questions you might have below!

Comments

  • Hi, Great article. What I am wondering is can you use the fields as someone is entering the fields. So if i have a form that has two pages, on the first page are the fields and then on the second page I want a page that the user can review what they have entered before submitting the form. So I tried using a section break field and entering Your name is: {entry:Field1}. But it does not work. Is there a way of doing this? As i know once the user goes past the first page the fields are saved to the database. As it would be good for teh user to check waht they have entered before submitting that way they can go back and make changes before submitting.

    Posted June 3rd, 2014 by Lee.

Add a Reply

You may use HTML for style.