working form
This commit is contained in:
Oliver
@@ -160,8 +160,11 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<section class="hero-content">
|
||||
<h1>Odoo & n8n Automation Experts</h1>
|
||||
|
||||
|
||||
<section class="hero-content">
|
||||
<div class="hero-left">
|
||||
<h1>Odoo & n8n Automation Experts</h1>
|
||||
<p>We charge upfront — this lets us skip the sales talk and give serious clients immediate access to our best engineers.</p>
|
||||
<ul class="hero-list">
|
||||
<li><span class="icon"><i class="fa-solid fa-circle-check"></i></span><span>One-hour get-to-know session included — not satisfied? Full refund, no questions asked</span></li>
|
||||
@@ -169,8 +172,20 @@
|
||||
<li><span class="icon"><i class="fa-solid fa-circle-check"></i></span><span>Hosting solutions for Odoo & n8n available</span></li>
|
||||
<li><span class="icon"><i class="fa-solid fa-circle-check"></i></span><span>Custom development tailored to your workflows</span></li>
|
||||
</ul>
|
||||
<button class="hero-button-cta plausible-event-name=ExplorePackages" onclick="location.href='#packages'">Explore packages</button>
|
||||
</section>
|
||||
<button class="hero-button-cta plausible-event-name=ExplorePackages" onclick="location.href='#packages'">
|
||||
Explore packages
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="hero-right">
|
||||
<div id="my-signup-widget"></div>
|
||||
<script src="http://localhost:8000/widget-signup/widget.js"
|
||||
data-affiliate="od8n"></script>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
</header>
|
||||
|
||||
<!-- Product Packages -->
|
||||
|
||||
@@ -114,12 +114,22 @@ header.hero {
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 40px; /* space between text and widget */
|
||||
max-width: 80%;
|
||||
margin: 0 auto;
|
||||
padding-top: 200px;
|
||||
padding-bottom: 150px;
|
||||
}
|
||||
.hero-left {
|
||||
flex: 1; /* text column grows */
|
||||
}
|
||||
|
||||
.hero-right {
|
||||
flex: 0 0 420px; /* fixed width for widget */
|
||||
}
|
||||
header.hero h1 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 20px;
|
||||
@@ -890,4 +900,4 @@ footer a:hover {
|
||||
/* Hover effect for card badges */
|
||||
.blog-teaser > [class*="-tag"]:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
186
public/widget-signup/widget.js
Normal file
186
public/widget-signup/widget.js
Normal file
@@ -0,0 +1,186 @@
|
||||
(function() {
|
||||
// Locate the script tag
|
||||
const currentScript = document.currentScript;
|
||||
const affiliateFromAttr = currentScript.getAttribute("data-affiliate");
|
||||
|
||||
// Allow ?affiliate=... from URL
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const affiliateFromURL = params.get("affiliate");
|
||||
|
||||
const affiliateCode = affiliateFromURL || affiliateFromAttr || "None";
|
||||
|
||||
// Container element
|
||||
const container = document.getElementById("my-signup-widget");
|
||||
if (!container) return;
|
||||
|
||||
// Attach shadow DOM
|
||||
const shadow = container.attachShadow({ mode: "open" });
|
||||
|
||||
// CSS for the widget (isolated)
|
||||
const styles = `
|
||||
:host {
|
||||
all: initial;
|
||||
font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,Arial,sans-serif;
|
||||
display: block;
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: linear-gradient(135deg,#ffffff 0%,#f7fafc 60%);
|
||||
border: 1px solid #e6e8eb;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 6px 20px rgba(16,24,40,.08);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg,#6ee7b7,#3b82f6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
.title {
|
||||
font-size: 18px;
|
||||
line-height: 1.2;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 13px;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
label,
|
||||
.label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #334155;
|
||||
font-weight: 600;
|
||||
margin: 12px 0 6px;
|
||||
}
|
||||
|
||||
.options {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.option {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 10px;
|
||||
padding: 10px 12px;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
accent-color: #3b82f6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
select, input[type="email"], affiliate-display {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 10px;
|
||||
padding: 10px 12px;
|
||||
font-size: 14px;
|
||||
color: #0f172a;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.affiliate-display {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 16px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
padding: 12px 14px;
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(135deg,#22c55e,#3b82f6);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 8px 18px rgba(37,99,235,.25);
|
||||
}
|
||||
|
||||
.footnote {
|
||||
margin-top: 10px;
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
text-align: center;
|
||||
}
|
||||
`;
|
||||
|
||||
// HTML structure
|
||||
const html = `
|
||||
<form action="https://001-001-123e4567-e89b-12d3-a456-426614174000.od8n.com/webhook-test/28c30b58-7786-4c63-b662-2a840014e472" method="post" class="card">
|
||||
<div class="header">
|
||||
<div class="icon">★</div>
|
||||
<div>
|
||||
<div class="title">Try Managed Odoo or n8n — Free</div>
|
||||
<div class="subtitle">Full-featured 4-week trial. No credit card required.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="label">Product</div>
|
||||
<div class="options">
|
||||
<label class="option">
|
||||
<input type="radio" name="product" value="ODOO" required checked>
|
||||
<span>ODOO</span>
|
||||
</label>
|
||||
<label class="option">
|
||||
<input type="radio" name="product" value="N8N" required>
|
||||
<span>N8N</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label for="location">Location</label>
|
||||
<select id="location" name="location" required>
|
||||
<option value="" disabled>Select a region</option>
|
||||
<option value="amsterdam">Amsterdam</option>
|
||||
<option value="mumbai" selected>Mumbai</option>
|
||||
<option value="saopaulo">São Paulo</option>
|
||||
</select>
|
||||
|
||||
<label for="email">Work Email</label>
|
||||
<input id="email" name="email" type="email" required placeholder="you@company.com">
|
||||
|
||||
<input type="hidden" name="affiliate_code" value="${affiliateCode}">
|
||||
|
||||
<button type="submit">Start 4-Week Free Trial</button>
|
||||
|
||||
<div class="footnote">
|
||||
By submitting, you agree to be contacted about your trial and our T&Cs.
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
|
||||
// Append everything into shadow DOM
|
||||
shadow.innerHTML = `
|
||||
<style>${styles}</style>
|
||||
${html}
|
||||
`;
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user