Using HTML/CSS to make stunning Paperform forms that do even more

/ paperform
Dean McPherson

We offer HTML/CSS as a feature of our Paperform Agency plan. These features allow you to have the highest level of customization for your forms. From using your own fonts to embedding widgets, we're unpacking these a little more to help you make the most of them.

What's this HTML/CSS thing?

HTML (or Hyper Text Markup Language) is the langauge used to structure and create content on a webpage. Headings, text, images, videos embeds and more are written in HTML.

CSS (or Cascading Style Sheets) is a language that is used to describe to browsers how HTML should look. This can be used to control the position, color, borders, shadows, fonts and lots lots more.

On the Paperform Agency plan, you can add your own HTML and CSS to take control of the page. Here's a quick rundown of some of the great things you can do with HTML/CSS.

What sorts of things can I do with HTML/CSS?

Embed third party widgets

Embedding third party widgets is easy with HTML support. Simply click the "Add HTML" option from the sidebar next to the selected line,

Screen-Shot-2017-11-22-at-1.57.52-pm

Then paste the third part embed script in the box for the HTML.

Screen-Shot-2017-11-22-at-1.58.58-pm

This makes embedding things like Tweets, Google Maps, Slideshare, Calendly or any third party embeds dead simple.

Using your own fonts

Custom CSS let's you take full control of the appearance of the page. Third party fonts can be added using the @font-face css property. Custom CSS can be inserted under the "Theme" section of the form editor.

Screen-Shot-2017-11-22-at-2.04.28-pm

You can read more about @font-face at https://developer.mozilla.org/en-US/docs/Web/CSS/%40font-face.

Changing the look and feel of Paperform forms

Sometimes you need the form to stand out in ways that are different. Custom CSS gives you the power to control everything down to the sizing of the padding, how thick the underline is beneath questions, the coloring of individual elements, and just about anything you can imagine.

Storm-Trooper


That Sounds Cool, But How Do I Get Started?

HTML and CSS look like pretty nerdy stuff, but they're not as hard as they seem. And, once you get the hang of them, you can do some incredible things. Here's some great resources to get started.

Courses

Resources

  • MDN Web Docs (https://developer.mozilla.org)
    A fantastic authority on web standards and compatibility.
  • StackOverflow (https://stackoverflow.com/)
    If you ever have a question or get stuck, this is the place to find the answers. A fantastic, helpful community of developers who answer questions.

CSS is accessible when using the Paperform editor - just go to 'Theme' in the topbar. Learn more here.

You can insert HTML by clicking on any line of a form in the Paperform editor, and then selecting 'Insert HTML' in the options to the left of the line. Learn more here.

Ready to create forms that get attention? Start a free agency trial now!

Try Paperform Now!

14 Day Free Trial, No CC Required

Best Items to Dropship Based on 2019 Trends & Market Insights

The world of eCommerce is rife with opportunity, but it’s also fiercely competitive. As a digital seller, in order to stay one step ahead of the compe...

Vrinda Singh

UX Design Portfolio: 6 Tips to Make Everyone Want to Hire You

With the competition for UX roles getting hotter everyday, your portfolio is a key way to stand out to prospective clients and employers. Here are our...

Vrinda Singh

The Art of Surveys: Types of Survey Questions & Their Infinite Uses

No matter what the intention of your survey is, the types of questions you ask have a huge impact its success. Here we break down the different types ...

Vrinda Singh

Bounce Rate: What It Is & How You Can Reduce Yours

Find out what a bounce rate is, what it means for your site and how you can reduce it.

Stephen Altrogge