About: Pop-Up Form Design

Why This Matters

Pop-up forms appear as overlays on your existing website, so they need different design settings than standard landing pages. The right design ensures your pop-up looks professional, doesn't block your entire website, and creates a smooth experience for visitors.

Understanding these design settings helps you create pop-ups that capture attention without feeling intrusive or overwhelming.

How Pop-Up Forms Differ from Landing Pages

Standard landing pages use default settings designed for full-page layouts. Pop-up forms need adjusted settings because they appear as overlays on top of your existing site content.

The three key differences are content width, background transparency, and visual separation from the page behind them.

Content Area Width

The default Content Area Width for landing pages is 800 pixels, which works well for full-page layouts. For pop-up forms, 800 pixels is too wide and will dominate the screen.

For pop-ups, use a Content Area Width of approximately 550 pixels. This creates a form that's large enough to be readable but doesn't overwhelm the page beneath it.

You can adjust Content Area Width in the page Settings tab.

Background Colors and Transparency

Pop-up forms need careful background color configuration to create the right visual effect.

Page Background Color should be set to transparent instead of the default grey (#EEEEEE). This prevents the pop-up from blocking out your entire website. When the background is transparent, visitors can still see their original page dimmed behind the form.

Content Area Background Color should be set to a solid color like white (#FFFFFF) or light grey (#EEEEEE). The default setting is transparent, which would make your entire pop-up see-through. A solid background color creates clear visual separation and makes your form content readable.

You can adjust these settings in the Settings tab of the page editor.

Rounded Corners

Rounded corners give your pop-up form a polished, modern appearance.

To round the corners of your pop-up, select the Row (not individual elements inside it). In the Content Area Rounded Corners section, change the rounding for All Corners to your desired radius. A setting of 10-15 pixels creates subtle, professional rounding.

Important: Make sure you're adjusting rounded corners in the Content Area Rounded Corners section of the Row, not other objects. There are many different elements that can have rounded corners, so confirm you're editing the correct one.

If your content area consists of multiple rows, you'll need to round corners differently:

  • Round the top corners of the upper row
  • Round the bottom corners of the bottom row
  • Leave middle rows with square corners

This creates smooth, rounded edges at the top and bottom of your pop-up while maintaining clean alignment between middle sections.

For a professional pop-up form, use these settings as your starting point:

  • Content Area Width: 550 pixels
  • Page Background Color: Transparent
  • Content Area Background Color: White (#FFFFFF) or light grey (#EEEEEE)
  • Corner Rounding: 10-15 pixels on all corners of single-row forms, or top/bottom corners for multi-row forms

These settings create a clean, modern pop-up that integrates well with most website designs.

Questions and Answers

Q: Can I make my pop-up wider than 550 pixels?

A: Yes, but be careful not to make it too wide. Pop-ups larger than 700-800 pixels can feel overwhelming on desktop screens and may not display well on tablets. Test your pop-up on different screen sizes to ensure it looks good everywhere.


Q: What if I want a colored background instead of white or grey?

A: You can use any color for your Content Area Background Color. Just make sure there's enough contrast between your background and text so the form remains readable. Avoid very dark backgrounds unless you adjust text colors accordingly.


Q: Why does my pop-up still show grey behind the form even though I set it to transparent?

A: You may have set the Content Area Background Color to transparent instead of the Page Background Color. The Page Background should be transparent, while the Content Area Background should be a solid color.


Q: Do I need to round the corners?

A: No, rounded corners are optional. They create a modern, polished look, but square corners work fine if that matches your brand aesthetic.


Q: Can I preview how my pop-up will look before publishing it?

A: Yes. Use the preview function in the page editor to see how your pop-up will appear over a website. This helps you verify sizing, colors, and overall appearance before embedding the code on your site.


Q: Will these settings work on mobile devices?

A: Pop-ups automatically adjust for mobile screens, but you should always test your form on mobile devices to ensure it displays correctly. Mobile screens have less space, so content that looks good on desktop may need adjustments for smaller screens.


Q: What if I have multiple rows in my pop-up?

A: For multi-row pop-ups, round only the top corners of the first row and the bottom corners of the last row. Leave middle rows with square corners. This creates smooth edges at the top and bottom while maintaining clean alignment between sections.

Guide Type: Reference Guide

Estimated Time: 5 minutes to read

Next Guides: Create a Pop-Up Form • Landing Pages Overview • Customize Templates