Sertifi Support Site

The default CSS stylings for an eForm can be seen below. You can alter these stylings to change many aspects about an eForm, like font size, text color, and the dimensions of input fields.

/* Note: the text on eForm cannot be changed through the use of CSS styles */

/*eForm container*/
.template-container {
  background: #000;
  max-width: 700px;
  height: 100%;
  padding-bottom: 30px;
}

/* Section headers */
h2 {
  color: #fff;
  font-size: 17px;
  font-weight: 400;
  margin-bottom: 8px;
}

/* Form field labels */
label {
  font-size: 11px;
  font-weight: 400;
  margin-bottom: 2.5px;
}

/* Single-line inputs */
input, select, .date-container, .k-dateinput-wrap {
  min-height: 32px;
}

.eform-currency-input {
 max-height: 32px;
}

/* Label colors */
label, .daterange-caption {
  color: #fff;
}

/* Header - Text and Logo */
.template-header {
  height: 105px;
  background-color: #000;
  position: relative;
}

.header-image {
  position: absolute;
  width: 130px;
}

.header-text {
  width: 100%;
  display: flex;
  justify-content: center;
}

.header-text .title-text {
  display: inline;
  color: #fff;
  font-size: 13px;
  text-align: center;
}

.header-image .image-container {
  width: 130px;
  height: 87px;
}

.header-image.has-image .image-container {
  max-width: 130px;
}

.header-image.has-image {
  position: static;
}

.header-image.has-image + .header-text {
  padding-right: 70px;
  width: 80%;
}

/* Paragraphs */
.paragraph-text {
  font-size: 10px;
  color: #fff;
}

/* Text boxes */
.text-container {
  width: 100%;
}

/* Comments box */
textarea {
  width: 100%;
  height: 75px;
}

/*CONTACT SECTION*/
.portal-name,
.portal-address, .portal-phone {
  color: #393939;
}

.portal-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.portal-address, .portal-phone {
  font-size: 12px;
}

.portal-address .contact-icon svg path,
.portal-phone .contact-icon svg path {
  fill: #0B5D8F;
}

.portal-address .contact-icon {
  width: 8px;
  height: 8px;
}

.portal-phone .contact-icon {
  width: 9px;
  height: 9px;
}

.portal-logo {
  max-width: 200px;
  max-height: 120px;
}

/* Airplane Icon */
.plane-icon {
  width: 20px;
  height: 20px;
}

/* Airplane Icon Color */
.plane-icon path {
  fill: #fff;
}

/* Divider Lines */
.divider {
  border-color: #fff;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Date Inputs */
.k-state-focused.k-dateinput-wrap,
.k-dateinput-wrap {
  background-color: #fff !important;
}

/* Date Range Widths */
.date-container {
  width: 43%;
}

/* Date Range Buttons */
.k-select {
  background: #e4e7eb;
  bottom: 1px;
  height: 30px;
}

/* Date Range Icon Color */
.calendar-icon .icon-fill {
  fill: #3A3A39;
}

/* Add/Remove guest buttons */
#addGuest, #removeGuest {
  color: #fff;
}

/* Checkboxes */
.checkmark {
  border: 2px solid #fff;
}

/* Signature Clear Button */
#btn-clear {
  color: #fff;
}

/* Responsive styling for eForm Header */
@media only screen and (max-width:850px) {
  .header-image.has-image + .header-text {
    padding-right: 0;
    padding-left: 20px;
  }

  .header-image.has-image .image-container {
    width: 100%;
  }

  .header-image.has-image {
    width: 30%;
    position: static;
    display: flex;
    justify-content: center;
  }

  .header-image.has-image + .header-text {
    width: 70%;
    justify-content: flex-start;
  }
}