No styles for a form when editing in Elementor Pro

  • Hello,
    I have a question about the Gravity Forms widget. In the Elementor Pro editing mode, when placing a widget on a page, a form appears as completely styleless – “naked” html is displayed (1). At the same time, the design styles are applied correctly when viewing the page (2). This behavior makes it extremely difficult to edit form styles using the widget. How do I make styles appear in edit mode? Thank you.

    (1) Form layout while editing in Elementor Pro https://c2n.me/4lAQ4nH.jpg
    (2) Form layout on the page (preview mode) https://c2n.me/4lAQ4KW.jpg
    (3) Form preview in the Gravity Forms editing panel https://c2n.me/4lAQ5cE.jpg

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Md. Anower Hossain

    (@anowerhossain16)

    Hi @alexschneider_ru,

    Thanks for reaching out to us. We have previously found an issue which is related to your shared issue. Updating the Gravity Form, Elementor, & HappyAddons to the latest version resolves the issue. According to your findings, we have already checked on several scenarios but we didn’t find any issue like this.

    The first thing you need to try is to check the versions of your plugins as well theme. If you are in the latest version and still facing the issue, it might be a site-specific issue. Please reach out to our technical support for further deep investigation. You can use our contact page to reach out to us.

    Thanks and have a nice day.

    Thread Starter alexschneider_ru

    (@alexschneider_ru)

    Hello again,
    I examined the page code in Elementor editing mode and in the final version and found that the following style sheets do not load in editing mode:

    <link rel='stylesheet' id='gform_basic-css' href='/wp-content/plugins/gravityforms/assets/css/dist/basic.min.css' />
    <link rel='stylesheet' id='gform_theme-css' href='/wp-content/plugins/gravityforms/assets/css/dist/theme.min.css' />

    while they are present in the code of the final page. It is these two css files that are responsible for the layout of the form (the mutual arrangement of fields). I suppose this is a bug in your widget. If I add these styles to the page (for example, using the ‘html’ widget), the form starts to display correctly.

    P.S. These style sheets are valid if the ‘GF 2.5’ theme is selected in the Gravity Forms settings. If one uses the ‘Orbital’ theme, then they need other files, namely:

    <link rel='stylesheet' href='/wp-content/plugins/gravityforms/assets/css/dist/gravity-forms-theme-framework.min.css' />
    <link rel='stylesheet' href='/wp-content/plugins/gravityforms/assets/css/dist/gravity-forms-theme-foundation.min.css' />

    Thread Starter alexschneider_ru

    (@alexschneider_ru)

    Another problem of your widget is uncorrect display of a checkbox. e.g. https://c2n.me/4lCPj7C.jpg

    Plugin Support Md. Anower Hossain

    (@anowerhossain16)

    Hi @alexschneider_ru,

    Thanks for the update and details regarding your findings. We will check and take the necessary steps regarding the issue.
    Would you please just share that if changing the language to English still throwing the error or not? Check both the form style issue and the checkbox issue in the English language.

    Let us know the update. Have a nice day.

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.