CSS codes are not taking effect in the form builder

How can I gain access to the features shown in the clip below?!?! 

http://screencast.com/t/AZbH3cjo

This clip shows PRECISELY the features I have been looking to adjust from the moment we had to switch from Adobe FormsCentral to Jotforms!

I need access to this simple, straightforward tool bar as seen in your own video above!

From what it shows, I would be able to EASILY adjust label lengths as well as font size and color on an individual basis without having to adjust ALL labels at once or mess with those mind-boggling CSS codes!!!

Please advise.

Thank you!

Hi,

That tab is actually from an old interface and is no longer available.  Most of those options have either been moved to the options for the field itself, which can be accessed from the gear icon in the top right of each field or from the Form Designer:

http://www.jotform.com/form-designer/

The designer will actually add the CSS code for you.  If you click on the CSS tab in the designer, single clicking any element will allow you to change all the elements of that type, while double clicking on any element will allow you to change the attributes of a single element.

If you do run in to trouble using the designer and need help changing any of the styling in your form, just let us know and we will be happy to help you with whatever changes you may need.

Ok. I am new to Jotforms (currently checking it out thoroughly to determine if we want to upgrade to the paid version); however, the example I saw from the video clip of the options on the "old interface" seemed MUCH MORE straightforward and user-friendly than all of this CSS code stuff. For someone who has never used it before it is quite daunting and absolutely not self-intuitive. In my previous program, if I needed a label length adjusted, I simply placed my cursor in the appropriate place and drug it further open or less open. Extremely simple. This is CSS method is very frustrating to me.

With that being said, I am realizing that this seems to be Jotforms only method for editing certain elements and so I am TRYING my best to understand and give the function a chance. I followed your instructions of double clicking an element to change its individual elements and yet I still cannot get the program to work for me.

At present, I am attempting to adjust my label lengths individually; however, the only Design option that would open for me once I double-clicked my element is "Text Box Styles"...it would not let me open/utilize the "Label Style" portion which is what I need in order to adjust my label lengths on an individual basis.

As a matter of fact, it is not letting me open ANY of the other Design features besides "Text Box Styles". Ugh. What am I missing? Please advise.

I agree that our methods of styling the form are a bit complex to say the least.  I believe you are just missing one step.  Prior to double clicking a field, click on the CSS tab:

Then double click on the field.  That will give you the direct code entered for that specific element.  Then, to change the width, click on Width in the CSS helper section and enter the width.  This will add the code for you.

Just let us know if you come across anything else confusing, we will do our best to clarify whatever you want.

Gosh, so I HAVE TO use the CSS tab?! The other Design tab is much more straightforward and easy to understand. Why can I not adjust label length from that tab when it is one of the dropdown options there? 

I watched this tutorial from your website and it shows that you can edit items from the Design tab and even proclaims the simplicity of this option: http://www.jotform.com/form-designer/

Why do I not have the same options? Does that come with the paid version?

If you would like to change individual elements, yes, you will indeed need to use the CSS tab.  Many aspects can be styled via other tabs but those changes will apply to all elements of that type.  For example, if you change font color, it will change the font color of the whole form.  If you want to change the font color of a single label, that would need to be done through the CSS tab.

The options in the video are there, you do not need a subscription to use them.  However, for what you are looking to do, the process does include use of the CSS tab.

Ok, I have done as you suggested: 1st I click on the CSS tab and 2nd I double-click on the element I wish to edit. 3rd I am clicking on one of the green boxes at the top. Either nothing changes when I type something in the field OR it changes and looks right in the CSS view but when I go back to the edit screen it doesn't match at all (and yes, I am clicking Save). Either the change made in the CSS tab simply "did not take" in the edit screen OR the change made in the CSS tab is showing up entirely different in the edit screen. What am I doing wrong now?

Are the changes showing up in the preview of the form?  Sometimes changes made by themes applied to the form and things of that nature can override the look in the form builder.  May I ask what form you are working on and a specific field you would like to change the label width for?  I will show you a specific example of how to change the label width.

Sure! Thank you so much for your willingness to help! One of the forms I am currently working with is the one entitled Leave Request - Certified. As you will see, I have made a huge mess of the top area. I am inserting a screenshot of that particular portion of how this form looked before (in our old program) and how it is intended to be....with date and then AM, PM, and ALL DAY on the same line. This is the kind of thing I am really struggling with fixing and yet, I feel like it should be so simple. My thought was that in shortening the label length of "Date" I would then be able to fit everything on one line...is this a correct way of thinking? The "Shrink" feature is NOT always helpful especially when the label length is wasting so much space at the front. (This is a problem on multiple forms for me). Also I do NOT always want my label position to be on Top. I hope that my concerns are making sense. Thank you again for your help!

Thought of one more question I had pertaining to those green CSS boxes you highlighted in your post above from 12:35 pm...

Is there a key/guide anywhere that explains what exactly the terminology in each of those green boxes is referring to within the form or that shows examples? I mean some terms are straightforward but then others, I honestly don't even know what they are referring to/what they actually adjust. 

For example, box-sizing, clear, position, float... I am SO inexperienced with CSS coding that it is even MORE nerve-wracking trying to adjust coding based on terms that I do not understand in respect to these forms I am working on.

Thank you for providing an example.  For starters, I would change your current setup to using a configurable list widget:

http://widgets.jotform.com/widget/configurable_list

http://www.jotform.com/help/282-How-to-Set-Up-the-Configurable-List-Widget

This will give you a much more streamlined approach to collecting multiple types of data and allow your users to add new rows as needed.

I setup a quick example, similar to what is contained in your form.  Have a look at this form to see if this better meets your requirements:

http://form.jotformpro.com/form/51746453631961

You can clone it to see the setup of the widget:

http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

This setup would be much cleaner than trying to line up several different fields.

Well, that actually looks extremely cluttered and squished to me. Sigh. I'm sorry but why is Jotforms so difficult? Now you're saying that even the CSS coding won't work for what I am trying to do?

Do I seriously need to start over on all of my forms with this widget stuff? Another new thing to learn? I am feeling extremely despondent at this point.

CSS will work for what you need.  I was merely trying to give you an easier alternative, my apologies.  If ever one of your changes does not show in the builder, just add the "!important" tag to force the CSS. 

So in the case of the labels for the date fields, do the same process, then add in the tag:

Just before the semi-colon at the end.  It will look like this for each label:

#label_57 {
    width : 30px !important;  
}

I think hid the labels for the radio button fields completely.  Using the same process but using the "Display" option and choosing "None":

Which produces a similar code to this for each of the radio field labels:

#label_59 {
    display : none;
}

Then, to ensure proper spacing, I added a spacer widget in between each.  You can locate the spacer widget by searching in the widgets section.  This is how to fields look now:

http://form.jotformpro.com/form/51746453631961

There is unfortunately not a master list of CSS attributes available from JotForm. 

Ok. I guess with LOTS of practice I can do what you did. Here is my current problem: I just went in to make the changes you suggested in CSS. I clicked the Save icon. It turned into an eyeball. I then clicked the X to return to back to "Builder" and then I get the pop-up message: Discard Changes? GRRRRRRRRRRRRRR!!! This keeps happening even though I have already clicked Save!!!!! I have NEVER had so much difficulty with a program!!! Please advise!! Why wouldn't it be saving my work?

When you save your form in the designer is short bit of time before our system recognizes it.  When you save the form, it does indeed save the form.  All your changes will be saved when the save is completed.  However, if you go back to the form builder before the system as a whole see's the form has been saved, it may give you that error message.  Just ignore it, if you complete a save, whether or not it gives that error message returning to the form builder, the save will remain.

My apologies for your frustrations, custom work does involve custom solutions.  We are working hard every day to streamline these processes and smooth everything out.  We are always here to help make changes if need be.

Thank you very much for all of your assistance. I understand there is always a learning curve when trying to grasp a new product or program especially when custom pieces are involved. Then, the struggle to learn can be exacerbated when the previous program was working so well and was simply easier to use. I am just wishing that this CSS stuff came easier to me so that I wasn't spending so much time back and forth in the forum. Thankfully you all have a very attentive support team!

I am still concerned about the saving feature. After saving yesterday (and getting the green checkmark) I waited several minutes before attempting to return to the form builder. In every case it asked me to discard changes so basically in order to return to the builder page at all I would've had to discard my changes. Instead I clicked the Design tab and then clicked the X from there. It took me back to form builder but none of my CSS changes were there.

I finally just gave up hoping that when I opened it this morning it would be fixed, however, when I opened that form in edit mode just now, it still looks as though I made zero CSS changes, even though I did make several! It is hard to edit in form builder without seeing the CSS changes I made.

How can I get my CSS edits to show up in the form builder view?  Do I need to wait a certain amount of minutes after getting the green checkmark before exiting to form builder?

Also, are the edits in CSS supposed to change instantly/live so that you can see if the adjustment you made is indeed what you wanted/intended? I am having difficulty knowing if anything is changing (for example when I adjust padding). Please advise.

Thank you for your nice words about our support and I am sorry to hear that you are having these issues.

I am still concerned about the saving feature. After saving yesterday (and getting the green checkmark) I waited several minutes before attempting to return to the form builder. In every case it asked me to discard changes so basically in order to return to the builder page at all I would've had to discard my changes.

Based on what you have explained, I believe that the issue is that you are still on CSS tab when you are clicking on X (to close the form).

The best thing is to switch from the CSS tab since it is being updated / live constantly to transfer any code you add into the form.

How can I get my CSS edits to show up in the form builder view?  Do I need to wait a certain amount of minutes after getting the green checkmark before exiting to form builder?

To answer your question, as soon as you add the CSS code to the CSS tab (or make them there), the codes should be immediately added to the form and you should immediately see the change, however in Form Designer, this might not be the case since the form is opened within the Form Builder (which has some of its own codes) and for that reason, could seem a bit off.

Now in regards to your images, it seems to me that you have embedded the form with less width than the form needs.

Now since we can assist with only one issue per thread, I have moved your last reply to a new thread here: http://www.jotform.com/answers/596669 where we will assist you in regards to that and help you set it all up.

Now, when it comes to CSS and Form Designer I like to recommend few guides, which I hope you will like:

Form Designer Tutorial: Let's create fantastic forms!

How to Position Fields in JotForm

How to Manage Multiple Fields

Of course as my colleague had already mentioned, if you have any question about any segment of our system, do let us know and we would be happy to answer it :)

From You:

The best thing is to switch from the CSS tab since it is being updated / live constantly to transfer any code you add into the form.

I am still concerned about the saving feature. After saving yesterday (and getting the green checkmark) I waited several minutes before attempting to return to the form builder. In every case it asked me to discard changes so basically in order to return to the builder page at all I would've had to discard my changes. Instead I clicked the Design tab and then clicked the X from there. It took me back to form builder but none of my CSS changes were there.

I guess perhaps you missed my line in yellow above...I DID switch out of the CSS tab to exit and return to the form builder and STILL my changes were lost.

I have already looked through all of those tutorials. My problem is that my changes are not sticking and I do not understand why. Navigating through CSS code is miserable enough without then having all of your work lost. It is very disheartening. I have tried everything from counting slowly to 10 before trying to exit and return to form builder to completely going on to something else (away from Jotforms) for several minutes and coming back and trying to exit back to the form builder...the result is always the same...changes/edits lost.

@glenpoolps

Thanks for the clarification.

In which particular form that is not saving the changes? Is it this one http://www.jotform.us/form/51402544611141? 

I cloned this form here and I have tried several browsers trying to reproduce the problem but it is always fine and the changes stays on the form. 

Here's a screencast: http://screencast.com/t/TBqByS0PT7

If this is not the form you are experiencing the mentioned problem, let us know the form URL so we can can check and investigate this further.

Thank you!

Yes, that is one of the forms that is giving me problems. All of them are, really. I watched your screencast. I am following the steps exactly as you show them. 

What does seem to be helping is adding in that !important command that you taught me in another thread. For the most part that is causing my changes to show up but there are still a few things that aren't showing up on the form builder screen. I guess if they show up in the live version then that is what matters. If I run into anymore specific examples, I will let you know. 

Thank you! That tip on adding !important has helped tremendously!

FROM DAVID ON JUNE 23RD ABOVE: The designer will actually add the CSS code for you.  If you click on the CSS tab in the designer, single clicking any element will allow you to change all the elements of that type, while double clicking on any element will allow you to change the attributes of a single element.

I have tried NUMEROUS times to change the font of all of the text elements in my form to black (right now a lot of the text is like a dark grey and the font darkness varies throughout the form). I tried David's tip above...by single clicking on an element in the hopes of changing the font color of all similar elements to black at once but it's like it will only change ONE element at a time. Please help! This is true of all of my forms but the one I am currently working in is this: http://form.jotform.us/form/51402544611141

I was just going into the CSS code and everywhere I saw the word "color", I was pasting in "#0c0c0c" but that was becoming quite daunting. Please advise.

This is in reply to EltonChris from 6/25/15:

I spoke too soon! Now even the !important command is not working! I am in this form: 

I would advise not to use the !important clause since it will make fix something a very hard thing - for you. It would take a bit more time for us as well.

Now the screenshot that you have just uploaded shows that the form builder and form designer have a different width available for you and that is why it is doing that.

You can however fix it by setting the labels to the certain width.

Now since this thread is quite big, I have moved this last reply to a new thread to assist you with that specific issue on it.

This is the link to the new thread: http://www.jotform.com/answers/599966 and we will be answering on it shortly.

Ok. One person advises me TO use the !important clause; another says to avoid it! I don't know what to believe except that using that clause is pretty much the ONLY way that I have been able to get ANY of my CSS coding to stick (especially pertaining to label length)! I wish your support team members were united on this topic. I will continue to use it for now as it is what is working for me.

I checked the width of my form in the CSS designer and the Form Builder and it says 690 in both cases....I don't see what would be causing the elements to appear differently in each spot.

The !important declarations are sometimes required to override other CSS rules. However, this is still up to you how to style the forms, we are just providing a tool and there are no strict rules.