Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Tours Form</title> | |
| <style> | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background-color: transparent; | |
| margin: 0; | |
| padding: 20px; | |
| color: #333; | |
| } | |
| .contact-form { | |
| max-width: 600px; | |
| margin: 0 auto; | |
| background: #fff; | |
| padding: 30px; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); | |
| } | |
| .form-group { | |
| margin-bottom: 20px; | |
| } | |
| label { | |
| display: block; | |
| margin-bottom: 8px; | |
| font-weight: 500; | |
| color: #1a365d; | |
| } | |
| input[type="text"], | |
| input[type="email"], | |
| input[type="tel"], | |
| select, | |
| textarea { | |
| width: 100%; | |
| padding: 10px; | |
| border: 1px solid #ccc; | |
| border-radius: 4px; | |
| font-size: 16px; | |
| box-sizing: border-box; | |
| } | |
| button[type="submit"], input[type="submit"] { | |
| background-color: #1a365d; | |
| color: white; | |
| padding: 12px 24px; | |
| border: none; | |
| border-radius: 4px; | |
| font-size: 16px; | |
| cursor: pointer; | |
| width: 100%; | |
| transition: background-color 0.2s; | |
| } | |
| button[type="submit"]:hover, input[type="submit"]:hover { | |
| background-color: #2c5282; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <form class="form-container" id="tourRequestForm"> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <label for="groupName">Organization/Youth Group Name <span class="required">*</span></label> | |
| <input type="text" id="groupName" name="groupName" required="" data-validate="required"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="tourType">Tour Type <span class="required">*</span></label> | |
| <select id="tourType" name="tourType" required="" data-validate="required"> | |
| <option value="">Select tour type</option> | |
| <option value="docent">Docent-Led Tour (Adults/General)</option> | |
| <option value="youth-elementary">Youth Program (Grades 5-6)</option> | |
| <option value="youth-middle">Youth Program (Grades 7-8)</option> | |
| <option value="youth-high">Youth Program (Grades 9-12)</option> | |
| <option value="veteran">Veteran Group Tour</option> | |
| <option value="other">Other (Specify in comments)</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <label for="contactName">Contact Person Name <span class="required">*</span></label> | |
| <input type="text" id="contactName" name="contactName" required="" data-validate="required"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="contactTitle">Title/Position</label> | |
| <input type="text" id="contactTitle" name="contactTitle"> | |
| </div> | |
| </div> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <label for="email">Email Address <span class="required">*</span></label> | |
| <input type="email" id="email" name="email" required="" data-validate="email"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="phone">Phone Number <span class="required">*</span></label> | |
| <input type="tel" id="phone" name="phone" required="" data-validate="phone"> | |
| </div> | |
| </div> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <label for="groupSize">Expected Group Size <span class="required">*</span></label> | |
| <input type="number" id="groupSize" name="groupSize" min="1" max="50" required="" data-validate="required"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="preferredDate">Preferred Date (TBA once schedule set)</label> | |
| <input type="text" id="preferredDate" name="preferredDate" placeholder="We'll coordinate once dates are finalized"> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="preferredTime">Preferred Time of Day</label> | |
| <select id="preferredTime" name="preferredTime"> | |
| <option value="">No preference</option> | |
| <option value="morning">Morning (9:00 AM - 12:00 PM)</option> | |
| <option value="afternoon">Afternoon (12:00 PM - 4:00 PM)</option> | |
| <option value="evening">Evening (4:00 PM - 7:00 PM)</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="specialNeeds">Special Accommodations or Requirements</label> | |
| <textarea id="specialNeeds" name="specialNeeds" placeholder="Accessibility needs, language requirements, veteran speakers requested, etc."></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label for="additionalInfo">Additional Information or Questions</label> | |
| <textarea id="additionalInfo" name="additionalInfo"></textarea> | |
| </div> | |
| <div style="text-align: center; margin-top: 2rem;"> | |
| <button type="submit" class="btn btn-primary" style="padding: 1rem 3rem;">Submit Tour | |
| Request</button> | |
| <p style="margin-top: 1rem; font-size: 0.9rem; color: var(--color-gray-dark);">We'll contact you | |
| within 2-3 business days to confirm your tour request</p> | |
| </div> | |
| </form> | |
| <!-- Integration Script to automatically wire this form up to the Hugging Face API --> | |
| <script src="/live-site-integration.js"></script> | |
| </body> | |
| </html> |