Select2 and Nice-Select not loaded on frontend

After debugging deeper the filter hook returns the output before it enqueues the scripts at /public/class-cf7-grid-layout-public.php line 265

    /**
    * @since 1.2.3 disable cf7sg styling/js for non-cf7sg forms.
    */
    $is_form = get_post_meta($cf7_id, '_cf7sg_managed_form', true);
    if(''===$is_form || !$is_form){
      wp_enqueue_style('contact-form-7'); //default cf7 plugin css.
      return $output;
    }

maybe this helps to find my mistake

It looks like an js initialisation issue. any errors on your js console?

Is you form page available online so I an take a look?

OK After thinking about whats going on it and trying to make a fresh new form i see that “Grid” tab which is not there with my own html.

So one needs to use the “Grid” to get a “_cf7sg_managed_form”

so my solution will be either to use the grid or to enqueue the specific js/css files in my template.

• This reply was modified 5 years, 5 months ago by netzgestaltung.

After debugging deeper the filter hook returns the output before it enqueues the scripts at /public/class-cf7-grid-layout-public.php line 265

one of the problem with cf7 plugin is that it enqueues js and css on all pages of your website.

The smart-grid is enqueues css and js files only on the form pages, which is what all the code you have unhearted does.

Dynamic dropdown uses 2 different js plugins to make nicer dropdowns. The select2 plugin or the jqury nice select. currently both these js/css files are enqueued because a future version of the plugin will also distinguish which type of plugin is required and enqueue only those files.

In your case you are using select2, so you need to make sure it is being loaded properly from the assets folder (either an htaccess script is blocking it, or another plugin is also loading it and creating a conflict)

OK After thinking about whats going on it and trying to make a fresh new form i see that “Grid” tab which is not there with my own html.

ah good! yes, that would explain it. You need ot use the smart-grid to create your forms.

If you have an existing cf7 form (different html layout) then the smart-grid does not allow you to create a grid layout nor all the pretty fields that come with it.

I need to look into this aspect a little more, you’re not the first one that gets confused about this.

I will make a note to improve the helper texts to make a little clearer within the editor itself.

Hi,

i am used to write my own HTML from scratch and the Form disables the “Grid” tab then automatically.

maybe the usage of the select2 plugin or the jquery nice select could be seperated from the “Grid” feature because that button works also for the “Text” tab.

That would be an enhancement/feature request.

in my case i will use the jquery plugin in my template where i can put them collected in a “jquery-plugins.js” file an only have one file request.

kind regards
tom

• This reply was modified 5 years, 5 months ago by netzgestaltung.

Hi Tom,

i am used to write my own HTML from scratch and the Form disables the “Grid” tab then automatically.

fair enough. Keep in mind that you won’t be able to have responsive forms or columns/rows grid layout as the plugin needs to format the html to do this out of the box. You’ll need to write your own css to style your forms as such…which the plugin allows you to do (see the faq on how to customise your form).

maybe the usage of the select2 plugin or the jquery nice select could be seperated from the “Grid” feature because that button works also for the “Text” tab.

That would be an enhancement/feature request.

ya, that’s a good request. I will implement this along with other improvements in the future and get back to you on this thread.

HOwever, given that you seem to know what you are doing, feel free to do a PR on the github repo to enable select2/nice select on non-grid forms and I will pull it into the next release.

This is an open-source effort and I always welcome contributions ??

kind regards
Aurovrata

Keep in mind that you won’t be able to have responsive forms or columns/rows grid layout as the plugin needs to format the html to do this out of the box.You’ll need to write your own css to style your forms as such…which the plugin allows you to do (see the faq on how to customise your form)

thats what my business is about ?? – surely responsive and styled. that also causes usually conflicts with grid systems and pagebuilders. Your Grid html output ist better then others i have seen, but my class system differs from that.

i first need to finish my form – maybe i can write the part on the next weekend

greets
tom

that also causes usually conflicts with grid systems and pagebuilders. Your Grid html output ist better then others i have seen, but my class system differs from that

true, beginner users has comaplained about this without realising their theme messes up the styling. The plugin css style rules targets specifically the form classes, something poorly designed themes often fail to do.

There is room for improvement on the plugin form styling, such as creating cf7 specific classes for rows and columns but that would mean breaking the css code of the original smart-grid css plugin used and preventing easy updates. However, given that that plugin hasn’t has any major release in years now, it would be safe to assume that such a transformation would be safe to do. Yet another improvement to do on the plugin I guess.

maybe i can write the part on the next weekend

sooper!

got it: https://github.com/aurovrata/cf7-grid-layout/pull/13

please test ??

so this is now fixed in v3.0.0.

It has a slightly different logic to the one implemented in your PR (see the notes on GitHub), so I would appreciate it if you can test it on your forms and let me know if you find any issues.