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

    Personalize form with unique CSS

    Asked by striker862 on September 18, 2013 at 11:24 AM

    Is there any way to customize my form to look like the screenshot attached? My form has already been created, I'm just looking to have the fields resemble the design I created. Can it be done with specific CSS? Thanks.

    Screenshot
    unique thanks attached
  • Profile Image

    Answered by pinoytech on September 18, 2013 at 11:55 AM

    Hi,

    Using custom css, you can modify your form to any look you want. Please take a look at this clone form: http://www.jotformpro.com/form/32604174214950

    Here are the codes that I've injected into this form:

    .form-textbox,.form-dropdown {

    width: 276px !important;

    }

    input, select {

    border: 2px solid #5882FA;

    }

    .form-submit-button {

    border: solid 0px #5882FA;

    font-size: 17px;

    color: #ffffff;

    padding: 7px 20px;

    background-color: #5882FA;

    font-family: 'Tahoma';

    }

    http://www.jotform.me/help/117-How-to-Inject-Custom-CSS-Codes

    If you need further assistance, please let us know.

    Thank you!

  • Profile Image

    Answered by striker862 on September 18, 2013 at 11:57 AM

    Thanks! Is it possible to change the color of the field to match the background color? Your form has a white field with the gray-ish background. Can we make the empty fields gray, too? And change the text in the dropdown to match the darker gray?

  • Profile Image

    Answered by pinoytech on September 18, 2013 at 12:37 PM

    Hi,

    Yes, you can change the background color of textbox and dropdown. Just simply update this code:

    input, select {

    border: 2px solid #5882FA;

    }

    To

    input, select {

    border: 2px solid #5882FA;

    background-color: #F0F0F0;

    }

    Updated: http://www.jotformpro.com/form/32604174214950

    If you need further assistance, please let us know.

    Thank you!

  • Profile Image

    Answered by striker862 on September 18, 2013 at 12:37 PM
  • Profile Image

    Answered by striker862 on September 18, 2013 at 12:37 PM

    Thanks! Is it possible to change the color of the field to match the background color? Your form has a white field with the gray-ish background. Can we make the empty fields gray, too? And change the text in the dropdown to match the darker gray?

  • Profile Image

    Answered by striker862 on September 18, 2013 at 12:55 PM

    I copied and pasted the code above, but my submit button is not blue. And then i changed the colors to the correct hex codes and while it resembles my design in the builder, it resorts to your blue when uploaded.

  • Profile Image

    Answered by pinoytech on September 18, 2013 at 02:03 PM

    Hi,

    On the clone form that I have, I use the default submit button. The codes for submit button only works on default submit button. Which means, using other "Button Style", the codes won't work. Don't worry, I've already fixed it for you. Kindly take a look at your form now: http://www.jotform.me/32536246948160

    If you need further assistance, please let us know.

    Thank you!