Getting Sneaky With Hidden Fields

Hey friends, today let’s check out one of our super-useful CSS Keywords: the hide keyword.

In case you haven’t come across CSS Keywords yet, they are simple CSS classnames which you can include in the Field Settings for a field on your form. The keywords will help you easily take advantage of CSS styles that come pre-loaded in your Wufoo form.

A couple of examples are leftHalf and rightHalf for putting fields into separate columns, and scrollText for setting a fixed height on a Section Break.

But the secret agent of the CSS Keyword realm is hide. When you hide a field, it’s still there on your form, but the person filling it out will not see it. (For you CSS experts out there, it uses {display: none} to stay invisible.)

Here’s an example form where we’re using the hide keyword — it’s a secret agent signup form. See where we added hide to Add CSS Layout Keywords at the bottom?

Now check out the Predefined Value setting above. If we had made the field an Admin-Only field, this wouldn’t work. Data can only be added to an admin-only field if you edit the entry in the Entry Manager. But this way, when we get a prospective secret agent signing up on the form, that value will get populated with the entry.

But what if we want to embed our signup form on several different sites, and track where we get signups? Using a Predefined Value will not work, because it’s set in the form builder. We need something that will load a different value for each page where the form is embedded.

Enter the URL Modifications feature.

With URL Modifications, we can predefine a value for that field, directly in the embed code. So if we have a page on our site about James Bond, and a page on our site about Jason Bourne, we could embed the signup form on both pages and track which entry came from which page.

Here’s what your code would look like. Check out the defaultValues line that we’re using to populate our field.

So here’s our actual embedded form, with “James_Bond_page” inserted in the hidden field. Go ahead and fill it out! You don’t have to use your real name, obviously. (First person to fill it out gets to be 007. Just sayin.)

Posted in Tips & Tricks | Post a Comment

Customer Spotlight on Bizness Apps: Why the App-Maker Uses Wufoo

Our fancy Wufoo spotlight’s shining bright today on Bizness Apps—a do-it-yourself app-maker platform for small businesses that lets you make beautiful apps without any programming needed. Andrew Gazdecki, founder and CEO of Bizness Apps and Bizness CRM, is here to talk about why they use Wufoo.

Welcome, Andrew!

Use forms, sell more? Yep, it’s that simple. At least, it was for us.

Over at Bizness Apps, we build mobile apps & mobile websites for small businesses. And when someone visits our website, one of the first things they see are a few blank fields for additional information about our service. One for their name, their email, and their phone number. If they enter that info and click “Submit,” guess what happens?

We get a lead! Nice!

You see, we like getting those. I mean, really like. In fact, my sales team tells me that if we don’t get any of those, our business would actually die. What a bummer, right?

Okay, in all seriousness (in case you hadn’t guessed), the critical entry point for our sales funnel is a super-simple Wufoo form. And even though it’s simple, it is absolutely critical to our enterprise.

Not only do we get the vast majority of our leads from it, but it also provides excellent analytics for page conversion rates, visits, and leads. That is, it feeds our business, but also provides us with highly useful and actionable information that we can use to improve our offering on a regular basis.

Without the insights provided by our Wufoo forms, it would be much harder to judge the effectiveness of our pages and tweak them, when necessary.

Wufoo also is great for the creation of simple forms that we embed into emails. And cross-platform support is excellent. Time after time, we find that the forms we create function smoothly and look good, even in our mobile apps and mobile websites. Simply put, we couldn’t live without them.

“But what about the alternative?” you say. “You guys are developers, why not make your own darn forms? They’d be totally customized.”

Personally, I don’t think it’s at all desirable. We could build forms ourselves, but it would be time-consuming and costly, and would require us to reinvent the wheel.

Wufoo already has a huge library of forms, and tons of expertise is now baked into their product from repeatedly implementing it across a variety of websites. Why would we want to start at zero when we’ve already got something ready-made and smoothly functional?

Form building involves a number of different projects from coding, to organizing and presenting recorded data, to generating reports, and more. Wufoo is already 100% done.

We’re happy to have the finished product handed to us without having to go through the pains of development ourselves, thank you very much!

Want to learn more? Head on over to Bizness Apps and don’t forget to leave us your questions and comments below!

Posted in Case Study | 1 Comment

Need a Price Quote? Here’s How with Wufoo!

Have you ever wanted to use Wufoo for a quote or invoice form that shows a Running Total of charges but does not require payment at the end? Today, I’ll help you accomplish this masterful hack!

This will require a bit of a fake-out to the system. Essentially, we’re making the system think you’ve integrated for payment so that you can show the running total box on the form. On Submit the person will be skipped to the Confirmation page. Note: You’ll need to be on a Bona Fide or higher plan to use this hack since it uses a payment integration.

Form Setup

You’ll start with a Page Rule.

Create a rule that will always be true and which will result in a Skip to Confirmation action. For example:

Here’s a solid Page Rule you can use:

If *Email is not {leave this blank}, then Skip to Confirm:

*Since the email field is a required field then it will never be blank. This means each entry will be skipped to the Confirmation page on Submit.

The Fake Out

Click on the Payments button in your Form Management options. Simply add your email in to the PayPal Standard setup and then be sure to Assign Prices to each of the field selections. (Note – you do not need a PayPal account for this. You just need to add an email address to the Merchant Setup so the system will accept the integration setup and Save Settings).

Custom Quote

We’ll use the custom confirmation email to provide the purchase total/quote. Go to Form Settings and click on Customize Confirmation Email.

Add your custom text. I’ve used something we call Templating to pull data in from the entry including the person’s first name and the Purchase Total.

Here’s a look at what you should expect to see:

Here’s what the customer will receive in their email inbox:

You can also set up a custom confirmation message to show when they submit the entry:

Check out the form in action here.

There you have it! With these step-by-steps in your pocket, you’ll be well on your way to Price Quoting with Wufoo like a champ.

Questions? Comments? Let us know below!

Posted in Tips & Tricks | 8 Comments

Sneak Peek: Wufoo Hackathon Projects

If you’re anything like us here at Wufoo, you know about the magical qualities of a) caffeine, b) working with amazing & talented people, and c) hackathons. We decided to combine all three and took some time from our regular scheduled day-to-day work to participate in the quarterly SurveyMonkey Hackathon.

We broke off into teams to spend a caffeine-fueled 26-or-so hours experimenting and developing ideas that we’ve been kicking around for a bit. And while these are hardly finished products, we thought it would be cool to give our loyal Wufoo customers (that’s you!) a quick glimpse of some of what we were working on. Think of it like a teaser trailer of things to come.

But first, a quick side note: we also had a side competition for best logo and we decided to go on a nostalgia binge and summoned all the 8-bit we could from within ourselves to come up with the logos for these projects. To help set the scene, we also had theme music, which you should now listen to courtesy of this awesome chiptuned track from Soundcloud. Trust me, it totally sets the mood.

CODENAME: WuBox

The first project was from Larry Kuang, one of the engineers on Wufoo. We’re all big fans of Dropbox here at Wufoo (we use it constantly for sharing files, docs, everything really) and thought Wufoo users might be, too. So Larry decided to take on the challenge and brewed up a quick integration with Dropbox and named it WuBox.

Instead of storing uploaded files from users who fill out your Wufoo form, we thought it’d be great if the file was instead uploaded to your Dropbox account. Perfect for freelancers to get images, logos, or other assets from clients right into their own Dropbox account.

Larry temporarily set Dropbox up as a notification partner integration which made it ridiculously easy to setup and get running. Add your App Key and App Secret, choose where you’d like filed uploaded to your form to be stored, and you’re done.

When a user uploads a file to the form, it’ll be automatically be uploaded to the Dropbox account for you to use, instantly.

WuBox and this integration isn’t ready for prime time just yet, but rest assured, we’re working on it and would love your feedback and comments about this so please let us know what you think.

CODENAME: WuSign

Next up was a collaboration between Chandra Nagaraja, Tom Slykhouse, and Adam Lichtenstein, three more engineers on the Wufoo team. They had an idea: wouldn’t it be cool to be able to add your signature to a form when you fill it out? That way, we would remove the need for people to print out PDFs or other forms just to sign it. Now you’d just fill out the form AND sign at the same time. They decided to build it and they named it WuSign.

When setting up your form and you want to add a signature field, you’ll be able to add a signature field type just like you would any other field types. Simply drag the signature field to your form, save it and boom. Your users will be able to sign their forms instantly. Best of all, the signature field works on mobile devices like your iPhone or other such mobile computing device, so it’s even easier to sign.

We think WuSign is really cool and there are a lot more technical and design hurdles we need to clear before it’s ready for everyday use, but rest assured that we’re working hard to make sure this is as easy to use as it is awesome.

We hope you enjoyed this sneak peek at our hackathon projects as much as we enjoyed working on them. Remember, this is merely a quick look at some awesome new features that we worked on for 26-or-so hours, so they are definitely not finished products.

We’re working feverishly to make these features as easy to use as possible and to put the final polish on them that you’ve come to expect from us here at Wufoo. It’s a quick preview of some of the many things we’re cooking up here and hope you’re as excited about them as we are.

Please let us know what you think in the comments below!

Posted in News & Updates | 50 Comments

The Secret Life of the Section Break - Part 2
Movies & Maps

Last time we covered how to use HTML in order to include hyperlinks and images into your forms. This time we explore some types of embeddable media that just might be going places on this fair Internet of ours… streaming video and interactive maps.

The key in making this work is the inline frame element, more commonly referred to as the iFrame tag. Inline frames can be used to embed not only content like videos, maps, & even Wufoo forms within an HTML file, but you can even embed other HTML files.

Adding Video

Sites like YouTube & Vimeo offer the ability to access and copy iFrame codes. By copying these code snippets and pasting them into your Section Break field you can display the video right inside your form.

Here’s an example on how to locate the embed code in YouTube:

1. Just below the video title and view count you’ll see a row of links. Click the “Share” link. This will present a shortened link to the video on YouTube as well as sharing options for various social media sites.
   
   

   

2. Mouse over, and click the “Embed” link.

3. Ta-da! It’s iFrame time. Here you’ll find the default iFrame embed snippet. YouTube will even allow you to customize features of the embedded video. Allowing you to adjust parameters such as display size and whether or not to have the video be served over https:// protocol.
   
   

   
   Special Note
   In Part 1 we covered how embedding non-https:// content in a form that is being served over https:// can trigger security errors in most major web browsers. In some cases even preventing the embedded content from loading. To remedy this you’ll want to make sure to check the https:// box before copying your embed code, especially if you’re on our Bona Fide or higher level plans.

4. Select & copy the iFrame embed code and then paste it within the instruction section of your Section Break field.
   
   

   

5. Click ‘Save’ and you’re good to go!

Adding Maps

To embed an interactive map is pretty much the same process! You’ll just want to be on the look out for the Share/Embed links, or even an image of a chain link. Here are some visual aids on where to find the embed snippets for the 3 major players in the Map game.

Google Maps

bing

MapQuest

Just as with the video embed, copy & paste the code into the instruction area of your Section Break. Save those edits, and bang-zoom you’re golden!

For more ideas on the types of forms you could use maps, you can head on over to our form gallery.

Have questions?

Feel free to leave a comment below or reach out to your friendly, neighborhood Wufoo support team!

Posted in Tips & Tricks | 7 Comments

Customer Spotlight on Rev: How a Tech Startup Uses Wufoo to Streamline & Simplify Services

Say hello to San Francisco-based startup, Rev. Their mission? Enable and empower work-from-home labor to flourish. See how Rev CFO and VP of Operations, David Abrameto, uses Wufoo to help increase their productivity and allows them to focus on growing their business.

Take it away, David!

As a co-founder, the CFO and VP of Operations, I wear a lot of hats here at Rev. Our company’s been in operation since late 2010 - having grown from a tiny start-up to a slightly less tiny startup with fourteen fulltime employees.

Currently, we offer two services, primarily for small businesses and consumers: Audio Transcription and Document Translation. Both services are done by our global teams of work-from-home freelancers.

My role within the Rev engine has many parts. These days I’m focused on Operations - improving turnaround time, quality, and consistency. This involves everything from improving the customer experience on our website to managing how we attract, hire and manage our freelancer workforce.

How are you using Wufoo?

Recruiting, recruiting, recruiting. This is where Wufoo’s stepped up to the plate for us. With their awesome and easy-to-create forms, our audio transcription and document translation services can collect job applications hassle-free.

Who is using Wufoo in your organization?

Our recruiter is the one who evaluates all candidate applications through Wufoo every day. With the Wufoo API, we’re able to bring all the form data into our own system so we can use it there. We’re then able to customize it in order to fit into our recruiting workflow. Which leads us right to…

How has Wufoo changed your workflow or the way you do business?

Well, pre-Wufoo, we had to use our email inbox and a spreadsheet to help manage our application submissions which got to be pretty inconvenient. Wufoo has made it so much easier to manage inbound applications, especially as our volume continues to increase. Also, using the Wufoo API has meant the death of the dreaded manual data entry. We’ve cut it out completely from our new account creation process which has saved us precious time not to mention our sanities!

What’s been your favorite Wufoo experience?

Definitely how we’ve used the API to automatically pull data from our application forms into our own user management system. It’s cut down on the manual labor needed to manage our recruiting process in a big, big way.

Anything else?

Here at Rev, we’ve only just begun to scratch the surface of how we can use Wufoo in the future.

High-five to you, David and your entire Rev team! Thanks for sharing your experience with us.

Check out Rev if you’re interested in more information about their powerful audio and business transcribing services.

Posted in Case Study | 1 Comment

Keep Your Sales Leads On the Right Page with OnePage CRM & Wufoo

Everyone loves to be on the same page, right? Right! Especially if you’re a small business owner when you need to make sure the folks on your team are all in sync with your customers’ needs. You already know that keeping track of new sales leads can mean the difference between sinking or swimming and so our latest partnership with OnePage CRM - based in Ireland - makes us feel pretty lucky indeed (we couldn’t resist!) over here at Wufoo.

OnePage CRM gives you a clean and simple interface to work with that lets you focus on what really matters in your business - sales actions. With the added punch of our Webhook API, you’ll have more than luck on your side when it comes to capturing those leads.

To Use This Integration

1. You’ll need an account with Wufoo and one with OnePage CRM. Wufoo has both free and paid plans and click here to see which of OnePage CRM’s plans will work best for you.

2. Create a form in Wufoo and you’ll see that OnePage automatically matches the standard Wufoo fields. You can also add existing Custom Fields as long as you match the fields’ labels in both apps.

3. Connect Wufoo to OnePage CRM. Head to Wufoo > Forms > Select form and click on Notifications for this form:

Send Notification to Another Application and select Webhook from the dropdown then click “Add integration”:

Next, go to the Wufoo configuration page back on OnePage. In Step 2 below, you’ll need to copy both the Webhook URL as well as the Handshake Key.

Return to your Wufoo Notification Settings page. Paste both the Webhook URL and the Handshake Key you copied from OnePage into the Webhook URL and Handshake Key:

Be sure to check the box labeled, “Include Field and Form Structures with Entry Data”. Then click Save.

Configure data capture in OnePage CRM. You can set the default parameters for leads gathered via web form:

You’re all set! Need another run-through? Watch the video below:

Highest of high-fives to Anna Narolska-Cielecka from OnePage CRM’s dev team for getting this integration together. If you’re looking to integrate your web app with Wufoo, be sure to check out our Ultimate Guide to Integrating with Wufoo.

Posted in API, Integrations | 4 Comments

Strikingly & Wufoo Give Your Forms a Beautiful Place to Live

Quick? Simple? Stylin’? We’re definitely down with all of that jazz over here at Wufoo and so we’re pretty darn delighted to bring Strikingly on over to our integration party! With Strikingly, you can create a (yep) striking mobile optimized website in mere minutes - no fancy coding skills required. Sound familiar? We thought so too.

Using our handy-dandy Wufoo Form Embed Kit, Strikingly gives your Wufoo form a beautiful place to live. Their professional, elegant designs will set you apart from the rest. Don’t just take our word for it either, check out this stunner of an example here.

To Use This Integration

1. You’ll need an account on Wufoo as well as one on Strikingly. Wufoo has both free and paid plans. *You’ll need to have a Pro account at Strikingly in order to use the Wufoo integration.

2. Add a new section to your Strikingly site by clicking on the “Add new section” button in the left editor toolbar.

3. Select the “App Store & HTML” section. Click on the Wufoo Form app icon and a popup will direct you to login or create an account with Wufoo. Once you’re logged-in, you’ll be able to create and edit your forms. Once you have a form, click “Insert” to add it to your Strikingly site.

Want a visual step-by-step? Watch the video below:

And there you have it! You’ll be on your way to big and beautiful things in no time. Many thanks goes to Dafeng Guo and Teng Bao for striking up this integration. Looking to integrate your web app with Wufoo? Take a look at our Ultimate Guide to Integrating with Wufoo.

Posted in API, Integrations | 2 Comments

Over 90 New Templates Added to Wufoo Form Gallery!

One of the most popular parts of Wufoo is our Form Gallery. For several years, we’ve offered high quality form templates in 12 different categories that can either be installed directly to your Wufoo account with a single click or downloaded as a zip of just the HTML markup and related CSS files. Our premade templates and themes have been downloaded over 13 million times and we’re really excited to announce that we’re expanding it!

We’ve added over 90 new templates to the gallery and we think you’re really going to love them. Obviously, we can’t highlight all of them in this blog post, but here’s a few we thought were worth highlighting:

• Wedding Planning Survey
• Product Evaluation Existing Product
• Non-Profit: Volunteer Interests & Skills
• Fundraising Ideas
• Community Satisfaction
• Marketing Planning Survey
• Employee Satisfaction Training Development
• Win/Loss Survey: Business Lost
• Hypothesis Testing Research

Keep up to date and get the most out of Wufoo. Sign up for the Wufoo newsletter.

Posted in News & Updates | 4 Comments

The Secret Life of the Section Break - Part 1
Hyperlinks & Image Embeds

The Section Break field’s potential is often overlooked so we’re here to give it the attention it deserves! At first, it may seem as if it’s another means of displaying instructions or text, like in our example of using a Section Break with CSS Keywords to accept terms of service. But! Did you know that the humble Section Break field can also be used as a way to insert hyperlinks, images, maps, and even streaming video into that fantastic form of yours? With a little bit of basic HTML knowledge in hand, you’ll soon be on your way.

In this installment we’ll cover how to make clickable links and add additional images to your forms. And awaaay we go…

The Method

Adding hyperlinks or images to your form is a snap, and there are a bunch of areas where they can be included:

• Form Titles
• Form Descriptions
• Section Break Fields
• Field Instructions
• Confirmation Messages
• Confirmation Emails

Here’s an example of HTML used to create a hyperlink:

<a href="http://wufoo.com" target="_blank">My Link</a>

When you add the link to your form you’ll want to swap the URL you’d like to link to in place of the Wufoo URL within quotes. Adding those <a> </a> tags around any words or phrases turns them from regular old un-clickable text into a clickable link.

Also, the target=”_blank” portion will ensure that the link will open in a new window. Change your mind? Simply remove that part from your link.

Example of an HTML image tag:

<img src="http://example.com/puppy.gif" width="304" height="228" />

Similar to the hyperlink, you’ll want to include the URL location of where the image is hosted. You can host the image on your own server or if you don’t have your own server you can use a free image hosting site like Photobucket.

It’s good practice to adjust the height and width of your embedded image to better fit the surrounding area of your form. Additionally, if it’s a larger image you may want to scale it down in size or crop it. There are many open source image editors as well as web based tools that can help you accomplish this.

Creating a clickable image!

It’s even possible to wrap your image embed code with hyperlink code to create a clickable image like in this example:

<a href="http://daftpunk.com/" target="_blank"><img src="http://i.imgur.com/ecTVwDZ.gif" width="500" height ="262" /></a>

Which gives us:

A Caveat

While including HTML tags in your form can allow for some extra pizazz, you’ll want to make sure that your tags are properly closed. For example, if a closing </a> is missing from your code it can cause some weird results within the Form Builder as well as your live form. Weird how? Weird as in causing the code that runs the builder to think that every bit of text from where you’re adding your link down is part of the link itself.

Most often, any weird behavior from the builder can be traced back to an unclosed HTML tag so that’s where you’ll want to look first.

Forms with SSL

If you’re on a Bona Fide or higher level plan that includes the SSL feature you’ll have an additional consideration. Web browsers will trigger security warnings if any embedded content—images or video—within an SSL enabled page isn’t also SSL secure.

If you’re hosting images on your own server, and that server is SSL-enabled, you can edit the image url to https:// in your link. There are also services that provide secure image hosting, but typically for a fee.

However, if it’s a form where you don’t need the SSL encryption, there’s a way to turn it off. We have instructions on how to do that here:

Posted in Tips & Tricks | 9 Comments