Changing font family automatically delete form cover

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

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.

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

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.

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

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 :)

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

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.

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

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.

Thanks a lot, I really appreciated your valuable support.

Now, it works.

Regards,

Roberto

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.