How To Change Font Style of Text and Labels in Gift Registry Widget?

how do I get the "Form Style" tab?

I do see the a "Setup & Embed" tab as well as a "Properties; ..." tab. But I don't have a "Form Style" tab....

I checked on different forms and different widgets... but non "Form Style" tab.

Thanks!

Hi,

Since JotForm now uses the new Form Designer, we have move most of the style tools in the designer. But you can still do some common styling within the Form Builder.

For the Style tab, you can access it by

#1 Click Setup & Embed

#2 Preferences

#3 Form Styles

the Style tab should be available.

 

then you can now use the Font styles to use in your Gift Registry widget on the form.

Hope this help. Let us know if you need further assistance.

Thanks.

 

Hello,

It doesn't seem to do it for me...

In both cases, it allows to change the font of the labels - for all of the forms/widgets but it has no influence at all on the font inside the Gift Registry Widgets.

I tried through the designer with no success either. 

The issue is the font "inside" the widget.

 

Thanks,

 

 

Hi,

You can change the font of the widget text by adding a custom CSS code inside the widget itself.

 

In my case, I use the import function of Google Fonts, you can find it here: https://www.google.com/fonts.

1. In Google Fonts website, choose a font and click "Quick Use".

2. Scroll down and click "Import", you should use the code then.

 

This is the custom CSS code that I will add in my widget:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:800italic);

label {

font-family: 'Open Sans';

}

 

I hope this helps. You can also check this guide that we have: http://www.jotform.com/help/100-Beautify-your-Form-with-Google-Web-Fonts.

Here's a demo form that have to see the changes: http://form.jotformpro.com/form/50343675351958.

Let us know if you need more assistance on this.

Thank you.

 

Works fine... I am now able to modify the font and size of the registry item label!

How could I now access the item counter label (the green text on the right - like change the green to red)?

Thanks so much.

 

That is great to hear.

Now in regards to your question about the green text on the right - It can be styled by using this class: items-left

This means that this code:

.items-left {
   color: red;
}

would change the color of that text to red.

Right on the stop! Thank you so much!