NO BUG: Unable to submit forms when there is an icon on the submit button (FancyBricks conflict)

Bugs
1

Browser: (Vivaldi, Chrome based browser)
OS: Windows
URL: Here the staging site for you to see : Falkbuilt Montréal-Québec-Ottawa – Spécialiste en construction intérieur commercial. That one doesn’t work, while the other one on the contact page, which is pretty similar, is working and the only difference is the presence of the icon on the home page.

I came across something very strange today… I don’t know if there is a “known issue” thing or not, but anyway, just in case someone faces the same issue…

We have a Bricks site with the latest version installed. We also have Advanced Themer and WPML, but saw that the issue wasn’t coming from the presence of those two plugins…

We have a contact form both on the home page and contact page. We were not able to submit the form at all!!

After a lot of research, disabling plugins and all, I finally found out that the issue was just that the submit button had an icon!!! I don’t know if it’s a bug inserted in 1.9.1 as the icon is one option of the submit button, but anyway… I noticed it because a new form was showing a little anymation (spining arrows) on the submit button when clicking on it, and of course because of the icon that animation wasn’t showing… SO, don’t know if it’s the icon or it covers something or breaks JavaScript, but as soon as we removed the icon, the form started to work!

1 Like
2

Just a note: we’re using a Themify icon (right arrow).

3

Hi Nelson,
Thanks so much for your report, and welcome to the forum!

Unfortunately, I cannot reproduce the issue. Can you add the icon back to the home page so I can see the problem?

Best regards,
timmse

4

Hi timmse,

It is already there on the staging site that I sent you: Falkbuilt Montréal-Québec-Ottawa – Spécialiste en construction intérieur commercial at the bottom of the page there is a form with a submit button.

On the Contact page (Contact Us – Falkbuilt Montréal-Québec-Ottawa), there is a similar form, but that one is working because the icon has been removed.

I just notice that in the Chrome console, this error appears: “Uncaught TypeError: Cannot read properties of null (reading ‘querySelector’)
at HTMLButtonElement. ((index):307:32)
(anonyme) @ (index):307”, which obviously is not the case when the icon is not present, since it works.

Nelson

P.S. I’ve set up the staging site so that you can test it… So, if there is a way to send private information, I can send you the login info.

5

Maxime Beguin (what a great guy!) really helped me out in the FB group!

He found out that the script that FancyBricks is adding to the header (!) for the sub-menus is causing the issue… If I put the icon to the left, then that script is not triggered and it works fine… I’ll let FancyBricks know and hopefully they will fix it.

I will close the ticket (if I can… if not, you can close it).

1 Like
6

Hey Nelson,
Glad you found the cause of the problem. We are glad to have Maxime as a user :heart:

1 Like