Firefox isn't showing forms on our website created with Formidable Forms
Hi there,
I work for a small UK based charity and we use our website to take orders for our programmes, we deliver DARE programmes in the UK.
Our website is https://lifeskills-education.co.uk.
We use WordPress as our CMS and use Formidable Forms to create forms for people to place orders; these forms work fine in Chrome and Edge, but will not display in Firefox. I have tried everything, disabling third party scripts, all plugins, themes and more, but Firefox refuses to show them. It sees the HTML, but when inspected the HTML is greyed out. It is not greyed out on Chrome.
https://lifeskills-education.co.uk/resources/the-dare-primary-programme/ is the page where an order form should show on the left above the fold. It is titled Place an Order.
There is nothing I can find anywhere that can help me with this issue, Google has come up blank and I am not a web developer so don't have the tech chops to track this down.
Any help appreciated. Thanks.
Stuart
Chosen solution
I'm not sure how this is supposed to to work.
I see a display:none rule for that form if I check this in the Inspector (#mysticky). I assume that there should be JavaScript that adds the frm_no_hide classname to make the form visible (disabling this rule in the Inspector works to display the form).
.js .frm_logic_form:not(.frm_no_hide) {
display: none;
}
I see this code in the debugger to unhide the form:
response.content=response.content.replace(/ frm_pro_form /g," frm_pro_form frm_no_hide ");
Best is to ask elsewhere for support on a forum like Reddit or Stack Overflow.
Read this answer in context 👍 1All Replies (4)
Chosen Solution
I'm not sure how this is supposed to to work.
I see a display:none rule for that form if I check this in the Inspector (#mysticky). I assume that there should be JavaScript that adds the frm_no_hide classname to make the form visible (disabling this rule in the Inspector works to display the form).
.js .frm_logic_form:not(.frm_no_hide) {
display: none;
}
I see this code in the debugger to unhide the form:
response.content=response.content.replace(/ frm_pro_form /g," frm_pro_form frm_no_hide ");
Best is to ask elsewhere for support on a forum like Reddit or Stack Overflow.
I see a difference between Firefox and a couple other browsers, probably resulting from a script, but there are so many scripts, it is difficult to tell what is doing what.
Firefox: <form id="form_dare-25preorderform" class="frm-show-form frm_pro_form frm_logic_form " enctype="multipart/form-data" method="post" >
Edge: <form id="form_dare-25preorderform" style="display: block;" class="frm-show-form frm_pro_form frm_logic_form " enctype="multipart/form-data" method="post">
Chrome: <form id="form_dare-25preorderform" style="display: block;" class="frm-show-form frm_pro_form frm_logic_form " enctype="multipart/form-data" method="post">
Since it is a paid product, you may want to ask the vendor if it is a known problem and/or whether there is an update or workaround. https://formidableforms.com/knowledgebase/
So both of you have helped in different ways, thank you so much for responding.
I have a hack in place using the selector cor-el hightlighted. Not pretty, but effective!
jsher2000, you have highlighted an issue which I was hiding from, too many scripts. It is so easy to add in stuff you don't need when you don't really know what you're doing! Culling of stuff we don't need commencing...
Also, you highlighted the fact that as a lifetime license holder our support for Formidable has run out, we should probably purchase a new plan!
Thank you again for taking the time to help out, it is very much appreciated.
Stuart
Modified by thebastion