Why is there a difference between editor and preview mode?

  • ronaldjan
    Asked on April 12, 2017 at 11:22 AM

    Hello! Could you tell me why the Editor and the Preview mode do not add up on my form? Differences in fonts, length of fields, fonts in submit button and upload button, etc. CSS seems okay, at least the Editor agrees with me :-). And sometimes Preview too.

    Annoying: the width of the dropdown menus seems to be measured in px. Comprehensible. But text fields are measured in ehm what? Kilos? Litres? :-). Their scale is very different, thus difficult to work with.

    Hope you can help me out here. Thank you!

    Jotform Thread 1117602 Screenshot
  • Kiran Support Team Lead
    Replied on April 12, 2017 at 1:52 PM

    I have checked your JotForm and see that some of the fields are set to Shrink and some are not in which the width of the fields can be changed. Also, I notice that you have added mobile responsive widget on the form which is not required. Please be noted that the form is mobile responsive by default and so the mobile responsive widget can be removed from the form.

    The font that you have mentioned in the CSS may not be available in the default font set resulting in displaying a different font on the form. However, you may consider using Google font set by following the guide below:

    https://www.jotform.com/help/100-How-to-Use-Google-Fonts-in-your-Form

    Hope this information helps! Let us know if you need any further assistance. We will be happy to assist.  We will be happy to assist. 

  • ronaldjan
    Replied on April 12, 2017 at 3:02 PM

    Hm. Problem still persists. Removed the mobile widget (I didn't know you guys made Jotform mobile responsive by default....) Have them all shrinked now, shrinking seems necessary because the first 2 fields I like to be positioned parallel, which cannot happen without shrinking?

    The font is the DIN light and as you can see I have it CSS-ed :-) on all labels. But it doesn't work for the text field, the upload button, and the submit button. Or should I say, in the Editor it seems to be working but not in Preview mode. Any suggestions? Maybe the CSS isn't correct after all...? Do you have any CSS expert on board now? Or are you one of your own? @Welvin maybe?

  • Kiran Support Team Lead
    Replied on April 12, 2017 at 4:46 PM

    Since you want to have the First Name and Family name to be on the same row, you may set these fields to shrink. The other fields that can be displayed at full width need not be shrunk. It looks like the font is not applied to the labels also at my end. I have checked if the font 'DIN Light' is available and it looks like it is not available with Google Fonts as well. 

    Could you check if you can use one of the fonts available from the Styles tab in the Form Designer that matches DIN light?

    Why is there a difference between editor and preview mode? Image 1 Screenshot 20

     

    Please get back to us if you need any further assistance. We will be happy to help. 

  • ronaldjan
    Replied on April 13, 2017 at 5:27 AM

    No match. Although inconsistent in its Jotform appearance DIN seems to be the only font with a consistent - quite slender font body when I look it up on both the Editor and the Preview mode. When I CSS-inject the Abel font from Google I see differences again between the Editor and the Preview mode.

    The thing is, like a Tahoma appears nice and slender in the font menu, but turns out very bulky on your platform.... and your Google collection looks to suffer from this rare kind of obesitas as well. So does the Roboto, the Cabin, the Cousine, the Droid, the Lato, and the iStockweb. They all appear heavier in the forms, than shown when listed, like you’ve got your bold types continuously activated. I work with Chrome latest version, and on my Safari browser latest version it is all the same.

    So lets frame this issue with two questions, otherwise this issue might get a bit too chaotic:

    1. I experience differences between the Editor and the Preview mode looking at the font selection on several labels e.g. the submit button and the upload button.

    2. These differences wouldn't the matter if I could stick to the regular listed fonts, because with those fonts these differences do not occur. But, I cannot stick to the regular Jotform fonts because their slender appearance in the font menu list turns out way to chunky in my forms.

    In my other Jotform forms I solve this same 'type-inconsistency issue' by only using the sub labels and hide the actual question labels. But since the new Editor came around, sub labels seem to have a very short line break, which it seems I cannot adjust. Is this right?

    Being a free plan user I intentionally put this thread on ‘public’ so that all other users can learn from what we experience here. Might be getting a bit difficult, but its very much appreciated when you put in some time and effort. In this way you have to dig in only once ;-).

     

    Why is there a difference between editor and preview mode? Image 1 Screenshot 20

  • ronaldjan
    Replied on April 13, 2017 at 5:41 AM

    This is how the Abel font is shown in Google. Big letters, but not bold. Could it be the case that when a font is enlarged in Jotform, the Jotform software enlarges the fonts' body (and so it becomes bold), instead of its X-dimensions?

     

    Why is there a difference between editor and preview mode? Image 1 Screenshot 20

  • ronaldjan
    Replied on April 13, 2017 at 6:21 AM

    Grrr. Now I got rid of all CSS and turned to standard Google fonts in your fonts listings. No good! Look how the Editor and Preview mode disagree! Here is the Editor's opinion about the Mako font. Pretty nice:

     

    Why is there a difference between editor and preview mode? Image 1 Screenshot 20

  • ronaldjan
    Replied on April 13, 2017 at 6:25 AM

    But this is what the Preview mode thinks of the Mako font. Way too chunky! As you can see I got rid of the shrink function as well. Just to be sure:

    Why is there a difference between editor and preview mode? Image 1 Screenshot 20

  • Mike_G JotForm Support
    Replied on April 13, 2017 at 9:34 AM

    We would like to apologize for any inconvenience this had caused you. I see what you mean and for me to be able to confirm it I have created a clone version of your form to my account.

    The field labels being chunky (bold) is not caused by any issues. Form field labels by default are set to bold. This, however, can be altered by adding CSS codes to your form. Also, including !important CSS declaration, would also help override any existing/default style in the form.

    If you add the following CSS codes below, it will change the font weight of the form labels in your form to normal (not bold)

    .form-label {

        font-weight: normal !important;

    }

    Why is there a difference between editor and preview mode? Image 1 Screenshot 20

    However, I cannot reproduce the issue you're having with regards to the form showing differently in build mode (editor) and preview mode. When I created a clone version of your form, the field labels are set to bold in both editor and preview mode.

    If you have any further questions with regards to changing the fonts in your form, please feel free to let us know and we will be glad to help you.

    Thank you.

  • ronaldjan
    Replied on April 13, 2017 at 10:12 AM

    My G*d Mike! Why on earth would Jotform want to do that?!!! It took me ages to get to this answer! So, the fonts we see in the font listings (also the Google ones) are actually NOT the fonts us users get, because Jotform will always modify them to a bold version when applied in their forms!??? Is that what you're saying?? And now we have to solve that with CSS? Although CSS is pretty reliable, it is not the easiest tool for the average form builder.

    Anyway, I will clone the form too and see what I get with the font weight set to 'normal'. IMPORTANT! :-).

  • ronaldjan
    Replied on April 13, 2017 at 10:50 AM

    Hello Mike! I cloned the form and set the weight to normal using CSS, as you told me. I enlarged the form in the Building mode. What we see is a true Mako as promissed it would look in the Jotform font menu listings, take a look at the 'g' in the words 'got' and 'alright'. It has a minimal somewhat open tail:

     

    Why is there a difference between editor and preview mode? Image 1 Screenshot 20

  • ronaldjan
    Replied on April 13, 2017 at 10:56 AM

    But now we go to the Jotform Preview mode, which appears not much of a preview because it shows us some sort of Helvetica / Arial type of font, although now it no longer is bold thanks to you :-). The builder here shows us a better preview than the Preview mode itself, so it seems. And if that is truly the case than it is no problem, but then again it does need to be consistent! And I don't know wether that is.

    Why is there a difference between editor and preview mode? Image 1 Screenshot 20

     

  • Kiran Support Team Lead
    Replied on April 13, 2017 at 12:21 PM

    I have checked your JotForm in build mode and preview mode now and it seems that the font is displaying correctly now.

    Could you check once again and let us know if you need any further assistance? We will be happy to assist. 

  • ronaldjan
    Replied on April 13, 2017 at 1:44 PM

    Well, it definitely looks good embedded in WiX now, and also in Building mode, but still NOT in Preview mode. And I don't mind, as long as I know that the Building mode represents the correct look and feel, NOT the Preview mode, when it comes to font identification that is. 

  • Kiran Support Team Lead
    Replied on April 13, 2017 at 2:54 PM

    Ok. Glad to see that the form is displaying correctly on the web page correctly now. Please do not hesitate to get back to us if you need any further assistance. We will be happy to help.

    Thank you for using JotForm!  

  • ronaldjan
    Replied on April 14, 2017 at 4:00 AM

    Hm. I am puzzled by the text field, which seems to behave differently. In a text field label, font selection can be done independently from the rest so the CSS injection seems not working. And the Mako font selection (Google) isn't available there? So, which action overrules what? Can you help me out here again? See attachment.

     

    Why is there a difference between editor and preview mode? Image 1 Screenshot 20

  • Nik_C
    Replied on April 14, 2017 at 4:19 AM

    In the text field, you can actually use HTML and CSS styling directly, so it can work independently.

    So, in the Text field you can set the styling directly through the HTML:

    Why is there a difference between editor and preview mode? Image 1 Screenshot 20

    To change the CSS fo the text field you can use the Source code option (like in the image above) and apply the styling, font, font size etc. 

    Hope it helps.

    Let us know if you have any further questions.

    Thank you!

  • ronaldjan
    Replied on April 14, 2017 at 7:44 AM

    Well Nic. Source coding? This takes up way too much time. Jotform supposed to be easy as 1-2-3. CSS already is a step beyond normal use that should only be a finetune feature for pro's, not for the average form maker. Serious type design should be an important part of form design by default. Make a jumpstart by getting rid of standard BOLD modification to labels in Preview mode asap, this really doesn't make sense.

    On top of that, if I open the source code there is nothing to identify the fields font name. So nothing to change too. See attachment. As an alternative I designed the text in Photoshop, simply because I am done for now.

    Being a free plan user I try not to be too harsh in my judgement. Thanks for your time and efforts on this thread.

     

    Why is there a difference between editor and preview mode? Image 1 Screenshot 20

  • liyam
    Replied on April 14, 2017 at 8:47 AM

    Thank you for your comment, ronaldjan. 

    The basic and commonly used settings are the only ones that are readily available for users who use to wish to make quick basic changes on forms. As much as we would like to put every possible feature on the builder, unfortunately doing this will clutter the builder and will actually make things more confusing for an average user. 

    In any case, we are here to assist you in every way possible. Just let us know what you wish to do or how you want your form to appear and we'll provide you the steps or provide you the code for it to happen.

    Warm regards.

  • ronaldjan
    Replied on April 19, 2017 at 3:00 AM

    SOLVED! On the brink of closure to this subject I seem to have cracked the issue of differences between the Editor mode and Preview mode. At least overhere. I am talking Chrome 57.0.2987.133 (64-bit) and Safari 10.1 (11603.1.30.0.34). I noticed when I set all font options correct and I turn to Preview mode, there is no problem. But when I set all font options correct AND I ADD A NEW FIELD to the form, the Editor mode still shows the correct font, BUT PREVIEW MODE doesn't!

    So after you added a new field to the form, go back to Editor mode and deliberately change the font to any other font (changing the font into the correct font right a way didn't work for me). Now hit SAVE. Immediately afterwards select the correct font style and hit SAVE again. Now there is no difference anymore between Editor mode and Preview mode. Until you add another field to the form that is, and the whole procedure starts all over as indicated....

  • Sven
    Replied on April 19, 2017 at 3:46 AM

    Thanks for sharing your solution with us. Glad to hear that your enquiry is solved.

    Please don't hesitate to contact us again if you have any further questions.

     

    Thank you.