Smart Embed: Form is not inheriting style from parent page

  • Profile Image
    vincentphilippe
    Asked on January 30, 2018 at 10:54 AM

    Hi Jotform,

    Can you explain why it s impossible to custom CSS and fonts with the "Single Question in One Page" Mode ? 

    Customisation is really narrow in this mode and I can't apply my brand graphic identity, this is could be a no go to use this framework. I'm really annoyed with this limitations.

    Regards




  • Profile Image
    Kevin_G
    Answered on January 30, 2018 at 12:00 PM

    I think the CSS code section was removed in order to help our users to customize forms using the settings and avoiding conflicts between the styles. Please note that if you're embedding you form it will take the page's style if smart embed is turned on, the option can be found on the publish wizard, here's a guide to get to that wizard: https://www.jotform.com/help/34-Adding-a-Form-to-a-Web-Page 

    Besides the font, what other changes you would like to implement to your form? 

    Please let us know so we can pass your feedback over to our second level. 

    We will wait for your response. 

  • Profile Image
    vincentphilippe
    Answered on January 30, 2018 at 04:02 PM

    Hi Kevin,

    We also need to change the shape of the boxes (square rather than round).

    Thanks for you reply.

  • Profile Image
    Welvin
    Answered on January 30, 2018 at 05:13 PM

    My colleague suggested enabling the Smart Embed in the form Publish wizard. Did you do it and do not like the result?

    The Smart Embed will adopt your website styles and apply it to your form buttons, header fonts, and form's border radius. 

    Also, you are on card layout, but we can change it to All Questions in One Page layout. If you would like to switch, let us know, and we'll be glad to do it. 

  • Profile Image
    jlCamors
    Answered on January 31, 2018 at 10:35 AM

    Hello Welvin,

     the forms is in 'single Questions in One Page' layout and smart embed is on, and the font ' Helvetica Neue' is ok only on my MacBook ! 

    Url : https://cobiz.orange-vallee.net/JotForm/testIframeJotform_2.html

    font ok : 1517412711fontSafariJL.png


    font KO : 

    1517412781fontVincent.png

    Could you help us please ?

    Thanks

    JL

  • Profile Image
    Kevin_G
    Answered on January 31, 2018 at 11:48 AM

    The custom fonts option is already available on the new forms layout, please go to the designer tool and find the option under the custom tab, currently there are 20 available fonts that you can use with your forms: 

    15174172731.gif

    I hope this helps. 

  • Profile Image
    jlCamors
    Answered on February 01, 2018 at 05:46 AM

    Hello Kevin,

     we want to use 'Helvetica Neue' which is not in the list of the available fonts! (sorry for the bad english ;)

  • Profile Image
    Adrian
    Answered on February 01, 2018 at 07:35 AM

    Unfortunately, 'Helvetica Neue' is not available in the list of fonts.

    The reason you are seeing Helvetica on your MacBook and not on other OS-es is that 'Helvetica' is installed by default on Mac OS and it is now the default font on Mac OS.

    All the options to change the form look manually are available by clicking the Form Designer button and selecting the CUSTOM tab.


    Let us know if you have further questions.

  • Profile Image
    vincentphilippe
    Answered on February 05, 2018 at 06:55 AM

    Hello Welwlin, Hi Jotform

    We still have no answer regarding our issue.

    Jotform is said to be bull customizable since Smart Embed is activated

    Welwin, you said : "The Smart Embed will adopt your website styles and apply it to your form buttons, header fonts, and form's border radius. "

    jlCamors said he did on this page https://cobiz.orange-vallee.net/JotForm/testIframeJotform_2.html

    But it doesnot work with our font.

    Could you please give us the right solution ?


    Vincent


  • Profile Image
    Adrian
    Answered on February 05, 2018 at 08:07 AM

    Hi Vincent,

    Welwin, you said : "The Smart Embed will adopt your website styles and apply it to your form buttons, header fonts, and form's border radius. "

    jlCamors said he did on this page https://cobiz.orange-vallee.net/JotForm/testIframeJotform_2.html

    But it doesnot work with our font.

    Could you please give us the right solution ?

    The page that the form is embedded is empty. It has no other elements except the form, so the form has nothing to adapt to.

    Please try embedding your form it inside a real page on your website where there are other elements and CSS styles applied.

  • Profile Image
    vincentphilippe
    Answered on February 05, 2018 at 09:53 AM

     Hello Adrian,

    I have a new URL : https://cobiz.orange-vallee.net/JotForm/testIframeJotform_3.html

     i've put the same text : 'Qualification de votre projet' in the widget JotForm and the html page.

    The style is applied on the <Body> of the page

    And the font are still different  on IE 11 : Ok for the text in the html page, Ko inside the widget ! 

    Could you tell me what i have to do ?

    Thanks.

    JL

  • Profile Image
    Welvin
    Answered on February 05, 2018 at 10:20 AM

    Please note that Smart Embed is only available on default JS embed method, not the iframe. You are using the iframe method to embed the form. Please switch it over to see the result. 

  • Profile Image
    vincentphilippe
    Answered on February 06, 2018 at 10:49 AM

    Hello Welvin,

     yes i agree, i switch on : https://cobiz.orange-vallee.net/JotForm/testIframeJotform_2.html

    but the result is the same ! you can see the text : "Identité du client ou prospect" have not the same font in and out of the widget !

    Thanks.

    JL



  • Profile Image
    Adrian
    Answered on February 06, 2018 at 12:19 PM

    I will forward this to our developers and see if there is something that can be improved in the Smart Embed.

    In the meanwhile, you can turn off Smart Embed and use a font from our available fonts.


    We will let you know when there is an update.

    Thank you.

  • Profile Image
    Jean-luc Camors
    Answered on February 07, 2018 at 04:34 AM

    Thanks, i wait for it impatiently.

  • Profile Image
    Vincent
    Answered on February 07, 2018 at 05:55 AM

    Hi Adrian, hi Jotform

    As every company, we need to respect our brand identity (colors, shape/radius, font,logo).

    This issue with Smart Embed & the restricted customization on Single Page per Questions layout makes impossible for us for until now to send forms to customers.

    I hope this issue is seriously considered by JotForm. We actually subscribed to Bronze Account and we will consider going on following your coming answers.

    Kind regards,

    Vincent 


  • Profile Image
    Welvin
    Answered on February 07, 2018 at 07:02 AM

    We had just released the Card Forms yesterday. I'm sure our developers are serious about these matters. There is no way they can't be serious, especially for bugs like this. We'll keep you updated. 

  • Profile Image
    asil
    Answered on February 12, 2018 at 07:02 AM

    Hello, I have checked given link(https://cobiz.orange-vallee.net/JotForm/testIframeJotform_2.html) and page's style properties. There is nothing that SmartEmbed can find in page. As we have a font option in our designer, we did disable font feature in SmartEmbed. You can select from available fonts in designer.

    Thank you.

  • Profile Image
    Jean-luc Camors
    Answered on February 13, 2018 at 05:08 AM

    Hello, there is '<h1>Identité du client ou prospect</h1>' in the html page and the font is applied on the <body> (Helvetica Neue)!

    If it's not enough for SmartEmbed, could you give me a sample to make this functionality OK ?

    Thanks

  • Profile Image
    asil
    Answered on February 13, 2018 at 05:32 AM

    Hello,

    As I have mentioned in my answer before, font feature is disabled for SmartEmbed. You may choose a font in designer.

    Thank you. 

  • Profile Image
    jlCamors
    Answered on February 13, 2018 at 05:37 AM

    ah ok i dont understand precisely !

    Thanks

  • Profile Image
    vincentphilippe
    Answered on March 13, 2018 at 11:38 AM

    Hi Jotform, Hi Welwin,

    We still encounter severe issues with the css customization of our Jotforms , that make impossible to broadcast our forms to customers. It s been now a while we've been asking for your support, without efficient result.

    Fullfilling our company graphical guideline is mantory for any communication towards customers (like every large comany).

    We tried evey workaround you advised us, we lastly use the Iframe Publish method to paste the code on our own page in the aim to customize the form with our company identity CSS (font, radius, case, colors, padding) and it is not efficient since the CSS of the called jotform erases our own CSS.

    Can you provide a clear and efficient solution for a basic need ?

    Do you know if Typeform allow this customisation better than Jotform ? Because we really need a short term solution ?

    Thank you



  • Profile Image
    Kevin_G
    Answered on March 13, 2018 at 01:03 PM

    @jlCamors, 

    You can change the font family on the designer tool: 

    15209604901.gif

    As explained by our developer above, the fonts do not automatically change with the smart embed option. 

    @vincentphilippe, 

    In order to assist you better with your new concern, I have moved your response to another thread, we will assist you as soon as possible here: https://www.jotform.com/answers/1413689 

    Thanks.