CSS Forms

CSS general information

CSS classes in Sweet Forms - common classes for styling a form

Here is a list of the most commonly styled elements and their corresponding classes

Use the global CSS editor

Global CSS editor will apply styles for the whole form (for the specific form, not all the forms in the solution). This makes it easier to work with and apply CSS to your forms.

Why should you use the global CSS editor?

• You gather all CSS in one place - easier to manage
• You prevent common errors such as conflicting code - prevents errors
• It will keep all the description areas clear in the form - prevents a form from looking messy

Use the global CSS field

Where to find it?

You will find the editor under settings > CSS

How to add CSS to a specific page only

If you work with the global CSS editor and want to apply specific CSS only to a specific page, you can do it easily. Here is how:

1. Add a CSS class to the page you want to add specific styles for
2. Use that CSS class before the other selectors when you specify the CSS. However, remember that the .Survey class is always the first selector if it is specified in the class.

Structure the CSS and use comments

Structure the code with comments

When you write your CSS, you must organize it so that it is easy to read and work with. If someone else is assigned to continue to style your form, he/she should find it easy to manage your CSS. Structure your CSS with comments and make sections of CSS code that belong together.

Work and style with Dev Tools

Use Google Chrome’s Dev Tools

One of the easiest ways to style forms is with the help of Dev Tools (Google Chrome has the best at the moment).

1. Go into a test mode of the form and open it in a new window
2. Click F12 to open Dev Tools or right-click on an element and select ‘inspect’
3. Select and start designing an element
4. Copy the code and paste it into the CSS editor in the form

In Dev Tools, you can easily select an element and see the CSS code. You can even edit and preview CSS changes directly from Dev Tools. You can then take the edited CSS and copy it into your form CSS.

Responsive designing

Design for all screens

While Sweet Forms will be responsive by default, you should always check the responsiveness of your custom styles.

You will often have to create media queries for your custom CSS to look good on a phone or tablet.

A perfect example is the custom widths styles. See Custom widths for an example of two media breakpoints at 620px and 420px.

This will make the widths work properly in whatever resolution the form has.

Design for PDF

How to design PDF

In many cases, customers want the PDF version of a form to look in a certain way. Therefore, we need to be able to design elements in the form, especially for print/PDF.

One of the easiest ways of doing this is to use DEV tools and a code snippet that makes it possible to preview the form as a PDF directly in the browser.

Add CSS for print only

There are 2 ways of doing this. You can either use the print media rule in your code.

Or use the class .Print before the other CSS classes you specify.

Note

The .Print class is always on the same level as .Survey when you specify your CSS.

Preview PDF in the browser

We have a toggle button in the preview area for “Digital” and “PDF” in the form designer. While this gives you a hint of what the PDF will look like, we can see the more representable preview of the actual printed version of the form through the browser. Here is how:

1. Click the Test form button and open the form in a new browser window.
2. Open DEV tools with F12 (or by inspecting) and click the “Console” tab
3. In the text area, type in: model.Print.PrinterFriendly(!model.Print.PrinterFriendly()) and press Enter
4. Right-click the form and click the print option
5. Be sure that the Background graphics option is checked under “More settings”
6. Now, you will see almost 100% correct representation of the print/PDF version, including page breaks.

Note

If you use the print media rule, you will only see the styles if you right-click on ‘choose the print option’ in the browser.

Page breaks

There are 3 classes you can use to manipulate page breaks that are already included in Sweet Forms. Theses are:

1.page-break-before = the system will try to break the page before the element you put it on

2.page-break-after = the system will try to break the page after the element you put it on

3.page-break-inside = the system will try to keep all the content inside the element on the same page

CSS library - import Google fonts

Import Google fonts

How to import Google fonts into the form?

Sometimes you want to add a Font Family that is not included in Forms by default.

In some cases, you will need a Font Package from the customer and install it on their server (where Sweet forms are installed)

However, you can use Google Fonts if the font you want is published there.

1. Go to Google Fonts and select the font you wish to include in the form

2. Click “@IMPORT” and copy the code below

3. Paste the code at the very top of the code in your form

4. Now, you can use that font family for texts in your form

5. Result

CSS library - images and logos

Import and use Images and Logos

Note that in order to use the external image, you have to whitelist the URL for that image. To do it, navigate to Admin - Settings - Content Security Policy - Trusted Image Source and paste the image’s URL there. More than one image can be whitelisted.

The logo is visible at the top of almost all customer forms’ on the first or every form page.

There are many ways to do it, but the two easiest are:

1. Import from URL
2. Upload an image to Sweet and import it to the form

Import from URL - adding from URL is the easiest and fastest way to add a logo. However, if the logo is removed or changed, it will break in the form. It will not be accessible in offline forms as well.

1. Find the image online and copy the URL

2. Go to the page in form designer where you want to insert the image

There are many ways to insert an image. You can use the code below as a template for the logo. Copy the code and paste it into the description area. Add the URL to the image to the img tag.

<div class=”page-logo”> <img src=“url to logo”> </div>

Good vs Bad example

Use a CSS class for customizing the image rather than using inline CSS. This makes the CSS more manageable and you can reuse the class.

Good example (specify a reusable class)

Bad example (inline CSS)

Customize the image with the help of the CSS class

Head over to the CSS editor and add the class you gave the div that contains the image. Example code below.

.page-logo { margin-top: -20px;} .page-logo img {width: 200px;}

Example for the logo to the right side of the form

.page-logo {position: relative; height: 140px;} .page-logo img {width: 200px; position: absolute; right: 10px;}

Upload an image to Sweet and use it in the form

With the help of the functionality of the document, we can also upload an image to Sweet and use it in the form. This is a more reliable way of adding images to a form.

The procedure is the same. The only difference is that you have to upload the image to Sweet and get the correct URL. Here is how to do it:

1. Go to/or create an object in Sweet to upload the file to, for example, a company. Upload the image.
2. Go to the documents’ selection options: Selection > Documents and find your image.
3. Copy the URL of the image and use it in the form.

CSS library - custom widths

Custom widths for questions

Custom question widths - to customize the question columns, you will need to add questions to a section with 2 or 4 in a row unchecked (a standard section).

Then you will need the CSS-code with the correct styling in the CSS-editor (CSS-code is provided in the “custom-form.css” file.)

After that, you can add specific width CSS classes to each question you want to customize. See example classes below.

With the provided custom CSS, you can add width percentages from 10% to 100% with increments of 10% (with a few exceptions listed below)

Examples

Add the class “w-40” to a question and that question will take 40% (of 100) of the width. Add w-60 to the next question, which will take 60% of the width.

Some special classes that are included in the provided CSS are:

“w-35” = 35% width “w-33” = 33% width “w-25” = 25% width

Remember that you can add as many width classes as you want. If you, for example, need a 15% width class, you can simply add the class:

.Question.w-15{

width: 15%; display: inline-block;

}

And use it on a question with the class “w-15”

CSS library - custom checkbox

Custom checkboxes and Radio buttons

Applying styles for better-looking checkboxes and radio buttons

We can create our styled checkboxes and radio buttons to enhance the user experience for those answering the forms.

examples

How to apply the styles for the radio button

Copy the provided CSS for check-boxes and radio buttons into the form. If you want to change the colors of radio buttons, you can do it with the CSS below:

Change the color of the radio button’s outer circle when checked.

Change the color of the outer circle and the background color of the radio button when it is unchecked.

Change the colour of the checkbox’s outer border and background colour when it is unchecked.

Change the colour of the checkbox’s outer border and background colour when it is checked.

When the CSS is ready, you can apply the class n-custom-check for multiple answer questions and n-custom-radio for single answer questions.

You should use the template buttons for both question types for this to work. (We are designing a button, not a regular checkbox or radio button).