Styling a Form
When creating a form in your sales quotes, there are options in the form setup that will allow the sales consultant to adjust the appearance of the input fields QuoteCloud gives the option to style a form.
To begin, first, start by building a form in a sales quote.
Click on the + button located between every content block while working in the Sales Quote Editor and then select Form at the very bottom.

A new Form Content Block will appear in your sales quote. Hover over the Form Content Block, and you will notice a tab (toolbar) appear, as shown below. Click on the Cogs icon to open the form settings.

An Form Settings panel will appear displaying several configuration settings, as shown below.

The default settings are on appear like the below when previewing the sales quote.

You can make the below settings adjustments depending on your needs and how you want the sales quote to look.
Label Type - adjust to the way that the input field label displays:
a) Floating: the input field label floats from inside the input field to above the input field when the sales quote recipient clicks into the input field
b) Static (default setting): the input field label remains static above the input field
Input Type - this setting allows for two style settings for the input field:
a) Underline: the input field is styled with an underline
b) Boxed: the input field is styled with a border around the input field
Border Style - set the line style of the border; values are dotted, dashed, or solid (default)
Border Width (in px) - set the width (in pixels) of the input field border
Border Radius (in px) - set a rounded corner radius for the input field border (in pixels)
Field Padding (in px) - set the amount of space between the border and the value inside the input field
Edit the form style settings and then click Save in the bottom right corner of the Form Settings.

You will be able to view the styling settings when previewing the sales quote.

Related User Guide Topics


