Embedding forms on your website is usually pretty easy. Create the form, copy and paste some code, and presto-chango, there’s your form.
There’s just one, really enormous problem: the forms often end up looking terrible.
We’re talking 21st birthday, “Have another tequila shot, it’s good for you,” mind-blowing hangover the next day. Just not good.
Usually, they’re not formatted correctly, they don’t scale, or they add ugly scrollbars to your page and make the user work inside a tiny box.
One of the worst offenders is, oddly enough, Google Forms. We’ve heard many-a-people complain about how they look when they’re embedded and how un-functional they can be for the user.
Something like this:
When it comes to embedding forms on your website, Google Forms is incredibly restrictive when it comes to design - which means a form that just doesn’t play nice with the rest of your site.
Ultimately, it means that at the exact point at which you need a response, your visitors are suddenly jolted from your trusted and enticing brand into a stark nomansland.
Dare they step any further into the abyss?
And truth be told, most other form builders aren’t much better. Unfortunately, they almost always emphasize functionality over aesthetics. In other words, you get a form that works but is also an eyesore.
Of course, Google is great at a lot of things. (Like, most stuff, in fact).
But, they’re not exactly winning any awards when it comes to creating embeddable forms for your website. And they're not the only ones - most form builders struggle here.
So what other options do you have?
In this post, we’re going to break it down for you, step-by-step. We’re also going to show you how to create and embed forms that are...wait for it...actually pleasant to look at, and get you a much better response rate as a result
Yes, it’s a bold claim. But we can back it up.
There are a lot of things that can go wrong when you’re trying to embed a form (from a different website) into a page on your own website. However, there is one big, overarching problem that impacts just about everything else.
That problem is called iFrames.
An iFrame (Inline Frame) is a small bit of HTML code inserted into a webpage. Most of the time, iFrames are used to insert content from another source, like a video or ad or form.
As you would expect, just about all form builders use iFrames to embed forms on your site.
The big problem with iFrames is that they can create a horrible user experience.
They’re usually a fixed size, so if the content inside the frame is bigger than the amount of space given to it, then the frame will scroll separately to the rest of the page (which feels like a prosthetic limb). Couple that with the fact that they behave very differently on different browsers, the usual experience of a form in an iFrame is gross.
We’re a smart lot here, but we can’t fix everything that’s broken on the internet.
The truth is that Paperform also uses iFrames--kinda. We just do use them in a way that makes them much, much better for the user.
For one, they resize auto-magically to only take the space they need to display the form, without scrolling separately.
We built Paperform to enable you to quickly and easily create forms that look really good. This means that in addition to being able to easily include surrounding text, photos, videos, and a vast color palette into your forms, you can also embed them on your site in a way that preserves their aesthetic.
After all, what good does it do if you create a gorgeous form and then it looks like something spewed out by Microsoft Paint when you embed it?
Creating and embedding a beautiful form is really simple. You can start with one of our pre-designed templates or from a blank canvas. We support, full-embeds, inline embeds, pop-ups, and even oEmbeds.
For the sake of this article, we’ll show you how to get started from scratch (it’s even easier when you use a template).
When you create a new form, you’re given a gloriously-blank canvas to work with.
We want to figure out why Nicolas Cage’s acting is so bad, so we’re going to start with a title/headline.
With a simple click, we can add a header and our first question, which will be multiple choice.
Next, we’re going to include a brief clip from National Treasure to refresh people’s memories. We simply paste the YouTube URL and Paperform automatically imports it.
We’ll add two more questions for good measure, and then we’ll be done. This entire process took approximately ten minutes.
We’ll add a few final meta-details to the survey, and then we’re ready to embed. This is the section where you also add payment methods (if you’re accepting payments).
It’s also where you can add Google Analytics tracking, as well as Facebook pixel if you want to retarget traffic or monitor conversions.
Once someone completes the form, we can send them a confirmation email, redirect them to a success page, push them to another page on our website, or send data somewhere else through webhooks and integrations.
We’ll quickly create a success page.
Finally, we’ll use the “Inline embed” function to quickly put the form on a web page.
We could also use the “Full screen embed” option to have the form fill the entire screen, or the “Popup embed” to have the survey popup when someone visits the page.
Hit “Publish,” and your form is ready to go. Notice that it looks exactly like we designed it. No iFrame weirdness or ugliness. In just a few minutes, we created and embedded a form that actually looks good.
Few things hurt your brand more than an ugly website, and few things make a website ugly like a form that looks like it got there by accident.
Don’t make your website ugly. Quickly create and embed beautiful forms with Paperform.
You and your website will thank us.
Ready to start embedding beautiful forms on your site? Try Paperform free for 14 days—no CC required.
Learn how to organize amazing events with $0 budget.
We applied psychology, UX principles and marketing tools to give you our 6 top tips for creating user-friendly Shopify forms.
Measuring CES can help you identify ways to boost loyalty and opportunities to serve your customers more effectively.
The speed of innovation in the web development space is accelerating every year. In this piece we’ll review 36 of the most used and loved web developm...