Help with styling form

Hello, I need help with a few things on my form please. The form is https://form.jotform.com/241135160245142 but you can see it better here: https://bathmasters.live-website.com/home-bath-masters-walk-in-tubs-showers-dayton-fairborn-04222024/

I would like to change the color of the field text to #5220b6, change the font on the dropdown to DM Sans and round the borders on a couple fields. I attached a screenshot to indicate where.

Thanks very much!

Hi Steve,

Thanks for reaching out to Jotform Support. I've added some CSS code, and you can paste this and replace the CSS you have on your form:

@import url('https://shots.jotform.com/elton/genericTheme.css');



/* Button Styles */

.form-submit-button {

    background : #1dd2db !important;

    color : #fff;

    border-radius : 5px;

    border : none;

    box-shadow : none;

    height : 50px;

    width : 100%;

    font-size : 20px !important;

    font-weight : bold !important;

    text-shadow : 0 0px #000 !important;

    padding-bottom : 20px;

}



/* Input, Select, Textarea Styles */

input, select, textarea {

    padding : 16px !important;

    background-color : #fff !important;

}



/* Form Styles */

.form-all {

    border : none !important;

    box-shadow : none !important;

}



/* Placeholder Styles */

::-webkit-input-placeholder {

    font-size : 1em !important;

    color : #999;

}



:-moz-placeholder {

    font-size : 1em !important;

}



::-moz-placeholder {

    font-size : 1em !important;

    color : #000;

}



:-ms-input-placeholder {

    font-size : 1em !important;

    color : #000;

}



/* Dropdown Styles */

.form-dropdown {

    font-size : 1em !important;

    color : #000;

}



/* Sub-label Styles */

.form-sub-label {

    color : #fff;

}



/* Custom Field Frame Styles */

#customFieldFrame_35 {

    width : 100% !important;

    margin-bottom : -2% !important;

}



/* Form Input Styles */

.form-input, .form-textbox, .form-dropdown, .form-textarea, [data-type="control_dropdown"] .form-input, [data-type="control_dropdown"] .form-input-wide {

    width : 100% !important;

    max-width : none !important;

    box-sizing : border-box;

}



/* Additional Styles */

#id_36 {

    margin : 0;

    padding : 0;

}



#label_37 {

    display : none;

}



/* Textbox Styles */

.form-textbox {

    padding-left : 20px;

    font-size : 18px;

    font-family : 'DM Sans';

    font-weight : bold;

    border : 0;

    border-radius : 10px;

    color: #5220b6 !important;

}



#input_24, #label_40, #label_46, #cid_40 {

    font-family : 'DM Sans';

}



#label_46 {

    color : #fff;

}



#input_46 div.appointmentDate {

    color : #fff;

}



#jDropdownWG-toggler-input_46 span.city-time {

    color : #fff;

}



#text_47 span.hover {

    font-family : 'DM Sans';

}



#text_45 span.hoverSticky {



}



#text_45 {

    font-family : 'DM Sans';

    line-height : 1em;

}



#input_24 {

  border-radius: 10px !important;

}

Let me walk you through it:

1. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.
2. In the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box.

Here's the result on the preview:

As for the Checkbox in Dropdown widget, you can use the CSS code below:

.selecter .selecter-selected {

    padding : 16px !important;

    background-color : #eee !important;

    color : #999 !important;

   font-size: 0.9em;

   font-family: "DM Sans", sans-serif;

   border-radius: 10px !important;

}

Here's how to inject the CSS into the widget:

1. In Form Builder, select the widget and click on the wand icon.
2. Go to Custom CSS tab and paste the code.
3. Once you're done, click on Update Widget.

Give it a try and let us know if you need more help.

Thanks, I added the code and it looks good but a couple things are still off. I would like the placeholder text on all the fields to be #5220b6 and the same weight as the upper fields are currently (name, email, phone, etc.) The Service Interested in and Tell us about your project fields look to be different sizes and weights currently.

Thanks so much for all your help.

Hi Steve,

Thanks for getting back to us, and I'm very sorry to hear that. I understand the issue, but I'll need a bit of time to look into this. I will be back shortly. Also, to avoid confusion, I moved your question about the slider bar to a thread, you can check that out here.

Hi Steve,

Thanks for patiently waiting. To have the same placeholder color to all of your form fields aside from the widget, you can add replace the existing color with your preferred color in the placeholder section of my colleague's provided CSS Code earlier.

Let us know if you need any more help.

As for having the same with and color for the text area, you can inject the below CSS Code to your form:

textarea#input_24::placeholder {

  font-size: 18px ! important;

  font-weight: bold;

}

Finally, as for the applying the same weight to your widget, you can inject the below CSS Code into the widget:

div#dropdown{

  font-size : 21px;

  font-family: auto ! important;

  font-weight : bold;

}



.selecter .selecter-selected {

color: #5220b6 ! important;

}

That's it. Here's what it should look like afterward:

Here's also a cloned version of your form that you can test.

Let us know if you need any more help.