Editor crashed – can’t edit form

good question. That’s a bug. I will get you a fix before the end of this day!

Thanks a lot !

Here is a fix available as 4.4.3 beta on the GitHub repo. Can you update your server manually and let me know if it fixes the issue.

Yes It works ?? Thanks

great, will release it in teh official repo.

Hello,

same problem again :'( I wanted to make a complex html structure in a group….

Il y a uneerreur Javascript sur la page, probablement due a un conflit qui empêche l’initialisation de l’éditeur.
Error: Syntax error, unrecognized expression: li.cf7sg-tag-all,li.cf7sg-tag-radioli.cf7sg-tag-all,li.cf7sg-tag-/group]
(file: https://www.srfb.be/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp, line: 2)

And in navigator :

Uncaught Error: Syntax error, unrecognized expression: li.cf7sg-tag-all,li.cf7sg-tag-radioli.cf7sg-tag-all,li.cf7sg-tag-/group]
jQuery 9
scanCF7Tag https://www.srfb.be/wp-content/plugins/cf7-grid-layout/admin/js/cf7-grid-layout-admin.js?ver=4.4.3:1063
html2gui https://www.srfb.be/wp-content/plugins/cf7-grid-layout/admin/js/cf7-grid-layout-admin.js?ver=4.4.3:886
buildGridForm https://www.srfb.be/wp-content/plugins/cf7-grid-layout/admin/js/cf7-grid-layout-admin.js?ver=4.4.3:209
jQuery 2
buildGridForm https://www.srfb.be/wp-content/plugins/cf7-grid-layout/admin/js/cf7-grid-layout-admin.js?ver=4.4.3:206
<anonymous> https://www.srfb.be/wp-content/plugins/cf7-grid-layout/admin/js/cf7-grid-layout-admin.js?ver=4.4.3:721
jQuery 4

• This reply was modified 4 years, 4 months ago by akawan.
• This reply was modified 4 years, 4 months ago by akawan.

complex html structure in a group

can you please paste the structure you are trying to create

[group PROPRIO clear_on_hide]
<div class=”columns one-half”>
<div class=”container”>
<div class=”row”>
<div class=”columns one-half”>
<div class=”field”><label>Prénom*</label>[text* proprio-firstname]
<p class=”info-tip”> </p>
</div>
</div>
<div class=”columns one-half”>
<div class=”field”><label>Nom*</label>[text* proprio-lastname]
<p class=”info-tip”> </p>
</div>
</div>
</div>
</div>
<div class=”container”>
<div class=”row”>
<div class=”columns full”>
<div class=”field”><label>Adresse*</label>[text* proprio-address]
<p class=”info-tip”>Rue et numéro</p>
</div>
</div>
</div>
</div>
<div class=”container”>
<div class=”row”>
<div class=”columns one-half”>
<div class=”field”><label>Code postal*</label>[text* proprio-cp]
<p class=”info-tip”> </p>
</div>
</div>
<div class=”columns one-half”>
<div class=”field”><label>Ville*</label>[text* proprio-city]
<p class=”info-tip”> </p>
</div>
</div>
</div>
</div>
</div>
<div class=”columns one-half”>
<div class=”container”>
<div class=”row”>
<div class=”columns one-half”>
<div class=”field”><label>Téléphone*</label>[tel* proprio-tel]
<p class=”info-tip”>Fixe ou GSM</p>
</div>
</div>
<div class=”columns one-half”>
<div class=”field”><label>Fax</label>[tel proprio-fax]
<p class=”info-tip”> </p>
</div>
</div>
</div>
</div>
<div class=”container”>
<div class=”row”>
<div class=”columns full”>
<div class=”field”><label>Email*</label>[email* proprio-email]
<p class=”info-tip”>   </p>
</div>
</div>
</div>
</div>

</div>
[/group]

the format of your HTML seems to be wrong, try this

[group PROPRIO clear_on_hide]
      <div class="columns one-half">
      <div class="container">
      <div class="row">
      <div class="columns one-half">
      <div class="field"><label>Prénom*</label>[text* proprio-firstname]
      <p class="info-tip"> </p>
      </div>
      </div>
      <div class="columns one-half">
      <div class="field"><label>Nom*</label>[text* proprio-lastname]
      <p class="info-tip"> </p>
      </div>
      </div>
      </div>
      </div>
      <div class="container">
      <div class="row">
      <div class="columns full">
      <div class="field"><label>Adresse*</label>[text* proprio-address]
      <p class="info-tip">Rue et numéro</p>
      </div>
      </div>
      </div>
      </div>
      <div class="container">
      <div class="row">
      <div class="columns one-half">
      <div class="field"><label>Code postal*</label>[text* proprio-cp]
      <p class="info-tip"> </p>
      </div>
      </div>
      <div class="columns one-half">
      <div class="field"><label>Ville*</label>[text* proprio-city]
      <p class="info-tip"> </p>
      </div>
      </div>
      </div>
      </div>
      </div>
      <div class="columns one-half">
      <div class="container">
      <div class="row">
      <div class="columns one-half">
      <div class="field"><label>Téléphone*</label>[tel* proprio-tel]
      <p class="info-tip">Fixe ou GSM</p>
      </div>
      </div>
      <div class="columns one-half">
      <div class="field"><label>Fax</label>[tel proprio-fax]
      <p class="info-tip"> </p>
      </div>
      </div>
      </div>
      </div>
      <div class="container">
      <div class="row">
      <div class="columns full">
      <div class="field"><label>Email*</label>[email* proprio-email]
      <p class="info-tip">   </p>
      </div>
      </div>
      </div>
      </div>

      </div>
      [/group]

it works for me. however the double quotes in your HTML markup used for containing class attributes are wrong and causing a formatting issue in the editor.

Did you create this HTML code using the editor or did you cut and paste from another text editor?

I no longer have access to my form editor so I cannot test. If I create a new form and copy the code it doesn’t crash but I only see the html part of the editor. Too bad we can’t post pictures here …

I no longer have access to my form editor so I cannot test.

yes, that’s a bit of a bummer, and I realise I need to improve this part of the editor. I will work on a fix, sorry about that!

If I create a new form and copy the code it doesn’t crash but I only see the html part of the editor.

The UI editor works by recognising the HTML structure that it creates. If you change that structure it tries to rebuild the UI and place your custom code in a text editor instead of a column cell…however, if you change the outer structure (the div.container) then it assumes the entire form is no longer using the UI markup and therefore disable the UI editor altogether.

Too bad we can’t post pictures here …

you can upload a screenshot on a file sharing platform such as Snipboard.io and provide the link here.

yes, that’s a bit of a bummer, and I realise I need to improve this part of the editor. I will work on a fix, sorry about that!

do you have any idea when the fix will be available? In the meantime, where is my form? Which file should I see in the backend to retrieve the code? It’s a pro form, I have already exceeded my deadline of one week …

try the following:

open the file:

wp-content/plugins/cf7-grid-layout/admin/js/cf7-grid-codemirror.js

and on line 15 (which should be blank), paste the following lines of code

$('.loading-screen',$formEditor).hide();
$('#publish').prop('disabled', false);
$('#wpcf7-form-hidden').show();

save and refresh your page and browser cache. If there are js errors on your page then the editor will fail to initialise properly, but you should see a textarea (id=wpcf7-form-hidden) on your page which contains the HTML form as it was last saved.

Copy the content of the textarea, create a new form, switch to the HTML editor, paste the copied content and edit/fix your HTML code before saving it again.

Remove the above 3lines of code you pasted in the js file, reload the form and you should be good to go.