Iterate.ai logo
Back

Example: Custom Styles

Documentation

To customize styles on your form, you can either add <style> tags in the <head> of your document or include them as an external CSS file. All classes should be preceded by the ID of your form, for example #et_app_form.

For your reference, the custom styles used in the form above are included below:

                
#et_app_form .et_form_container {
        background-color: #fff;
        border-radius: 10px;
        border: none;
      }

      #et_app_form .et_step_copy {
        color: #6B94AE;
      }

      #et_app_form .et_field_label {
        font-size: 0.8rem;
        color: #F2994A;
        font-weight: 600;
        text-transform: uppercase;
      }

      #et_app_form .et_helper_text {
        color: #6B94AE;
      }

      #et_app_form .et_button_submit {
        background-color: #918BD7;
        font-family: 'Roboto Slab', 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Open Sans', Helvetica, Arial, sans-serif;
        font-weight: 600;
      }

      #et_app_form .et_field_input {
        border: none;
        border-bottom: 1px solid #A1D2EF;
        border-radius: 0;
        color: #485361;
        padding-left: 0;
      }

      #et_app_form .et_field_input::placeholder {
        color: #6B94AE;
        transition: color 0.2s;
      }

      #et_app_form .et_field_input:focus {
        border-color: #6B94AE;
        outline: none;
        box-shadow: none;
      }

      #et_app_form .et_field_input:focus::placeholder {
        color: #A1D2EF;
      }

      #et_app_form .et_input_error {
        color: #DB715F;
      }

      #et_app_form .stepper-container.active .stepper-element {
        background-color: #918BD7 !important;
      }

      /* Select menus */
      #et_app_form .multi-select,
      #et_app_form .simple-select {
        border-bottom: none;
      }

      #et_app_form .dropdown-menu {
        border: 1px solid #ccc;
      }