How to change style of form?

1. If you look at my Insight Contact Form you will see the form background colour is yellow. I want to change this say to white. Can you give me the css code that I can inject.

2. Also if you look at the bottom there are 2 buttons in red . I want to change the red background to say blue and the text to say yellow...need the css code for this

3. in the same form you will notice that the background input box is brown I want to change the background input box from brown to say blue.

Can I apply the same css code in another form titled "InSight Academy Registration Form" or will this require another set of css code for the same change I described above.

You may change the styles from the Form Designer and there shouldn't be any changes made to your existing CSS code.

However, here is the CSS code to change the background color to white and text background to blue.

.supernova .form-all, .form-all {

    background-color: #FFFFFF;

}

.supernova .form-all {

    border: none;

    -webkit-box-shadow: none;

    -moz-box-shadow: none;

    box-shadow: none;

}

.form-textbox, .form-textarea {

    background-color: #0000FF;

}

Also, change the background color to white from the Form Preferences. 

Since the buttons are styled using different CSS files with various shades to match the form, it may be complicated to get the similar shades of a different color to change. I think it would be a good option to change the button from the Form Designer.

Here is the cloned version of your JotForm with the above changes 

https://form.jotform.com/61304121530942

Please check and feel free to clone it to your account.

Hope this information helps! 

Hi Kiran

Thanks for your response.

The last time I changed the colour via the form designer and return to my form all my settings I had before was different. I had to restore from the history. Now you are saying I should change some of style using the Form Designer...would'nt this create the same problem!

 

Pls advise if using the form design is safe?

kish

 

Hi Kiran

 

I tested again on one of my test forms...I went to Design changed some colours and fonts. Then I saved it and return to builder...all my previous settings disappeared it was horrible!. So I went back to restore from history and got back what i had a before the changes.

 

My question is is your Form Designer working properly!...can you please check and test on this ...?

Thanks

kish

If you have already injected some CSS code to your JotForm and then the changes made from the Form Designer wouldn't affect the CSS code which is already there. You may see the injected CSS code from the CSS section. 

I've cloned your JotForm titled "InSight Academy Contact Form" and made some changes through the Form Designer and it looks great and there are no changes made to the CSS code. So far with my tests, it seems to be that the Form Designer is working properly.

Could you let us know the form and the changes that you have tried to make from Form Designer so that we'll try to replicate the issue at our end and guide you in the right direction?

We will wait for your response. Thank you!  

Please DIRECT this query to Kiran...as I am working with him on this....

Okay this is what I did.

Step:1 I open/eidt my form "Customer Response Form (Test)" and below how it looks 

 

 

Step 2:

I launch Design and did some colour changes to form and saved it and below is how it looks BEFORE returning to builder ...still same as my original form only difference are the colours.

Step 3: I return to Builder by selecting "Back to Builder" and this is how it looks...notice all the size of the input boxes, also alignment of each question all not the same anymore.

 

 

Now can you see what I mean...after doing any changes in Design everything does NOT seem right any more. Funny thing is when I go back to Design again with the above form the view is correct as shown in step 2.

Can you please let me know why this is happening?

Best Rgds

Kish

 

It looks that you have attached the images while replying to the forum response through email. Unfortunately, the image attached to the email cannot be posted on the forum thread. Could you try accessing the thread URL here and attach the images as mentioned in this guide?

I've cloned the test JotForm from your account and made some changes to the Form Designer, I think I'm still unable to replicate the issue.

Also, please let us know the browser that you are using and how the Form is displayed when it is previewed.

Thanks!

Please DIRECT this query to Kiran...as I am working with him on this....

 

Hi Kiran

Please let me know if you are able to see the 3 images Isn't for step 1 2 3 of my earlier email.? If you are unable please can send an email id and I will these images to you.

Best Rgds

Kish

 

I can indeed see the images you posted, there may have been a delay with them updating.  In any case, if you have a theme applied to your form, this applies CSS.  If you then make changes in the form designer, this too adds CSS.  With two different set of CSS being added, one can apply over the other. 

If you need something specifically changed, we can help provide you with the CSS necessary to make things look the way you'd like. 

Hi

If you say there is a delay...the form is still the wrong view after more than 24 hours. I do not understand after doing changes in Designer the view changes once you revert to Builder.

I am now not confident of using Designer at all for any changes with my current forms. I am afraid it might get screwed up and I will have an uphill task to get back where I was.

I don't think I want use Designer anymore. I would rather you guys give me the CSS code to inject.

best rgds

kish

The delay I mentioned was in regards to your screenshots, not to the form updates.  The designer is fine to use, it just might overwrite theme CSS applied to the form.  If you need something specific adjust, let us know and we will be happy to help.