Custom CSS in Webforms Follow

If you have ever used web forms, you probably know the enormous potential they have when it comes to capturing leads directly into Salesmate. If you have not created web forms yet, here's how to set them up.

If you want to get a little more creative and customize your web forms by changing the layout and grouping the fields into columns, this article can help you make the necessary changes conveniently by using Custom CSS (Cascading Style Sheets).

How to embed CSS code into the website using Salesmate?

• Go to Forms under the three-dotted button on the left sidebar
• From the list of Forms, edit the form you would like to customize
• Go to the Style & Preview tab
• Under the Custom CSS block, type/ paste the custom CSS you would like to use
• No external style or script tags are accepted over here
• As you input the CSS, you can preview how your form beside it
• If all looks good, save and publish the form

• for the changes to take effect.
  

Here’s how you can carry out the various customizations:

• Using Custom Fonts
• Giving the form a horizontal layout
• If you want to margin space between the fields
• If you want to fix the width of each column
• If you want to align the Submit Button in the center:
• If you want to add a border to the form or want to add color in the background
• If you want to change the color of the label & change the font size as per your need

Using Custom Fonts:

• This script will update form fields label fonts. This will help you to customize the form fonts as per your website font style.

#preview-form #previewFormCreator slabel {
color: #000;
font-size: 15px;
font-family: Verdana,Geneva,sans-serif;
}

• Here's how your form will appear:

Giving the form a horizontal layout:

• This script will turn your vertically arranged form fields into horizontal fields. This will help you take up less space when you embed your form at the bottom of a page:

sm-form-creator .row{display:flex;}

• Here's how your form will appear:

If you want to margin space between the fields:

• If you want to set the spacing between the fields: If you want to increase/decrease the spacing between each field, paste the following code and set the margin value according to your needs.

sm-form-creator .sm-form-element{display:flex; width: 50%;} 

• Here's how your form will appear:

If you want to fix the width of each column:

• If you want to give a fixed width size to columns paste the following code and set the width size according to your needs.

.sm-form-element{ min-width:200px } </style>

• Here's how your form will appear:

If you want to align all fields in a row:

• If you want to align all the fields (texts and buttons) in a row to have a horizontal visual as per your need you can follow the below code.

sm-form-creator .row{display:flex}
sm-form-creator {width: calc(100% -  120px); float:left; margin-right: 30px;}
sm-form-creator slabel {display:none;}
sm-button {float:left;}
alert alert-danger {clear: both;}

OR

div {
display: flex;
  }
button {
  margin-left: 10px;
  margin-top: 25px
  }

• Here's how your form will appear:

If you want to align the Submit Button in the center:

• If you want to align the submit button in the center as needed, you can follow the code below.

sm-button{ display:flex;  width: 100%;  justify-content: center;} 

• Here's how your form will appear:

If you want to add a border to the form or want to add color in the background:

• If you want to add a border in the form and color in the background to make it look decent as per your need you can follow the below code.

.preview-form { border: 5px solid #DFE1E6 ; background:#F9E79F; }

• Here's how your form will appear

If you want to change the color of the label & change the font size as per your need:

• If you want to change the color of the label & want to change the font size as per your need you can do so by following the code.

#previewFormCreator slabel { color: #641E16 ; font-size: 30px;}

• Here's How your form will appear