What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Changing font family automatically delete form cover

    Asked by tombolanpl on December 20, 2015 at 07:29 PM

    Hello Sirs,

    Try creating a new form, just a heading, then apply the theme http://www.jotform.com/theme-store/theme/christmas-buddy, go to designer and change the font in the font option seciont. The cover image will disappear and there is nothing you can do to get it back.

    I would use such them but I don't like the font. Is there a way to change that behavior.

    Thanks

    Roberto

    Page URL:
    https://form.jotformeu.com/53537843523358

    font delete form font family form cover
  • Profile Image
    JotForm Support

    Answered by Chriistian on December 20, 2015 at 09:51 PM

    Hi,

     

    I created a clone of your form and was able to recreate the issue:

    The cover disappears from the designer and will not be found in the previews. Can you tell us what font you would like for the theme? We will then suggest a css code that you can inject in the form to change it.

     

    We will wait for your response,
    Regards.

  • Profile Image

    Answered by tombolanpl on December 21, 2015 at 06:30 AM

    Hi Chriistian,

    thanks for the quick reply. I would use the font named "Indie flower". I'll appreciate if you will send me the code to inject css code.

    With my best regards,

    Roberto

  • Profile Image
    JotForm Support

    Answered by beril on December 21, 2015 at 09:05 AM

    We are sorry for this inconvenience this might have caused. I've checked your form which is https://form.jotformeu.com/tombolanpl/2015. I can see the form cover on Preview and on Designer.

    However, I've checked your other form which is http://www.jotformeu.com/form/53537843523358 I was able to replicate mentioned issue.

    To solve this, you can add that image to your form Cover again. 

    I hope it helps.

    If you require any further information, feel free to contact us. We will be happy to assist you.

  • Profile Image

    Answered by tombolanpl on December 21, 2015 at 09:28 AM

    Thanks for the further help.

    The solution you suggest is exactly that I found and applied to the form https://form.jotformeu.com/tombolanpl/2015. So, my question is if you can help me to inject a css code so to use the original theme (by using which the cover image is better collocated at the top of the form) and then to customize the font family by code and not by acting with the font option wizard. 

    Please, let me know if you need more details.

    Thanks in advance,

    Roberto

     

  • Profile Image

    Answered by Ben on December 21, 2015 at 10:38 AM

    We can provide you with the specific code. I would like to also show you how easy it is to implement any Google Font on your form even without the designer.

    To do that, you should check out these steps:

    Beautify your Form with Google Web Fonts

    Based on that all that you need to add to your form is the following CSS:

    @import url(https://fonts.googleapis.com/css?family=Indie+Flower);

    .form-all{
    font-family: 'Indie Flower', cursive;
    }

    As mentioned, checking the guide above will allow you to see how you can manually inject any fonts into your form.

    Do let us know how it goes Roberto :)

  • Profile Image

    Answered by tombolanpl on December 21, 2015 at 10:45 AM

    Hi Ben,

    thanks for the code. Unfortunately, the problem do persists. Indeed, adding the css code makes the cover image disappear as soon as I save the form. Is there any reason? I though acting directly from css could have been different, but it isn't.

    Is there any other alternative?

    Thanks anyhow for the support.

    Roberto

  • Profile Image
    JotForm Support

    Answered by beril on December 21, 2015 at 11:05 AM

    Hi Roberto,

    I see that your theme doesn't work properly,

    Here is how it works on your form:

    Your heading is under the cover. However, the heading must be on the form cover.

    I've created a different form and tested it. It is working without any issue on my end.

    Here is how it works:

    Can you try delete that theme and add it again? At that situation I hope, it will work properly.

    If you have any question or issues, please do not hesitate contacting us. We will be glad to assist you.

  • Profile Image

    Answered by tombolanpl on December 21, 2015 at 11:33 AM

    Sorry Beril, I think you are working on a different issue, that's not the problem, rather it is my patch or solution. The form I'm speaking about (and now it has been made public so for the moment I cannot apply any change), works properly because I do manually added the picture as form cover, and for that the heading is not over the image (I don't know how to do that), but it is below. That's fine, however.

    This is the only way I find in order to have the nice picture at the beginning of the form. 

    Indeed, using the original theme, it works until you change the font family. This is quite strange for me, because the image disappears as soon as you apply the font change either via css injected code or using the wizard. 

    If you want to test that situation, please use the theme on another form, and after that, change the font and see what happens to the picture. 

    Finally, this is not a big issue, I have a workaroud and the form is alterady live, so I'll not change it for the next days. Anyhow, having a solution can be interestning for further opportunity.

    Thanks again for your efforts

  • Profile Image

    Answered by Ben on December 21, 2015 at 11:56 AM

    Are you Roberto looking to have your form look like this?

    https://form.jotform.com/53544749217967

    If that is so, you can clone the form above to your account and embed the new form instead.

    If you wish to make the change on your current form, you can simply add this CSS to your form:

    html.supernova {
        background: url("https://shots.jotform.com/elton/christmas/Santa_on_the_roof.png") no-repeat scroll center top / 100% auto rgba(0, 0, 0, 0);
    }
    button.form-submit-button:before {
        background: url("https://shots.jotform.com/elton/snow_effect2.png") no-repeat scroll 4% -2px / 66px auto, url("https://shots.jotform.com/elton/snow_effect3.png") no-repeat scroll 113% -4px rgba(0, 0, 0, 0);
    }

    You should add it to your form by following these steps: Inject Custom CSS Codes

    When you do, please do note that you should add the code under all the other CSS code in the same - after all the code shown there.

    Once done, it will look like the form above.

  • Profile Image

    Answered by tombolanpl on December 21, 2015 at 07:06 PM

    Thanks a lot, I really appreciated your valuable support.

    Now, it works.

    Regards,

    Roberto

  • Profile Image
    JotForm Support

    Answered by Chriistian on December 21, 2015 at 08:43 PM

    Hi Roberto,

     

    On behalf of my colleagues, you are very much welcome. Feel free to contact us again if you have any other issues.

     

    Regards.