Skip to content

Add consultation-specific CTA flow routing users to the contact form #260

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Add consultation-specific CTA flow routing users to the contact form #260

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7afef3c
Initial plan
Copilot Mar 24, 2026
00b7551
Add consultation CTA flow: hero button, section CTAs, inquiry type dr…
Copilot Mar 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 19 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ <h1>Corporate Inc.</h1>
<div class="hero-content">
<h2>Welcome to Corporate Inc.</h2>
<p>Building the future with AI-Native Development</p>
<button class="cta-button" onclick="showMessage()">Get Started</button>
<a href="#contact" class="secondary-link">Learn More</a>
<a href="#contact" class="cta-button" id="hero-cta">Request a Consultation</a>
<a href="#services" class="secondary-link">Learn More</a>
</div>
</section>

Expand All @@ -50,6 +50,9 @@ <h3>🚀 AI-Native</h3>
<p>Built with Agent Package Manager for consistent workflows</p>
</div>
</div>
<div class="section-cta">
<a href="#contact" class="cta-button cta-button--secondary" id="about-cta">Schedule a Consultation</a>
</div>
</div>
</section>

Expand All @@ -62,13 +65,27 @@ <h2>Our Services</h2>
<li>AI-Native Development Training</li>
<li>Design System Implementation</li>
</ul>
<div class="section-cta">
<a href="#contact" class="cta-button cta-button--secondary" id="services-cta">Request a Consultation</a>
</div>
</div>
</section>

<section id="contact" class="section">
<div class="container">
<h2>Contact Us</h2>
<form class="contact-form" onsubmit="handleSubmit(event)">
<div class="form-group">
<label for="inquiry-type">Inquiry Type *</label>
<select id="inquiry-type" name="inquiry-type" required aria-describedby="inquiry-type-help">
<option value="">Select an inquiry type</option>
<option value="consultation">Consultation Request</option>
<option value="general">General Inquiry</option>
<option value="support">Support</option>
<option value="other">Other</option>
</select>
<small id="inquiry-type-help">Let us know the nature of your inquiry</small>
</div>
<div class="form-group">
<label for="name">Name *</label>
<input type="text" id="name" name="name" required aria-describedby="name-help">
Expand Down
44 changes: 31 additions & 13 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,37 @@ document.addEventListener('DOMContentLoaded', () => {
console.log('🚀 Corporate Website initialized with APM standards');
initializeAccessibility();
initializeGDPRCompliance();
initializeConsultationCTAs();
});

/**
* Show welcome message - demonstrates user interaction logging for audit trails
* Initialize consultation CTA tracking
* Logs scroll events when users click consultation CTAs for analytics
*/
function showMessage() {
// Log user interaction (compliance requirement for audit trails)
logUserInteraction('cta_button_click', {
timestamp: new Date().toISOString(),
action: 'hero_cta_clicked',
user_agent: navigator.userAgent.substring(0, 100) // Truncated for privacy
function initializeConsultationCTAs() {
const ctaIds = ['hero-cta', 'about-cta', 'services-cta'];
const inquirySelect = document.getElementById('inquiry-type');

ctaIds.forEach(id => {
const cta = document.getElementById(id);
if (!cta) return;

cta.addEventListener('click', () => {
logUserInteraction('consultation_cta_click', {
timestamp: new Date().toISOString(),
cta_id: id,
action: 'consultation_cta_clicked',
user_agent: navigator.userAgent.substring(0, 100)
});

// Pre-select 'Consultation Request' when navigating to the form via a CTA
if (inquirySelect && !inquirySelect.value) {
inquirySelect.value = 'consultation';
}
});
});

alert('🎉 Welcome! This site is built with APM dependencies for compliance and design standards.');
console.log('📣 Consultation CTAs initialized');
}

/**
Expand All @@ -37,13 +54,14 @@ function handleSubmit(event) {
const data = {
name: formData.get('name'),
email: formData.get('email'),
inquiryType: formData.get('inquiry-type'),
message: formData.get('message'),
timestamp: new Date().toISOString(),
consent: true // In real app, this would come from explicit consent checkbox
};

// Validate required fields
if (!data.name || !data.email || !data.message) {
if (!data.name || !data.email || !data.inquiryType || !data.message) {
showError('All fields are required. Please complete the form.');
return;
}
Expand All @@ -58,7 +76,8 @@ function handleSubmit(event) {
// Log form submission for compliance audit trail
logUserInteraction('form_submission', {
timestamp: data.timestamp,
fields_submitted: ['name', 'email', 'message'],
fields_submitted: ['name', 'email', 'inquiry-type', 'message'],
inquiry_type: data.inquiryType,
data_processing_consent: data.consent
});

Expand Down Expand Up @@ -332,11 +351,10 @@ function announceToScreenReader(message, priority = 'polite') {

// Export functions for potential testing or external use
window.corporateWebsite = {
showMessage,
handleSubmit,
logUserInteraction
logUserInteraction,
initializeConsultationCTAs
};

// Make functions globally available (for inline event handlers)
window.showMessage = showMessage;
window.handleSubmit = handleSubmit;
54 changes: 41 additions & 13 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,35 +159,61 @@ a:hover, a:focus {

/* Buttons - Minimum 44px touch target */
.cta-button {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
display: inline-block;
background-color: #059669;
color: white;
border: none;
padding: var(--space-1) var(--space-3);
font-size: var(--font-size-sm);
padding: var(--space-2) var(--space-4);
font-size: var(--font-size-base);
font-weight: 600;
border-radius: var(--radius-lg);
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
min-height: 32px;
transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
min-height: 44px;
line-height: 1.5;
text-decoration: none;
}

.cta-button--secondary {
background-color: transparent;
color: #059669;
border: 2px solid #059669;
}

.cta-button--secondary:hover,
.cta-button--secondary:focus {
background-color: #059669;
color: white;
}

.section-cta {
margin-top: var(--space-6);
text-align: center;
}

.secondary-link {
color: #999999;
color: white;
text-decoration: none;
font-size: 14px;
padding: 8px 12px;
font-size: var(--font-size-base);
padding: var(--space-2) var(--space-3);
margin-left: var(--space-2);
border: 1px solid #cccccc;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: var(--radius-sm);
display: inline-block;
min-height: 44px;
line-height: 1.5;
}

.secondary-link:hover,
.secondary-link:focus {
outline: none;
background-color: rgba(255, 255, 255, 0.15);
color: white;
text-decoration: none;
}

.cta-button:hover, .cta-button:focus,
.submit-button:hover, .submit-button:focus {
background-color: var(--surface);
background-color: #047857;
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
Expand Down Expand Up @@ -247,7 +273,8 @@ a:hover, a:focus {
}

.form-group input,
.form-group textarea {
.form-group textarea,
.form-group select {
width: 100%;
padding: var(--space-2);
border: 2px solid var(--border);
Expand All @@ -258,7 +285,8 @@ a:hover, a:focus {
}

.form-group input:focus,
.form-group textarea:focus {
.form-group textarea:focus,
.form-group select:focus {
border-color: var(--primary-color);
outline: none;
}
Expand Down