<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get Your Free Website Layout</title>
<style>
/* Main Popup Styles */
.popup-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
z-index: 9999;
justify-content: center;
align-items: center;
font-family: 'Arial', sans-serif;
}
.popup-container {
background-color: white;
width: 90%;
max-width: 500px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.popup-header {
background-color: #ff6600;
color: white;
padding: 20px;
text-align: center;
font-size: 24px;
font-weight: bold;
}
.popup-content {
padding: 20px;
color: #333;
}
.popup-footer {
padding: 15px 20px;
background-color: #f5f5f5;
display: flex;
justify-content: space-between;
align-items: center;
}
/* Step Navigation */
.step-indicator {
display: flex;
gap: 5px;
}
.step-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ddd;
}
.step-dot.active {
background-color: #ff6600;
}
/* Button Styles */
.btn {
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s;
}
.btn-primary {
background-color: #ff6600;
color: white;
}
.btn-primary:hover {
background-color: #e55c00;
}
.btn-secondary {
background-color: #ddd;
color: #333;
}
.btn-secondary:hover {
background-color: #ccc;
}
/* Form Styles */
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.form-control {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
box-sizing: border-box;
}
.form-error {
color: red;
font-size: 12px;
margin-top: 5px;
display: none;
}
/* Option Styles */
.option-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 20px;
}
.option-item {
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
}
.option-item:hover, .option-item.selected {
border-color: #ff6600;
background-color: rgba(255,102,0,0.1);
}
/* Responsive Adjustments */
@media (max-width: 480px) {
.option-grid {
grid-template-columns: 1fr;
}
.popup-header {
font-size: 20px;
padding: 15px;
}
.popup-content {
padding: 15px;
}
}
</style>
</head>
<body>
<!-- Popup HTML -->
<div class="popup-overlay" id="websiteLayoutPopup">
<div class="popup-container">
<!-- Step 1: Choose Stage -->
<div class="popup-step" id="step1">
<div class="popup-header">
Hey there!
</div>
<div class="popup-content">
<p>I'm your digital strategy assistant. Let's make this easy.<br>What stage are you in right now?</p>
<div class="option-grid">
<div class="option-item" data-value="Starting a new business">
Starting a new business
</div>
<div class="option-item" data-value="Growing my business">
Growing my business
</div>
<div class="option-item" data-value="Improving my digital presence">
Improving my digital presence
</div>
<div class="option-item" data-value="Just exploring my options">
Just exploring my options
</div>
</div>
<div class="form-group">
<p><strong>Talk to Us Anytime — 24/7</strong><br>
AI Business Advisor</p>
<p><strong>+1 (332) 265 1023</strong><br>
CALL or TEXT us now</p>
<p>Need answers fast? Skip the form and get real-time guidance from our friendly support team—available 24/7 to help with your business needs.</p>
</div>
</div>
<div class="popup-footer">
<div class="step-indicator">
<div class="step-dot active"></div>
<div class="step-dot"></div>
<div class="step-dot"></div>
</div>
<button class="btn btn-primary" id="step1Next">Next</button>
</div>
</div>
<!-- Step 2: Choose Focus Area -->
<div class="popup-step" id="step2" style="display:none;">
<div class="popup-header">
Got it.
</div>
<div class="popup-content">
<p>Let's focus on what matters most to you right now. Choose the area where you need expert help:</p>
<div class="option-grid">
<div class="option-item" data-value="Creating a custom website">
Creating a custom website
</div>
<div class="option-item" data-value="Building my brand (logo, identity, content)">
Building my brand (logo, identity, content)
</div>
<div class="option-item" data-value="Getting more leads and traffic">
Getting more leads and traffic
</div>
<div class="option-item" data-value="Ranking better on Google (SEO)">
Ranking better on Google (SEO)
</div>
<div class="option-item" data-value="Not sure—I need expert guidance">
Not sure—I need expert guidance
</div>
</div>
</div>
<div class="popup-footer">
<button class="btn btn-secondary" id="step2Back">Back</button>
<div class="step-indicator">
<div class="step-dot"></div>
<div class="step-dot active"></div>
<div class="step-dot"></div>
</div>
<button class="btn btn-primary" id="step2Next">Next</button>
</div>
</div>
<!-- Step 3: Contact Information -->
<div class="popup-step" id="step3" style="display:none;">
<div class="popup-header">
To craft your personalized strategy
</div>
<div class="popup-content">
<p>we just need a few quick details.</p>
<div class="form-group">
<label for="fullName">Full Name:</label>
<input type="text" id="fullName" class="form-control" placeholder="Firstname Lastname">
<div class="form-error" id="nameError">This field is required!</div>
</div>
<div class="form-group">
<label for="email">Email Address:</label>
<input type="email" id="email" class="form-control" placeholder="test@test.com">
<div class="form-error" id="emailError">This field is required!</div>
</div>
<div class="form-group">
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" class="form-control" placeholder="+1 (123) 456 7890">
<div class="form-error" id="phoneError">This field is required!</div>
</div>
<div class="form-group">
<label for="company">Company Name:</label>
<input type="text" id="company" class="form-control" placeholder="Company Name">
<div class="form-error" id="companyError">This field is required!</div>
</div>
<div class="form-group">
<label>Type of Business:</label>
<div class="option-grid">
<div class="option-item" data-value="Home Care">
Home Care
</div>
<div class="option-item" data-value="Retail / E-commerce">
Retail / E-commerce
</div>
<div class="option-item" data-value="Health & Wellness">
Health & Wellness
</div>
<div class="option-item" data-value="Professional Services">
Professional Services
</div>
</div>
<div class="form-error" id="businessError">This field is required!</div>
</div>
<div class="form-group">
<input type="checkbox" id="privacyPolicy" checked>
<label for="privacyPolicy">By submitting this form you agree to the terms of the <strong>Privacy Policy</strong>.</label>
</div>
<div class="form-group">
<input type="checkbox" id="newsletter" checked>
<label for="newsletter">Yes, please keep me updated on news, events, and offers.</label>
</div>
</div>
<div class="popup-footer">
<button class="btn btn-secondary" id="step3Back">Back</button>
<div class="step-indicator">
<div class="step-dot"></div>
<div class="step-dot"></div>
<div class="step-dot active"></div>
</div>
<button class="btn btn-primary" id="step3Submit">Send My Plan</button>
</div>
</div>
</div>
</div>
<script>
// Store form data
const formData = {
stage: '',
focusArea: '',
fullName: '',
email: '',
phone: '',
company: '',
businessType: '',
agreeToPolicy: true,
subscribeToNewsletter: true
};
// Initialize popup
document.addEventListener('DOMContentLoaded', function() {
const popup = document.getElementById('websiteLayoutPopup');
const step1Next = document.getElementById('step1Next');
const step2Back = document.getElementById('step2Back');
const step2Next = document.getElementById('step2Next');
const step3Back = document.getElementById('step3Back');
const step3Submit = document.getElementById('step3Submit');
// Option selection for all steps
document.querySelectorAll('.option-item').forEach(item => {
item.addEventListener('click', function() {
// Remove selected class from siblings
this.parentElement.querySelectorAll('.option-item').forEach(sibling => {
sibling.classList.remove('selected');
});
// Add selected class to clicked item
this.classList.add('selected');
// Store the selected value
const stepId = this.closest('.popup-step').id;
const value = this.getAttribute('data-value');
if (stepId === 'step1') {
formData.stage = value;
} else if (stepId === 'step2') {
formData.focusArea = value;
} else if (stepId === 'step3') {
formData.businessType = value;
}
});
});
// Step 1 to Step 2
step1Next.addEventListener('click', function() {
if (!formData.stage) {
alert('Please select your current stage');
return;
}
document.getElementById('step1').style.display = 'none';
document.getElementById('step2').style.display = 'block';
// Update step indicator
document.querySelectorAll('.step-dot')[0].classList.remove('active');
document.querySelectorAll('.step-dot')[1].classList.add('active');
});
// Step 2 to Step 1
step2Back.addEventListener('click', function() {
document.getElementById('step2').style.display = 'none';
document.getElementById('step1').style.display = 'block';
// Update step indicator
document.querySelectorAll('.step-dot')[1].classList.remove('active');
document.querySelectorAll('.step-dot')[0].classList.add('active');
});
// Step 2 to Step 3
step2Next.addEventListener('click', function() {
if (!formData.focusArea) {
alert('Please select your focus area');
return;
}
document.getElementById('step2').style.display = 'none';
document.getElementById('step3').style.display = 'block';
// Update step indicator
document.querySelectorAll('.step-dot')[1].classList.remove('active');
document.querySelectorAll('.step-dot')[2].classList.add('active');
});
// Step 3 to Step 2
step3Back.addEventListener('click', function() {
document.getElementById('step3').style.display = 'none';
document.getElementById('step2').style.display = 'block';
// Update step indicator
document.querySelectorAll('.step-dot')[2].classList.remove('active');
document.querySelectorAll('.step-dot')[1].classList.add('active');
});
// Form submission
step3Submit.addEventListener('click', function() {
// Validate form
let isValid = true;
formData.fullName = document.getElementById('fullName').value;
formData.email = document.getElementById('email').value;
formData.phone = document.getElementById('phone').value;
formData.company = document.getElementById('company').value;
formData.agreeToPolicy = document.getElementById('privacyPolicy').checked;
formData.subscribeToNewsletter = document.getElementById('newsletter').checked;
// Validate required fields
if (!formData.fullName) {
document.getElementById('nameError').style.display = 'block';
isValid = false;
} else {
document.getElementById('nameError').style.display = 'none';
}
if (!formData.email) {
document.getElementById('emailError').style.display = 'block';
isValid = false;
} else {
document.getElementById('emailError').style.display = 'none';
}
if (!formData.phone) {
document.getElementById('phoneError').style.display = 'block';
isValid = false;
} else {
document.getElementById('phoneError').style.display = 'none';
}
if (!formData.company) {
document.getElementById('companyError').style.display = 'block';
isValid = false;
} else {
document.getElementById('companyError').style.display = 'none';
}
if (!formData.businessType) {
document.getElementById('businessError').style.display = 'block';
isValid = false;
} else {
document.getElementById('businessError').style.display = 'none';
}
if (!formData.agreeToPolicy) {
alert('You must agree to the Privacy Policy');
isValid = false;
}
if (!isValid) return;
// Form is valid - submit data
console.log('Form submitted:', formData);
alert('Thank you! Your information has been submitted. We will contact you shortly with your free website layout.');
// Close popup
popup.style.display = 'none';
// Here you would typically send the data to your server
// Example: sendFormData(formData);
});
// Toggle popup (this would be triggered by your "Get Free Layout" button)
window.showPopup = function() {
popup.style.display = 'flex';
document.getElementById('step1').style.display = 'block';
document.getElementById('step2').style.display = 'none';
document.getElementById('step3').style.display = 'none';
// Reset step indicator
document.querySelectorAll('.step-dot').forEach((dot, index) => {
if (index === 0) {
dot.classList.add('active');
} else {
dot.classList.remove('active');
}
});
// Reset form selections (optional)
document.querySelectorAll('.option-item').forEach(item => {
item.classList.remove('selected');
});
};
});
</script>
</body>
</html>
Menu
popup
