Reproducing a designed form in Jotform

  • Profile Image
    Asked on June 10, 2015 at 05:52 PM

    I have tried to reproduce a form in Jotform and am having a problem with the .css  Below is the portion of the .css the designer used.  Is there a way you could help me to reproduce the form in Jotform.  I have also attached a screenshot of the form so you could see what it looks like.


    /*------------- 1.5. Forms -------------*/


    label { color: #2c3e50; }

    label span{ color:#b4b4b4; }


    fieldset{ border:1px solid #eaeaea; padding:15px; margin:0 0 20px 0; }

    legend{ font-weight: bold; }


    input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="range"], input[type="date"], input[type="search"], textarea, input.text { background-color:#fff; border-radius: 3px; border: 1px solid #c4c4c4; color: #b9b8b8; display: inline-block; font-size: 14px; margin: 5px 0; padding: 15px 12px; width: 100%; -webkit-appearance: none; -moz-appearance: none; }


    p.icofield  { position: relative; }

    p.icofield i { position: absolute; top: 22px; right: 12px; color:#c4c4c4; }


    input[type="text"]:hover, input[type="password"]:hover, input[type="email"]:hover, textarea:hover { color:#000000; }


    select { -moz-appearance: none;background-color:#fff; border-radius: 3px; border: 1px solid #c4c4c4; color: #b9b8b8; cursor: pointer;  margin:5px 0px; text-indent: 0.01px; text-overflow: ""; width: 100%; padding: 12px 26px 12px 12px;    }

    select option { background-color: #f8f8f8; line-height:43px; color: #b9b8b8; border:1px solid #d3d3d3;}


    textarea { /*height: 190px; */overflow: auto; resize: none; padding: 16px 15px; width:100%; }


    input[type="submit"]:hover { background-color:#3d3d3d; }


    input[type="submit"], input[type="button"] { color: #ffffff; cursor: pointer; float: right; font-size: 15px; padding:13px 9px; border-radius:3px; margin-top:5px; -webkit-appearance: none; appearance: none; background:#00a9e0;}


    #searchform .search-icon { background: url("images/search.png") no-repeat scroll center center rgba(0, 0, 0, 0); border: medium none; border-radius: 0 2px 2px 0; margin-top: 0; min-height: 47px; min-width: 52px; padding: 10px 23px; position: absolute; left: 0; text-indent: -9999px; top: 0; }


    .error, input.error[type="text"], input.error[type="email"], input.error[type="password"], textarea.error, input.error[type="tel"] { border-color: #F92C2C; }

    #footer .widget .mailchimp-form input.error[type="email"] { border:1px solid #F92C2C; }

    .error-msg, .success-msg { display:inline-block; padding:5px 35px; border: 1px solid; position: relative; }

    .error-msg { border-color:#ff9999; color: #d01313; }

    .success-msg { border-color:#77be32; color: #77be32; }

    .error-msg:before, .success-msg:before { font-family: FontAwesome; font-size: 17px; font-style: normal; font-weight: normal; left: 13px; position: absolute; text-decoration: inherit; top: 5px; }

    .error-msg:before { content:"\f00d"; color:#c54228; }

    .success-msg:before { content:"\f00c"; color:#77be32; }


    /*------------- 1.5. End Forms -------------*/


  • Profile Image
    Answered on June 10, 2015 at 06:31 PM

    Please allow us some time to re-create the form in JotForm also.


    I will update you here once I have the form draft.


  • Profile Image
    Answered on June 11, 2015 at 01:28 PM

    Hi there,

    Our resident best CSS coder EltonCris have created this form for us. =)


    You can clone/copy the form if you like, just follow the user guide:



    Let us know if you need further assistance.



  • Profile Image
    Answered on June 11, 2015 at 03:18 PM

    Thank you Jonathan and  EltonCris.  That is exactly what I needed.  Your work is totally appreciated.

  • Profile Image
    Answered on June 11, 2015 at 04:28 PM

    On behalf of my colleague you are quite welcome! 

    Contact us again anytime should you need assistance on JotForm.