How to create a blurry background for signup form in WordPress

Adding a blurry background to your signup forms in WordPress can significantly increase conversion rates by creating visual interest and curiosity. Here’s a comprehensive and technically accurate guide to implementing this effective design technique.

3 ways to set up a blurry background

WordPress owner can pick one method that works for the site and you comfortably do.

Method 1: Using CSS (No Plugins Required)

1. Identify your form container
   • Inspect your signup form using browser developer tools (right-click → Inspect)
   • Note the ID or class of your form container (e.g., #signup-form or .newsletter-form)
2. Add custom CSS to your WordPress site
   • Go to WordPress Dashboard → Appearance → Customize → Additional CSS
   • Most themes support this method; no additional plugins are required
3. Add the following CSS code

/* Main form container styling */
.your-form-class {
  position: relative;
  padding: 30px;
  border-radius: 8px;
  overflow: hidden;
  z-index: 1;
}

/* Background image layer */
.your-form-class::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/path-to-your-image.jpg');
  background-size: cover;
  background-position: center;
  z-index: -2;
}

/* Blur overlay layer */
.your-form-class::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2); /* Slight overlay for contrast */
  backdrop-filter: blur(8px);
  z-index: -1;
}

/* Form content container */
.your-form-class .form-inner {
  position: relative;
  z-index: 2;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 20px;
  border-radius: 5px;
}

4. Add HTML structure to your form
   • If using a form builder, add a container div with your class
   • Wrap your form fields in an inner div with the class “form-inner”

Method 2: Using Elementor Page Builder

If you are using Elementor page builder for your site, this method is for you.

1. Create a new section in Elementor
   • Edit your page with Elementor
   • Add a new section where you want your signup form
2. Set up the background image
   • Select the section
   • Go to Style → Background → Background Type → Classic
   • Upload your desired background image
   • Set Position to Center Center and Size to Cover
3. Add the blur effect properly
   • Elementor’s built-in CSS Filters will blur the entire section including content
   • Instead, go to Advanced → Custom CSS and add:

selector::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  z-index: 0;
  pointer-events: none;
}

selector .elementor-container {
  position: relative;
  z-index: 1;
}

4. Add a form widget
   • Drag a Form widget (from Elementor Pro) or your preferred form plugin widget into the section
   • Style the form with a semi-transparent background to enhance readability
5. Adjust column settings
   • Add padding to your column
   • Consider adding a background color with some transparency (e.g., rgba(255,255,255,0.7))

Method 3: Using popular form plugins

For Contact Form 7

1. Apply CSS directly to Contact Form 7
   • No additional plugins like CF7 Skins are required
   • Add a custom class to your form shortcode: [contact-form-7 id="123" title="Contact form" html_class="blurred-background-form"]
   • Add the following CSS to your theme:

.blurred-background-form {
  position: relative;
  z-index: 1;
  padding: 30px;
  border-radius: 8px;
  overflow: hidden;
}

.blurred-background-form::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/path-to-your-image.jpg');
  background-size: cover;
  background-position: center;
  z-index: -2;
}

.blurred-background-form::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  z-index: -1;
}

.blurred-background-form .wpcf7-form {
  background-color: rgba(255, 255, 255, 0.7);
  padding: 20px;
  border-radius: 5px;
  position: relative;
  z-index: 2;
}

For Gravity Forms

1. Add a custom CSS class to your form
   • Edit your form → Form Settings → CSS Class Name → Add “gf_custom_class blurred-background-form”
2. Add the CSS code to your theme
   • Use the following improved CSS:

.blurred-background-form {
  position: relative;
  z-index: 1;
  padding: 30px;
  border-radius: 8px;
  overflow: hidden;
}

.blurred-background-form::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/path-to-your-image.jpg');
  background-size: cover;
  background-position: center;
  z-index: -2;
}

.blurred-background-form::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  z-index: -1;
}

.blurred-background-form .gform_wrapper {
  background-color: rgba(255, 255, 255, 0.7);
  padding: 20px;
  border-radius: 5px;
  position: relative;
  z-index: 2;
}

Browser Compatibility Note

The backdrop-filter property has good but not universal browser support:

• Works in Chrome, Safari, Firefox (enabled in settings), and Edge
• For older browsers, consider a fallback using a pre-blurred image or a solid semi-transparent background

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(8px)) {
  .your-form-class::after {
    background: rgba(255, 255, 255, 0.7);
  }
}

Performance Considerations

• Optimise image size: Use compressed images for your backgrounds
• Performance impact: backdrop-filter is GPU-intensive and can affect performance
• Best practice: Apply blur effects to small containers only
• Avoid animations: Don’t animate blur properties as they’re resource-intensive
• Mobile optimisation: Consider reducing blur amount on mobile devices:

@media (max-width: 768px) {
  .your-form-class::after {
    backdrop-filter: blur(5px);
  }
}

Conclusion

By implementing this blurry background technique correctly, you can create a more engaging signup experience that draws users in and potentially increases your conversion rates significantly, all while maintaining good performance across devices.