Questionnaire Form Component - Copy this Html, Tailwind Component to your project
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8" /> <meta name="viewport" content="width=device width, initial scale=1.0" /> <title>Questionnaire Form</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0 alpha1/dist/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdn.jsdelivr.net/npm/intl tel input@17.0.8/build/css/intlTelInput.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0 alpha1/dist/js/bootstrap.min.js"></script> <script src="https://www.google.com/recaptcha/api.js" async defer></script> <style> body { background: url("https://kpi poc dev.s3.eu north 1.amazonaws.com/kpi_background.jpg") no repeat center center fixed; background size: cover; } .form container { background color: rgba(128, 128, 128, 0.7); max width: 600px; margin: 50px auto; padding: 30px; border radius: 8px; box shadow: 0 4px 6px rgba(0, 0, 0, 0.9); } .form title { text align: center; margin bottom: 20px; } .header { text align: center; margin bottom: 20px; } .header img { max width: 200px; } .btn submit { background color: #dc3545; color: white; } .form control { background color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0.2); color: #000; /* Text color */ } .form control:focus { background color: rgba(255, 255, 255, 0.7); /* Slightly less transparent on focus */ box shadow: 0 0 8px rgba(0, 0, 0, 0.1); } textarea.form control { background color: rgba(255, 255, 255, 0.7); } .btn submit { background color: #dc3545; color: white; } .btn submit:hover { background color: #c82333; } .form check input { background color: rgba(255, 255, 255, 0.5); border: 1px solid rgba(0, 0, 0, 0.2); } .form check label { color: #000; } h5 { color: #D71F26; font weight: bold; } h6 { color: #000; font weight: bold; } label { font weight: bold; color: #000; } </style> </head> <body> <! Thank You Popup Modal > <div class="modal fade" id="thankYouModal" tabindex=" 1" aria labelledby="thankYouModalLabel" aria hidden="true"> <div class="modal dialog modal dialog centered"> <div class="modal content"> <div class="modal header"> <h5 class="modal title" id="thankYouModalLabel">Thank You!</h5> <button type="button" class="btn close" data bs dismiss="modal" aria label="Close"></button> </div> <div class="modal body text center"> <p>Thank you for submitting the form. We will get back to you shortly.</p> </div> <div class="modal footer"> <button type="button" class="btn btn primary" data bs dismiss="modal">Close</button> </div> </div> </div> </div> <div class="form container"> <div class="header"> <img src="https://kpi poc dev.s3.eu north 1.amazonaws.com/kpi_fitness_logo.png" alt="KPI Fitness Logo" /> </div> <h2 class="form title">Questionnaire Form</h2> <form id="questionnaire form" novalidate> <! Username and Phone > <div class="mb 3"> <label for="username" class="form label">Full Name*</label> <input type="text" class="form control" id="username" required /> </div> <div class="mb 3"> <label for="phone" class="form label">Phone Number*</label> <input type="tel" class="form control" id="phone" required /> </div> <! Colors > <h5>Colors</h5> <div class="mb 3"> <label class="form label">Primary Color*</label> <input type="text" class="form control" id="primary color" placeholder="Hex code / color name" required /> </div> <! Logo > <h5>Logo</h5> <div class="mb 3"> <label class="form label">Upload Logo</label> <input type="file" class="form control" id="logo upload" accept="image/*" /> </div> <div class="mb 3"> <label class="form label">Describe Your Logo</label> <textarea class="form control" id="logo description" rows="3"></textarea> </div> <! URL > <h5>URL</h5> <div class="mb 3"> <label class="form label">Active Website or URL</label> <input type="url" class="form control" id="url" /> </div> <div class="mb 3"> <label class="form label">If you don't have a website already set up, what would you like the URL to be?</label> <input type="text" class="form control" id="no url" /> </div> <! Payment > <h5>Payment</h5> <h6>To ensure you get paid promptly when clients subscribe to your Body Fat Calculator, please input your banking details. Your information will remain confidential and used solely for payment purposes.</h6> <div class="mb 3"> <label class="form label">Bank Name</label> <input type="text" class="form control" id="bank name" /> </div> <div class="mb 3"> <label class="form label">Routing Number</label> <input type="text" class="form control" id="routing number" /> </div> <div class="mb 3"> <label class="form label">Account Number</label> <input type="text" class="form control" id="account number" /> </div> <div class="form check mb 3"> <input class="form check input" type="checkbox" id="no payment" /> <label class="form check label" for="no payment">If you have any questions, you’re welcome to reach out or leave this section blank by ticking the checkbox—we’ll go over it together during your onboarding meeting. We’re here to help!</label> </div> <! Google reCAPTCHA v2 > <div class="mb 3 text center"> <div class="g recaptcha" data sitekey="6Ldnz7EqAAAAACvfELvW6CZfKntamX50xhsrLkI9"></div> </div> <button type="submit" class="btn btn submit w 100">SUBMIT</button> </form> </div> <script src="https://cdn.jsdelivr.net/npm/intl tel input@17.0.8/build/js/intlTelInput.min.js"></script> <script> const phoneInput = document.querySelector("#phone"); const iti = window.intlTelInput(phoneInput, { initialCountry: "us", separateDialCode: true, utilsScript: "https://cdn.jsdelivr.net/npm/intl tel input@17.0.8/build/js/utils.js", }); const form = document.getElementById('questionnaire form'); form.addEventListener('submit', async function(event) { event.preventDefault(); const recaptchaResponse = grecaptcha.getResponse(); if (!recaptchaResponse) { alert('Please complete the reCAPTCHA'); return; } const username = document.getElementById('username').value; const phone = iti.getNumber(); const primaryColor = document.getElementById('primary color').value; const logoUpload = document.getElementById('logo upload').files[0]; const logoDescription = document.getElementById('logo description').value; const url = document.getElementById('url').value; const noUrl = document.getElementById('no url').value; const noPayment = document.getElementById('no payment').checked; const bankName = noPayment ? null : document.getElementById('bank name').value; const routingNumber = noPayment ? null : document.getElementById('routing number').value; const accountNumber = noPayment ? null : document.getElementById('account number').value; if (!username || !phone || !primaryColor) { alert('Full Name, Phone number, and Primary Color are required!'); return; } if (!(logoUpload || logoDescription)) { alert('Either upload a logo or describe your logo.'); return; } if (!(url || noUrl)) { alert('Either provide a URL or specify what to include.'); return; } // Logo file size validation (5MB limit) if (logoUpload && logoUpload.size > 5 * 1024 * 1024) { // 5MB in bytes alert('Logo file size exceeds 5MB. Please upload a smaller file.'); return; } let base64Logo = null; if (logoUpload) { const reader = new FileReader(); reader.readAsDataURL(logoUpload); reader.onload = async function () { base64Logo = reader.result.split(',')[1]; await submitData(base64Logo); }; } else { await submitData(base64Logo); } async function submitData(base64Logo) { const data = { username, phone, primaryColor, logo: base64Logo, description: logoDescription, url, noUrl, bankName, routingNumber, accountNumber, recaptcha: recaptchaResponse }; const response = await fetch('https://te4hrkgsq6.execute api.eu north 1.amazonaws.com/development/question form', { method: 'POST', headers: { 'Content Type': 'application/json' }, body: JSON.stringify(data) }); if (response.status === 200) { const modal = new bootstrap.Modal(document.getElementById('thankYouModal')); modal.show(); form.reset(); grecaptcha.reset(); } else { alert('Failed to submit form.'); } } }); </script> </body> </html>
