Popup Settings

The popup settings control the appearance and content of the consultation form modal that opens when visitors click the consultation button. The popup features a professional two-column layout with space for branding and form content.

Popup Layout: The consultation popup uses a two-column design. The left column (first column) displays your logo and custom content, while the right column (second column) contains the consultation form with title and subtitle.

Color Settings

Popup Button And Column Background Color

Field Type: Color picker
Purpose: Sets the background color for the first column and submit button
Default: #6ac847 (green)

What This Color Affects:
• First column background (where logo and custom content appear)
• Submit button background color
• Visual accent elements in the popup

Color Selection Tips:
• Use your brand’s primary color for consistency
• Ensure good contrast with white text
• Consider the psychological impact of colors
• Test readability on different devices

Popup Button And Column Text Color

Field Type: Color picker
Purpose: Sets the text color for the first column content and submit button
Default: #ffffff (white)

What This Color Affects:
• Text in the first column (custom content)
• Submit button text color
• Any text overlaying the background color

Recommended Combinations:
• White text (#ffffff) on dark backgrounds
• Dark text (#333333) on light backgrounds
• Ensure WCAG contrast ratio compliance for accessibility

First Column Content (Left Side)

Logo

Field Type: Media uploader
Purpose: Display your company logo in the consultation popup
Position: Top of the first column

Logo Requirements:
• Recommended size: 200px wide maximum
• Supported formats: JPG, PNG, GIF, SVG
• Use transparent PNG for best results
• High resolution for retina displays

Design Tips:
• Use a version designed for dark/colored backgrounds
• Keep it simple and recognizable
• Test visibility with your chosen background color

Custom Text (First Column)

Field Type: Rich text editor (WordPress editor)
Purpose: Add custom content below the logo in the first column
Features: Full HTML support with WordPress editor

Content Ideas:
• Company tagline or mission statement
• Brief description of consultation services
• Contact information (phone, email)
• Trust signals (certifications, testimonials)
• Call-to-action text

HTML Capabilities:
• Text formatting (bold, italic, lists)
• Links to other pages
• Images and media
• Custom HTML and styling

Second Column Content (Right Side)

Title (Second Column)

Field Type: Text input
Purpose: Main heading for the consultation form
Default: “Free Phone Consultation”

Effective Title Examples:
• “Free Phone Consultation”
• “Schedule Your Consultation”
• “Get Expert Advice”
• “Request a Callback”
• “Talk to Our Specialists”
• “Book Your Free Call”

Best Practices:
• Keep it clear and benefit-focused
• Use action words when appropriate
• Highlight value propositions (free, expert, etc.)
• Match your brand voice and tone

Subtitle (Second Column)

Field Type: Text input
Purpose: Supporting text that appears below the main title
Default: “Enter your contact information right now.”

Effective Subtitle Examples:
• “Enter your contact information right now.”
• “Fill out the form below and we’ll call you back.”
• “Get personalized advice for your business.”
• “Our experts are ready to help you succeed.”
• “Start your journey to better results today.”

Purpose of Subtitles:
• Provide additional context or instructions
• Build confidence and trust
• Explain the next steps in the process
• Reinforce the value proposition

Popup Behavior and Features

User Experience

Modal Overlay: Semi-transparent background dims the page
Smooth Animation: Popup appears with zoom-in effect
Close Options: Click outside popup or use close button
Mobile Responsive: Adapts to all screen sizes
Keyboard Accessible: Supports keyboard navigation

Technical Features

AJAX Submission: Form submits without page reload
Real-time Validation: Immediate feedback on form errors
Success/Error Messages: Clear confirmation of submission status
Spam Protection: Built-in honeypot and validation
Browser Compatibility: Works in all modern browsers

Design Best Practices

Brand Consistency

Color Scheme: Use your brand colors for background and text
Logo Placement: Feature your logo prominently for brand recognition
Voice and Tone: Match your website’s writing style
Visual Elements: Ensure popup design complements your website

Content Strategy

First Column Content:
• Keep text concise and scannable
• Focus on trust and credibility
• Include contact information for immediate access
• Use bullet points for easy reading

Second Column Messaging:
• Make the title action-oriented
• Use subtitle to provide context or instructions
• Be clear about what happens after form submission
• Set appropriate expectations for response time

Testing Your Popup

Visual Testing: Check appearance on different screen sizes
Content Testing: Ensure all text is readable and makes sense
Color Testing: Verify contrast ratios meet accessibility standards
Functionality Testing: Test form submission and error handling
User Testing: Get feedback from real users about the experience