Home | Forms | CSS Examples for Styling Forms, Surveys, and Subscription Pages

CSS Examples for Styling Forms, Surveys, and Subscription Pages

The ClickDimensions web content editors allow users to make a number of stylistic changes, such as changing the field layout, font colors, font type, etc. However, adding CSS to your record allows for many more styling options in addition to what is provided out-of-the-box. The following example CSS can be added to your form in the code editor or your survey or subscription page in an HTML component in order to modify your record’s style.

Change the Font Type to a Font that is not Provided Out-of-the-Box

The fonts we provide are web safe fonts, which are generally recognized across all browsers and email clients. If you want to use a font that we do not provide, you can do so by adding the following CSS:

Pic1
Please note that if you choose a font that is not widely supported, any browsers or email clients that do not support the font will change it to something else, such as Times New Roman. The benefit of using the font family property is that it allows you to list several fonts, and if the first font in the list is not supported, the second will be used and so on. The helps maintain control over the page’s style in the case where your font choice is not widely supported. The !important at the end of the font family attribute indicates that this CSS should override the default font value we already have in place for the web content record.

Change the Background Color

Add the following CSS to set a custom background color:

Pic2

In this example, RGB represents the rgb (red, green, blue) color encoding values for the color you want to use. In this color encoding style, each of the three values can be a number from 0 to 255, and each represents how much red, green, and blue is in the color respectively. Rgb(0,0,0) is black, rgb(255,255,255) is white, and every other color, such as the blue in the example, is something in between. You can also use a hexadecimal value for your color or use some generic color names, such as red.

Make the Background Transparent

You can make the background of your form transparent by setting the color as “transparent” instead of a specific rgb or hexadecimal color value.

Pic3

In this example, the page the form is embedded on has a parchment texture background image.

Round the Corners of Fields

Add the following HTML to round the corners of your fields:

Pic4

The greater the number you set for border-radius, the more curved the corners will be.

Add Extra Space between Fields

Add the following CSS to increase the amount of space between fields.

Pic5

This CSS is actually adding space above the label on the field, which pushes the fields further apart. If you want more space between the label and the field, you can use the property padding-bottom instead or padding-top.

Any of the examples in this post can be combined for use on the same record, and there are many other CSS styling options beyond what is covered here. Take some time to experiment and see what works for you!

About the Author:

mm
Rhys Saraceni is a Training Developer at ClickDimensions.

6 Comments

  1. Amy Reed November 30, 2017 at 1:34 pm - Reply

    Has anyone formatted a form as a modal box. Is there standard CSS code for this at Click Dimensions?

    • mm
      ClickDimensions Marketing December 7, 2017 at 7:23 am - Reply

      Thanks for your question, Amy! It inspired one of our team members to write a blog post about that very topic. Stay tuned!

  2. Kamil Kleczewski August 23, 2018 at 7:46 am - Reply

    Does it work with iframe – I tried to change fonts to google one in a form in Code Editor, but without success?

    • mm
      ClickDimensions Marketing August 23, 2018 at 2:55 pm - Reply

      The iframe shows the existing frame in a window embedded into another page, so anything that shows up in the editor should show up in the iframe. If it isn’t working for you, the issue could be:
      A) Your CSS is incorrect.
      B) Your browser doesn’t support the font you are trying to use.
      C) There’s a caching issue and the changes will show if you either remove the iframe and re-add it or clear your cache.

  3. Philip December 3, 2018 at 10:30 am - Reply

    I’m embedding forms on a HubSpot hosted site. Is there any way to decrease the space between fields if I have my fields formatted into two columns as opposed to one? My client has some very long forms and wants the fields stacked side by side. When I do that, the web-responsive aspect of the form designer kicks in and shifts the fields into a single column, which looks bad. I have a pixel-width limit to work within for this particular webpage (486px wide). When I put the fields side by side, it exceeds this width and shifts them into a single column. If I could reduce the space between the fields, this problem would be solved. Any ideas?

    • mm
      ClickDimensions Marketing December 5, 2018 at 9:49 am - Reply

      One possible solution could be to disable the form’s web responsiveness to prevent the fields from automatically rearranging. You can set web responsive to “no” on the form’s web content record in CRM, then save and publish the change to have it stop resizing the form.

Leave A Comment