posted on October 3, 2024
        
If your looking to remove the form body and display all fields directly on a full sized background image or pattern this CSS is handy for making the form body background transparent.
To demonstrate let's use this randomized gradient background from https://www.csshero.org/mesher/
I can set that as the body of my form with the following CSS
html, body {
  margin: 0;
  min-height: 100vh;
}
body {
background-color:hsla(0,100%,50%,1);
background-image:
radial-gradient(at 40% 20%, hsla(28,100%,74%,1) 0px, transparent 50%),
radial-gradient(at 80% 0%, hsla(189,100%,56%,1) 0px, transparent 50%),
radial-gradient(at 0% 50%, hsla(355,100%,93%,1) 0px, transparent 50%),
radial-gradient(at 80% 50%, hsla(340,100%,76%,1) 0px, transparent 50%),
radial-gradient(at 0% 100%, hsla(22,100%,77%,1) 0px, transparent 50%),
radial-gradient(at 80% 100%, hsla(242,100%,70%,1) 0px, transparent 50%),
radial-gradient(at 0% 0%, hsla(343,100%,76%,1) 0px, transparent 50%);
}
But the form body background remains on top
To hide the form background add this CSS
#cf-formtitle, .cf-formwrap {
  background: hsla(0, 100%, 50%, 0.0) !important; 
}
                                    
                                    
                                        7
                                    
                                        
                                            0