Design

The Design tab sets how the form looks to the recipient: the colors, the background, the font, the input fields and the look of the PDF document. To open it, click the Design tab (the palette icon) in the template editor.

The tab has two parts:

• On the left, a preview of the form’s pages and fields. It changes as you change the settings. A template without HTML pages shows “No pages to preview”.
• On the right, the settings. Click Preset theme to apply a ready-made set of colors, or Custom theme to set each value yourself. Custom theme opens first.

The design is saved with the template. Click Save in the editor header to keep your changes.

To change the design with your own CSS, use Stylesheet on the Configuration tab.

Preset themes

Click Preset theme, and then click one of the five theme cards. Each card shows the theme’s colors on a sample title, text and button. The selected card is highlighted.

A preset theme sets these colors: the form background, the text, the headings, the button background and text, and the border of the selected input field. It doesn’t change your other settings, such as the font or the page background. You can change any color afterwards under Custom theme.

Custom theme

Click Custom theme to set each value yourself.

To set a color, click the color square and pick a color, or type a hex value such as #58b0e3 in the box next to it and press Enter.

Page Background

Setting	What it does
Color	The color of the page around the form.
Background Image	An image for the page around the form. Click a picture to select it. Click the first picture for no image.

Form Background

Setting	What it does
Color	The background color of the form.
Opacity	How solid the form background is, from 0 (transparent: the page background shows through) to 10 (solid, the default).

Display Options

These options apply to HTML templates only.

Setting	What it does
Show page list	Shows a list of the form’s pages next to the form, with the number of fields still to complete on each page.
Show template name in title	Shows the template name at the top of the form.

Text

Setting	What it does
Text color	The color of the text in the form.
Heading color	The color of the page and section titles.

Buttons

Setting	What it does
Button background	The background color of the buttons. It’s also used for checkboxes, radio buttons and lists.
Button text color	The color of the text on the buttons.

Icons

Setting	What it does
Icon color	The color of the icons in the fields.

Input Fields

Setting	What it does
Input background	The background color of the input fields.
Border (default)	The border color of the input fields.
Border (selected)	The border color of the field that the recipient is filling in.
Label background	The background color behind the field labels.
Label text color	The color of the field labels.

Advanced

Setting	What it does
Required labels in red	Shows the labels of required fields in red. This helps with accessibility.
Full input border	Shows a border around the whole input field. When it’s off, only the bottom border is shown.
Border radius (0-10)	How round the corners of the input fields are, in pixels, from 0 (square) to 10. Used only when Full input border is on.
Static labels	Keeps each field label above its input field, also when the field is empty.

Font

Select the font for the text in the form. The list includes Open Sans Hebrew, Varela Round, Alef, Arial, the Ploni and Simpler families, Aharoni, Guttman, Roboto, Courier New, David, Heebo and Rubik. You can type in the box to search. Leave it empty to use the default font.

For an HTML template, the font is also used in the PDF document.

PDF Output

These settings change the PDF document that Cellosign creates from the submitted form.

Setting	What it does
Font size	The size of the text in the PDF document: Big, Medium or Small. For a PDF template, this is the size of the values placed on the PDF.
PDF font color	The color of the values that the recipient filled in.
PDF borders	For HTML templates only. The color of the page and section title backgrounds and of the borders around the rows. Leave it empty for no borders.