Hi there,
Our forms don’t look like that by default, so this is most likely a CSS issue caused by conflicting rules in your theme.
Can you provide a live link so we can see the problem live? That way we can help provide a workaround CSS for you.
Thanks!
Hello Matt,
Finally, I encounter two bugs in the backend and two display problems in the frontend.
When Gutemberg is activated, choosing the form gives me the answer: Error loading block: The response is not a valid JSON response (see screenshots 1 – 2 – 3 and 4)
https://www.dropbox.com/s/8did3njevo4py54/1.jpg?dl=0
https://www.dropbox.com/s/jeub9wblzry9lld/2.jpg?dl=0
https://www.dropbox.com/s/mb0bbz0ru0tisxy/3.jpg?dl=0
https://www.dropbox.com/s/ugm1oxa5s8ttu79/4.jpg?dl=0
When Gutemberg is deactivated, the choice of form brings up a pink vertical bar with illegible texts (see screenshots 5 and 6).
https://www.dropbox.com/s/e8w0dtnj4iu78ys/5.jpg?dl=0
https://www.dropbox.com/s/hfbrexpjceoqhvx/6.jpg?dl=0
When I copy the shortcode in the page, it displays the name of the page + the name of the form (see screenshots 7 – 8 and 9).
https://www.dropbox.com/s/9vuef65lsp5rgwl/7.jpg?dl=0
https://www.dropbox.com/s/sk6g9wo1ymp2gco/8.jpg?dl=0
https://www.dropbox.com/s/gppngrrfzbaedlt/9.jpg?dl=0
As I said in my first post, the text below is superimposed below or above depending on whether the floating labels is activated or not (see screenshots 10 and 11)
https://www.dropbox.com/s/2wlxu52um5p1aw9/10.jpg?dl=0
https://www.dropbox.com/s/tceouwahaofchfv/11.jpg?dl=0
You can see it by going to https://forgullomestizo.org/faire-un-don/
Thanking you for the help you can give me,
Kind regards,
Wilson
Hello Matt, any news about my problems ?
Hi there,
Let me stick first to the front-end form problem that you’re facing. This is a conflict with the styles in your theme — I’m not sure why but your theme is trying to style EVERY fieldset and EVERY legend with very opinionated styles.
This should override that and get the form looking correct again.
form[id*="give"] fieldset legend {
position: relative;
margin: 10px 0;
padding: 0;
top: 0;
left: 0;
}
In regard to the Gutenberg issues, I notice in your screenshots that the “G” icon for our blocks is not there. That to me suggests something is not quite right in the first place. When you say “Deactivate Gutenberg” do you have the Gutenberg plugin installed? If so, why is that exactly? Are you running a very old version of WordPress? The Gutenberg plugin is no longer needed in modern versions of WordPress and it often has code that is in beta, not really for production purposes. Let me know the following and I can help further:
1. What version of WordPress are you on?
2. How are you enabling/disabling Gutenberg?
3. I see the plugin “Essential Grid” on your site too, is that updated to it’s latest version?
4. Let me know how that CSS fix went, I recommend adding it into the Customizer “Additional CSS” area NOT directly into the plugin at all.
Thanks!
Hello Matt,
Thank you very much for your reply
For the aesthetics of the page, it’s perfect, the custom CSS added solved everything, it’s very pretty.
For Gutemberg, it is the opposite, I have a plugin called “disable Gutemberg” because I find this interface very difficult to understand when it is meant to be simpler. I have to be a little complicated myself …
1. What version of WordPress are you on? >> 5.3.2
2. How are you enabling / disabling Gutenberg? >> I’m using “Disable Gutemberg” (https://perishablepress.com/disable-gutenberg/)
3. I see the plugin “Essential Grid” on your site too, is that updated to it’s latest version? >> I have version 2.3.6, this is the most recent
4. Let me know how that CSS fix went, I recommend adding it into the Customizer “Additional CSS” area NOT directly into the plugin at all. >> That’s great 🙂
Thank you again for your help,
Wilson
