What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Is it possible to customize the form with CSS code?

    Asked by IFRALABORAL 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
    JotForm Support

    Answered by Kevin_G 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.