Styling a Smart MicroForm

After Creating your Smart MicroForm, you can easily style it by following these steps: First, select the elements you want to modify from the options displayed in the left menu. Then, use the Style section on the right to add customized styling to the selected elements. As you make styling adjustments, you can instantly observe the changes in the Preview section, allowing you to fine-tune and create a well-designed form.

Smart MicroForm Styling Elements:

1. Click on Smart MicroForm from the left section, The entire Form in the Preview will be highlighted. 
2. In the Style Section you can set the following:
   • Alignment: Select the alignments type for the fields on the form.
   • Color: Select the font color to configure the fields.
   • Background: Select a background color for the form.
   • Family: Select/Enter the font family that can be used in the Form. 
   • Size: Increase or decrease the default font size by dragging the handle on the Size bar.  
   • Weight: Sets the weight (or boldness) of the font.
   • Style: The font-style property allows you to make text appear italicized (i.e. sloped, or slanted). em {font-style: italic;} This property accepts one of three possible values: Normal, Italic, and Oblique. 
   • Transform: The text-transform property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.
   • Decoration: To add an Underline, Overline, Line-through a text
   • Line Height: Increase or decrease the line height by dragging the handle on the Line Height bar.  
3. Click Advanced to design the Form further. 
   • Advanced Styles: Set the values for Padding, Margin, Border Radius, Height, and Width of the Form.  
   • Container Setting: Set the form Container Size by adding Height and Width by typing the numbers or toggle the Auto Adjust Container Size switch. 
   • Custom CSS: Enter a CSS when you want to create a special style and then selectively apply it to a limited number of elements or objects of the Form.
4. Click Save.
   
   
   

Styling individual Fields of a Smart MicroForm 

You can configure individual fields on the Smart MicroForm, by selecting them individually and defining the required styling in the Style section. 

1. In the Left menu, click one field at a time to customize. The element field in the Preview will be highlighted and you can edit the field's style in the Style section that is displayed on the right.
   For fields Header, Email-Label, Country-Label, and Button in the Style section click Content to make modifications to the Text field to reflect in the form preview.
   Important: Enable the Hidden toggle to hide the text field on the Form. Here the Hidden option has been enabled for the Header field.
   Note: The Hidden Option is available only for the Header, Email-Label, and Country-Label fields.
   
   
2. For the field Email-Input in the Style section, click Content to make modifications to the Placeholder field to reflect in the form preview. 
3. For each individual field on the Form in the Style Section you can set the following:
   • Alignment: Select the Alignments ype for the fields on the form.
   • Color: Select the font color to configure the fields that appear in the preview.
   • Background: Select the form background color.
   • Family: Select/Enter the font family to apply to the form.
   • Size: Increase or decrease the default font size by dragging the handle on the Size bar.  
   • Weight: Sets the weight (or boldness) of the font.
   • Style: The font-style property allows you to make text appear italicized (i.e. sloped, or slanted). em { font-style: italic; } This property accepts one of three possible values: normal , italic , and oblique .
   • Transform: The text-transform property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.
   • Decoration: To add an underline, overline, line-through a text
   • Line Height: Increase or decrease the line height by dragging the handle on the Line Height bar.  
4. Click Advanced to design further design the Form. 
   • Advanced Styles: Set the values for Padding, Margin, Border Radius, Height, and Width for the field.  
   • Custom CSS: Enter a CSS for those times when you want to create a special style and then selectively apply it to an element or objects of the Form. 
5. Click on Save, to save the configuration.

Related Topics:

Get started with Hushly's Smart MicroForm
How to Create a Smart MicroForm

Adding a Smart MicroForm on your Webpage