Embedding Google Forms Not Displaying Well? Here’s What to Do Instead

/ user experience
Stephen Altrogge

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.

Why Embedding a Google Form May Not Look Great

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.

The Paperform Solution to Embedding Forms

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.

The primary method for embedding Paperform forms on your site is Javascript, which still uses an iFrame under the hood, but lets us work around the things that make iFrames such a sucky experience.

For one, they resize auto-magically to only take the space they need to display the form, without scrolling separately.

If, for some odd reason, you can’t use Javascript, Paperform does also have the iFrame option as a backup, but it’s one of those, “For Emergency Purposes Only,” kind of things.

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?

Embedding With Paperform

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.

In WordPress, it’s simply a matter of creating a new page and then pasting the Javascript in. It’s really that simple.

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.

Don’t Make Your Website Ugly

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.

Try Paperform Now!

14 Day Free Trial, No CC Required

How To Shape The Ideal Workplace Culture

Here are a few ways your company can shape the ideal workplace culture.

Gabi Theard

How To Sell More: 10 Effective Cross-Selling Examples

Cross-selling is a surefire tactic to increase e-commerce revenue and AOV that's been adopted by many vendors online.

Justina Bakutyte

How To Stay Ahead Of The Curve With Competitive Pricing

Learn how to leverage competitive pricing to stay ahead of the curve.

Basak Saricayir

How To Get Your First 10,000 Followers On Instagram Without Spending A Cent

10,000 followers: it’s a major milestone for most brands on Instagram. Here's how you can get there without spending a cent.

Emma Norris