1

I want to change the font-family of my embedded (via iframe) Zoho form to futura or futura pt. I am using Squarespace, so custom css is possible.

This is the URL to my website: deleted

I tried this code - nothing happens



 .tempHeadContBdr .frmTitle {
    font-family: 'futura';
    font-size: 33px;
    color: #030303;
    font-style: normal;
    font-weight: 500;
    font-weight: 5; 
}

In the "inspect mode" I am able to change the font-family. embedded form

I hope you can help me with this issue!

subsequent amendment: @Sagar Gaikwad: This is how a tried to add the style parameters: code block in SquareSpace

AnDo
  • 25
  • 4

2 Answers2

1

The iframe embed is self-contained, so the CSS from your Squarespace site isn’t going to be applied.

Ideally, what you’d be able to do is add custom CSS to your form provider as well, but unfortunately it looks like Zoho doesn’t support this. There are a lot of questions about it on their support forum, ex: https://help.zoho.com/portal/en/community/topic/how-do-i-change-a-zoho-creator-form-s-styling-with-css

You could choose to download the HTML & CSS from the form: https://www.zoho.com/forms/help/share/embed.html#download-html

That could be added into a Squarespace HTML block—but then you’d presumably be losing a lot of the reasons you’d be using a hosted form service in the first place (ex. if you updated your form fields, they wouldn’t be getting updated in your HTML anymore).

When you are using the inspector, when you change the styles, you are styling within this iframe. In practice, you can’t do that via your Squarespace site. It’s the same idea as this question: How to apply CSS to iframe?

kennethormandy
  • 2,080
  • 14
  • 16
  • Wow, that was a quick and great answer! Thank you! You helped me a lot - I did not know the CSS from my Squarespace site isn't going to be applied. And yes, I think I would lose to many advantages by embedding the form with HTML. Thank you for showing the alternative solutions! – AnDo Dec 17 '20 at 12:17
  • You’re welcome, I’m glad it was helpful! If you could mark the answer as accepted, that’d be great. – kennethormandy Dec 17 '20 at 18:22
0

Passing the parameter from url: https://www.zoho.com/creator/help/url-pattern/style-based-urls-for-embedded-forms.html#6._View_Customization

or

used google font

Sagar Gaikwad
  • 129
  • 4
  • Thank you! Can I add these codes only to a html script? I tried to add it underneath the JavaScript which is embedded in SquareSpace as html code block. But this does not work. `
    `     – AnDo Dec 22 '20 at 07:13
  • Ah I think, I can't use the parameters with Zoho Forms only with Zoho Creators – AnDo Dec 23 '20 at 05:55