Personalize form with unique CSS

  • Profile Image
    striker862
    Asked 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.

  • Profile Image
    pinoytech
    Answered 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
    striker862
    Answered 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
    pinoytech
    Answered 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
    striker862
    Answered on September 18, 2013 at 12:37 PM
  • Profile Image
    striker862
    Answered 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
    striker862
    Answered 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
    pinoytech
    Answered 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!