/* === RESET & BASE === */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { –primary: #2563eb; –primary-hover: #1d4ed8; –bg: #f9fafb; –text: #111827; –text-muted: #6b7280; –surface: #ffffff; –radius: 12px; –max-width: 640px; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: var(–bg); color: var(–text); line-height: 1.6; min-height: 100vh; direction: rtl; } /* === LAYOUT === */ .container { max-width: var(–max-width); margin: 0 auto; padding: 40px 20px; } /* === HERO === */ .hero { text-align: center; margin-bottom: 40px; } .hero .badge { display: inline-block; background: var(–primary); color: white; padding: 6px 16px; border-radius: 20px; font-size: 14px; font-weight: 600; margin-bottom: 20px; } .hero h1 { font-size: clamp(28px, 5vw, 42px); font-weight: 800; line-height: 1.2; margin-bottom: 16px; } .hero .subtitle { font-size: 18px; color: var(–text-muted); max-width: 480px; margin: 0 auto; } /* === BENEFITS === */ .benefits { margin-bottom: 40px; } .benefit { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; } .benefit .icon { flex-shrink: 0; width: 24px; height: 24px; background: var(–primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 14px; margin-top: 2px; } .benefit p { font-size: 16px; } /* === FORM === */ .form-card { background: var(–surface); border-radius: var(–radius); padding: 32px 24px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); } .form-card h2 { text-align: center; font-size: 22px; margin-bottom: 24px; } .form-group { margin-bottom: 16px; } .form-group label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 16px; transition: border-color 0.2s; direction: rtl; font-family: inherit; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(–primary); } .submit-btn { width: 100%; padding: 14px; background: var(–primary); color: white; border: none; border-radius: 8px; font-size: 18px; font-weight: 700; cursor: pointer; transition: background 0.2s, transform 0.1s; margin-top: 8px; } .submit-btn:hover { background: var(–primary-hover); transform: translateY(-1px); } .submit-btn:active { transform: translateY(0); } .submit-btn:disabled { opacity: 0.6; cursor: not-allowed; } .privacy-note { text-align: center; font-size: 12px; color: var(–text-muted); margin-top: 12px; } /* === THANK YOU === */ .thank-you { display: none; text-align: center; padding: 48px 24px; } .thank-you .checkmark { width: 64px; height: 64px; background: #10b981; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 32px; color: white; } .thank-you h2 { font-size: 28px; margin-bottom: 12px; } .thank-you p { font-size: 16px; color: var(–text-muted); } /* === FOOTER === */ .footer { text-align: center; padding: 24px; font-size: 13px; color: var(–text-muted); } /* === SPINNER === */ .spinner { display: none; width: 20px; height: 20px; border: 3px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin 0.6s linear infinite; margin: 0 auto; } @keyframes spin { to { transform: rotate(360deg); } } /* === RESPONSIVE === */ @media (max-width: 480px) { .container { padding: 24px 16px; } .form-card { padding: 24px 16px; } }
Test

Funnel Builder Test

This is a test landing page built by the funnel-builder skill

Automated AC list + tag creation

Make.com webhook scenario

Landing page with form

Fill in your details

Test page – your data is safe

Success!

Test submission received successfully.

// Get ref from URL params const urlParams = new URLSearchParams(window.location.search); const ref = urlParams.get('ref') || urlParams.get('utm_source') || 'direct'; document.getElementById('refField').value = ref; // Form submission document.getElementById('leadForm').addEventListener('submit', async function(e) { e.preventDefault(); const btn = document.getElementById('submitBtn'); const btnText = document.getElementById('btnText'); const spinner = document.getElementById('spinner'); btn.disabled = true; btnText.style.display = 'none'; spinner.style.display = 'block'; const formData = new FormData(this); const data = Object.fromEntries(formData.entries()); try { await fetch('https://hook.eu1.make.com/278w04anlda6o1uppdvcte8k8d4mqysa', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }); // Fire pixel event if (typeof fbq !== 'undefined') { fbq('track', 'Lead', { content_name: 'Test Funnel Builder' }); } // Show thank you document.getElementById('formCard').style.display = 'none'; document.getElementById('thankYou').style.display = 'block'; } catch (err) { console.error('Submit error:', err); btn.disabled = false; btnText.style.display = 'inline'; spinner.style.display = 'none'; } }); !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n; n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window, document,'script','https://connect.facebook.net/en_US/fbevents.js'); fbq('init', '1332138187536808'); fbq('track', 'PageView');