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

    Reproducing a designed form in Jotform

    Asked by everycontractor 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 -------------*/

     

    Page URL:
    http://asphaltroofing.contractors/

    Screenshot
    design form reproduce form template
  • Profile Image
    JotForm Support

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

    Thanks.

  • Profile Image
    JotForm Support

    Answered by jonathan on June 11, 2015 at 01:28 PM

    Hi there,

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

    http://form.jotformpro.com/form/51614981647968

     

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

    -How-to-Clone-an-Existing-Form-from-a-URL

     

    Let us know if you need further assistance.

    Thanks.

     

  • Profile Image

    Answered by everycontractor 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
    JotForm Support

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

     

    Regards,