12 Jun in  Working with PDF

PDF Forms: Everything About Fillable PDF Forms

 

PDF-Forms-Everything-About-Fillable-PDF-Forms-thumbnailPDF-Forms-Everything-About-Fillable-PDF-Forms-thumbnail

 

Today, we’re going to cover the ins and outs of PDF forms. We mean EVERYTHING.

 

What are they? How do they work? How do you create your very first form? What are the best practices? 

 

We know this is most likely one of the most exciting days of your life. So please try to stay seated.

 

You do not need to be a computer expert or design whiz to create quality, aesthetically pleasing forms. Anyone with even basic computer knowledge can use this information to create awesome forms with Soda PDF.

 

First, What Are PDF Forms?

 

PDF forms are a critical point of interaction between a user and a website/application.

 

They are an element that captures user information. Name, age, eye color, offshore bank accounts in the Cayman Islands (nice try, not falling for that one again)—you name it.

 

This information is then either sent away for storage or used immediately for modifying the interface in some way. For example, the user may select an answer from a drop-down menu that triggers another element to appear.

 

Forms are usually made of boxes or dropdown menus and could even feature checkboxes, radio buttons, or submit buttons.

 

All of this form wizardry is powered by HTML. Let’s take a quick detour and cover that quickly.

 

Hypertext Markup Language (HTML)? What in the Name of PDF is That?

 

HTML is a MARKUP LANGUAGE. It IS NOT a programming language.

 

A markup language is basically just a language that tells web browsers how to display pages to visitors. In other words, it’s what makes content on the web look nice instead of a The Matrix-esque series of tags, numbers, and letters.

 

 

HTML is actually a fairly simple concept at its core. It’s just a system of elements (more on this in a minute) used to “wrap” certain parts of a web page. When applied, these elements tell the content to act a certain way. 

 

THIS TEXT IS BOLD because a little <b> HTML tag tells it to be bold (and brave!). 

 

OK, where were we? Oh yeah, forms.

 

How do Forms Actually Work?

 

OK, so without getting too technical, let’s run over the basics of how forms work in PDF.

 

All forms start with a <form> element. This is a container element specifically for forms (surprise!).

 

This is where the controls are placed. Here’s how a form with a “customer name” box would look:

 

 

Forms are made up of one or more “form controls.” For simplicity’s sake, let’s call these widgets. Widgets, in this case, are just different “parts” of the form. Some common widgets are:

 

  1. Radio buttons
  2. Checkboxes
  3. Lists
  4. Textbox
  5. Toggle
  6. Text area (This creates a big box that the user can write in)

 

These widgets are represented by the <input> elements (visible in the example above). This, by default, provides a one-line text field. If you want to add a label, you use the <label> element.

 

Still with us? We know how exciting this is.

 

Building your form is as simple as adding the widgets you want. Here’s a great example from W3.org of a form for ordering a pizza.

 

 

This form allows the customer to enter their name and then choose a size for their pizza. Adding a <fieldset> tag cordons off the size options into a separate field.

 

Notice how the Small, Medium, and Large options are each given a common name “size” so they function together? 

 

Also, notice that they’re radio buttons. Here’s how they’d look on your PDF form in Soda PDF:

 

 

Here’s how the contact section would look:

 

 

 

OK, let’s move on to building your first form.

 

How to Build a Form From Scratch

 

Building a form starts with using the <form> element.

 

 

It’s standard practice to define the action (where the info will be sent) and method (how the info will be sent) attributes too. Like this:

 

 

From there, you add the widgets you want: <input>, <textarea>, <button>, etc.

 

Like so:

 

 

Mozilla’s example here uses the <label> element to call the text box “name.” Then <input> to add a single-line text box. It’s actually very straightforward.

 

Just label the input whatever you want to call it, then add the input itself—in this case, name, email, and a text area for people to write in.

 

Remember: It’s best to keep your forms simple and short. The longer your form, the more likely you are to frustrate and lose users.

 

Note on Sending Form Data…

 

Sending form data is an extremely complex topic and definitely beyond the scope of this article.

 

The skinny of it is that your form must be told where and how to send the data it collects. This is done via the action and method inputs. To learn more about the topic, check out Mozilla’s article.

 

Forms Best Practices – How to Build Awesome Forms

 

Let’s pause for a second. You now know:

 

  1. How forms work
  2. The underlying mechanism that makes them work
  3. The basics of building a form
  4. What a pizza ordering form would look like

 

Now that you’re basically a professional form maker, here are some tips for making killer forms.

 

Did You Know?: Expedia.com discovered that its form design was costing the company $12 MILLION dollars per year. Dropping the “company name” form field resulted in a $12,000,000 boost to profit, according to Conversion Voodoo and Hubspot.

 

  1. Keep it Simple

 

The more fields your form has, the more complicated it becomes. And the more complicated it becomes, the more your users hate you.

 

One company reduced form fields from 11 to 4 and saw an increase in conversions of 120%. Only include necessary fields.

 

  1. Do Not Ask For The Following…

 

Age, address, and phone number.

 

Asking for these things results in a marked drop in conversions, sometimes as high as 5%. Asking for a number implies that your user will be called. People do not want that!

 

Only ask for this info if it’s absolutely necessary.

 

  1. Use a Single Column Layout

 

Single columns are much faster to fill out than double. In fact, they save users about 15 seconds! Don’t waste any of your user’s time!

 

  1. Ask for the Easiest Information First

 

Arrange fields from easiest to hardest. What we mean is, start with name and email before asking for credit card details. You want your user to be invested in the form first before handing over sensitive information.

 

  1. Make Buttons Buttony

 

For some reason or another, people get this wrong. Add some shade to buttons to make them look buttony, and don’t make them too big or else they won’t look buttony anymore. This is a very simple fix that could result in a huge spike in conversions.

 

  1. Give Your Form a Clear Title

 

A clear title says to the user, “This is a form. Fill it out.” The title could be as simple as “Sign up for our free newsletter!” or “Order your pizza!”

 

  1. Address Objections

 

It’s a good idea to address objections in a message box. For example, if a user has to enter their birthday, explain why. If you need their address, tell them why you need it and that you won’t be sending any spies to film them!

 

PDF Forms With Soda PDF: The Easiest Way to Build Forms

 

PDF and forms are a match made in heaven.

 

Especially Soda PDF.

 

PDF is designed to maintain its integrity and prevent any changes to the data therein. Plus, PDFs can be stored, shared, and protected electronically, drastically improving communication and security compared to paper.

 

The downside is complexity. Even creating a basic form requires knowledge of HTML, a bit of coding savvy, and at least a few hours of tinkering, debugging, and smashing the keys.

 

Not with Soda PDF. We’ve taken the painstaking process of creating electronic forms and turned it into a matter of a few clicks. You’ll spend more time deciding which buttons to add to your form than actually creating it.

 

Here’s how…

 

Just click on FORMS at the top and voila! You’re given tons of awesome options:

 

 

The most common options are:

 

  1. Highlight Form Fields
  2. Text Field
  3. CheckBox
  4. Radio Button
  5. List Box
  6. Combo Box
  7. Digital Signature

 

Once you’re done creating your form, add a push button to send it off. Your options are:

 

  1. Submit
  2. Save
  3. Print
  4. Email

 

Here’s a quick example of what a basic form would look like:

 

 

And all in less than 2 minutes!

 

Pretty cool, right?

 

With Soda PDF, you can start making your first forms with a FREE download of our desktop application, or try one of our many online PDF tools directly from your web browser. Get a taste for our software solution today!

Add your comment



Your e-mail will not be displayed




Like this blog? Spread the word!