Is it possible to customize the form with CSS code?

  • Profile Image
    IFRALABORAL
    Asked on May 03, 2017 at 03:58 PM

    is it possible to do this? how?

    https://codepen.io/leogono/pen/EPeVgz

     

     

     

     

    body {

      background: #95a5a6;

    }

    .custom-form {

      

      font-family: 'Roboto', sans-serif;

      font-weight: 400;

      font-size: 16px;

      max-width: 360px;

      margin: 40px auto 40px;

      background: #fff;

      padding: 40px;

      border-radius: 4px;

      .btn-primary {

        background-color: #8e44ad;

        border-color: #8e44ad;

      }

      .form-group {

        position: relative;

        padding-top: 16px;

        margin-bottom: 16px;

        .animated-label {

          position: absolute;

          top: 20px;

          left: 0;

          bottom: 0;

          z-index: 2;

          width: 100%;

          font-weight: 300;

          opacity: 0.5;

          cursor: text;

          transition: 0.2s ease all;

          margin: 0;

          -webkit-user-select: none;

          -moz-user-select: none;

          user-select: none;

          &:after {

            content: '';

            position: absolute;

            bottom: 0;

            left: 45%;

            height: 2px;

            width: 10px;

            visibility: hidden;

            background-color:#8e44ad;

            transition: 0.2s ease all;

          }

        }

        &.not-empty {

          .animated-label {

            top: 0;

            font-size: 12px;

          }

        }

        .form-control {

          position: relative;

          z-index: 1;

          border-radius: 0;

          border-width: 0 0 1px;

          border-bottom-color: rgba(0,0,0,0.25);

          height: auto;

          padding: 3px 0 5px;

          &:focus {

            box-shadow: none;

            border-bottom-color: rgba(0,0,0,0.12);

            ~ .animated-label {

              top: 0;

              opacity: 1;

              color: #8e44ad;

              font-size: 12px;

              &:after {

                visibility: visible;

                width: 100%;

                left: 0;

              }

            }

          }

        }

      }

    }

  • Profile Image
    Kevin_G
    Answered on May 03, 2017 at 05:38 PM

    It is possible to inject the CSS code you provided, here's a guide that will help you to do it: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    However, I have been testing and found that the code may conflict with the default JotForm form's theme, since it has some CSS code already applied some of the injected code will not have effect over the form elements. 

    I would instead suggest you to get the source code of your JotForm form since you will be able to clear the default CSS styles, you could also edit the form's code and add the needed classes and even JavaScript code if needed. 

    This guide will help you to get the source code of your form: https://www.jotform.com/help/104-How-to-get-the-Full-Source-Code-of-your-Form 

    Hope this helps.