How can I get embedded forms to inherit form styles from our website?

  • Profile Image
    ALICE_ACH
    Asked on December 08, 2020 at 01:45 PM

    Hi there,

    We're hoping to embed our JotForms forms into our website (med24.clinic) to integrate with OpenCRM, our CRM platform for all customer contact points.

    Styling the forms individually to match our website is proving to be time consuming and difficult, even with the CSS editor / advanced editor styles.

    Is there a way to use "vanilla" form styles and have them inherit the CSS styles from our website? Or an easier way to get all of our forms to align with our website styles?

    Thanks!

  • Profile Image
    Niko_N
    Answered on December 08, 2020 at 03:54 PM

    Greetings,

    The best possible option would be to use the Card Layout forms:

    How to Create a Jotform Card?

    Once created, you can enable the Smart Embed feature for the forms by following this guide below:

    How to Enable the Smart Embed Feature in Jotform Cards?

    Smart Embed feature will automatically apply the following options:

    🔘 Button colors, header fonts, and the buttons' border-radius will adapt to the related website's styles.

    🔘 The form of the background color will become transparent.

    🔘 If there is a page background image on the form, it remains on embed as well.

    Thus, this will ensure form match the styles of your website automatically.

    Please give it a try and let us know if you have further questions.

    Thank you!


  • Profile Image
    ALICE_ACH
    Answered on December 15, 2020 at 11:22 AM

    OK, I'm not sure the Cards layout is going to work for our use case...

    Is there any way to apply styles to *all* of our Jotforms at once? Even if this has to be done within the Jotform UI, it would save a lot of repeated work across our 5-6 forms.

    Thanks!

  • Profile Image
    roneet
    Answered on December 15, 2020 at 01:00 PM

    You can embed the form to your website using the Full source code and add additional CSS codes to your webpage. You can point to your custom CSS files.

    https://www.jotform.com/help/104-how-to-get-the-full-source-code-of-your-form

    Let us know how it goes.

    Thanks.