Hi Webflow family!
It’s been a few weeks that I started using Webflow, having previous experience coding websites by hand. I got my website almost done but I’m having some real trouble with the exported contact form.
Although I was able to make it work outside of Webflow, the form is not showing the css properties I set in the designer! I don’t know why, but the CSS for the FormBox as well as for all elements inside it is not showing, and it’s breaking the layout.
After further inspection I didn’t find a single problem in the code itself, but making manual alterations in mydomain.webflow.css and in webflow.css did not alter any of the classes in the live website css, even after clearing my browser cache multiple times. I don’t know whats this is but it’s really odd.
Anyway, the real trouble here is the fact that in my temporary domain (mydomain.webflow.io) the contact form is perfect, and after exporting the code, it breaks the layout.
Does anyone have an idea of what could be causing this, or a workaround to solve this CSS bug?
Read-only link: https://preview.webflow.com/preview/siteem7dias?utm_medium=preview_link&utm_source=designer&utm_content=siteem7dias&preview=0e8d15ab347746d92843c0768f53a6df&pageId=5fadd892ff20f86b580a80ad&mode=preview
Live Website: https://siteem7dias.net/contato.html
Also I’m having a similar issue with the portfolio page, wich in the live website shows nothing
Hi @Giovanni_Pizzato Your
input height is set to
% and not
Just to set your value to
px and you should be fine
RE: the form. Give your input fields a height in pixels, not %. You are seeing the default height of 38px in Webflow’s base CSS, which is overriding your 90% value.
I see content so not sure why you aren’t. Your aware that CMS items don’t get exported right?
Hey @Stan, thanks for the quick reply!
I just changed the height value from 90% to 70px, but I’m still getting the same issue. When I inspect the live website’s code in the browser, I don’t see all css classes being applied to FormBox and its children. Here’s a screenshot:
Where is the form-box class? I have properties for it set in the designer, and the exported css code shows it as well:
But is not applied in the browser
Any idea of what could be the issue? Thanks in advance!
You can see that your class Is overwritten by webflow settings.
If you have any question I’ll be back about an hour.
Hey @webdev thanks for the reply! It makes sense that the 90% height value is being overwritten, will watch out for future projects!
In the case of my portfolio page, I’m aware that CMS items don’t get exported, that’s why I build these items with common divs and hover interactions in them to avoid export headaches.
Each portfolio item has a bg div with the image, and another div on top of it that only shows on hover. The bg has position set to relative, and the hidden info has position set to absolute.
After inspecting the code, I’m seeing the same issue as with my contact form, where not all css classes created in Webflow are being applied to the element. Here’s the screenshot:
And here’s the exported css:
Furthermore, the css stylesheet seems to be correctly linked in the head of the html, which furthers my confusion.
Any idea of what’s happening?
The screenshot I sent was from the
https://siteem7dias.net/portfolio.html page. Try clearing your cache.
I cleared my cache multiple times, on 4 different browsers and on 2 other devices (one of them never accessed my website), and I still can’t see the divs! I don’t know how you can, am I doing something wrong?
Look up the IP address and make sure you are not hitting a local dev instance, or a proxy server that has cached the page.
Oh man this might be it! I installed Cloudfare CDN on my website, maybe it has a cached version of my site available near my area? Does it make sense? (not a CDN pro lol)
And how do I check if I’m seeing a cached version from a proxy server? Or a local dev instance?
Seems to work now, what was the problem.
I’m still seeing the problem. Is it because of CDN caching?
(currently using Cloudfare)
This is from my browser. Same result in all browsers.
I’ll disable CDN and see if it fixes the problem. So far, thank you so much for the feedback!
I believe you did that but just in case
It turns out Cloudfare has a DEVELOPMENT MODE! I turned it on and the pages finally show correctly!
I feel so stupid right now, I was developing and seeing the results on a cached page, which was driving me nuts!!
Thank you so much @Stan and @webdev for all your input, it was super useful to pinpoint the source of the problem. My first post here and it ended in SUCCESS!
Looking forward to being part of the community! Cheers!