custom script (and css) always uses the key of the first created form(faq#8)

Hello Willy,

when you create a form, a unique key (the cpt slug) is created from the title of the form.

Thus, a form titled “Registration Form” will have a unique key ‘registration-form’ created. You can change this key if you wish.

This plugin uses the key rather than the post ID to identifiy forms, this makes it more portable from one server to another.

Whne you form is being loaded on the front-end, the plugin identifies if the following files exists,

<your-theme-folder>/js/registration-form.js
<your-theme-folder>/js/registration-form.js

if found, the are loaded on the page.

For some reason, only the key cf7-key of the form I created first, is taken into account, and all changes I make to that script/css, are applied to all forms I have created.

when you create a new form, the same logic applies and only that form’s unique key is used to determine the existence of the files.

However, if you are testing your forms on the same page, then you will have the same files loaded. Even if your original form is not in that page, it is possible for your browser to cache the original files for this page, thus creating this confusion.

Thank you for your prompt reply @aurovrata,

My misunderstanding,
I have indeed 5 buttons and forms (in popups, using the “Popup Builder”) on my page.
That explains.

May I blame it on my being new in the WP and web environments?

So if I understand well, the use of multiple forms on the same page is a bit tricky.

So if I understand well, the use of multiple forms on the same page is a bit tricky.

not really. THis is one of the improvements this plugin brings to CF7, it is specifically designed to allow multiple forms to reside on teh same page.

You need to be more carefull with your js/css resources and target each form appropriately.

The plugin wraps each form with a unique id cf7sg-form-<cf7_key> container element, so for the above example with the cf7_key = registration-form, the form would be wrapped with the following html container,

<div class="cf7sg-container">
  <div id="cf7sg-form-registration-form" class="cf7-smart-grid">
    <form>
    [...]
    </form>
  </div>
</div>

this allows to specifically target your form for custom styling,

#cf7sg-form-registration-form{
/* some custom rules */
}

or to select js element within the form,

$(':input', $('#cf7sg-form-registration-form')).on('change', function(e){
  //some custom script.
});

this way you can still maintain individual custom css/js files which will only affect the target forms.