Replace the current contact form with an updated Mailchimp version
Replaces the contact form in `contact-section.tsx` with a Mailchimp embed for improved form management. Replit-Commit-Author: Agent Replit-Commit-Session-Id: d004b9e1-f9be-46e2-acda-f440ccd644a9 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/af8dabca-e746-4e53-9c29-d8d4d9cf30f5/160be26a-b5eb-403e-854c-4fcd0c0a77bc.jpg
This commit is contained in:
JeffEmmett
parent
c42db15c9c
commit
548fead15e
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
|
|
@ -1,82 +1,4 @@
|
||||||
import { useEffect, useRef } from "react";
|
|
||||||
|
|
||||||
export function ContactSection() {
|
export function ContactSection() {
|
||||||
const formContainerRef = useRef<HTMLDivElement>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// Define the Mailchimp form HTML
|
|
||||||
const mailchimpFormHTML = `
|
|
||||||
<!-- Begin Mailchimp Contact Form -->
|
|
||||||
<div id="mc_embed_contact_form" class="bg-gray-50 p-8 rounded-lg shadow-sm">
|
|
||||||
<form action="https://us5.list-manage.com/contact-form?u=1d139a47cd1264b937687c37e&form_id=570823f6e3a6f36704ea241f7201c8ac"
|
|
||||||
method="post"
|
|
||||||
id="mc-embedded-contact-form"
|
|
||||||
name="mc-embedded-contact-form"
|
|
||||||
target="_self"
|
|
||||||
novalidate>
|
|
||||||
|
|
||||||
<div class="mb-4">
|
|
||||||
<label for="FNAME" class="block text-gray-700 font-medium mb-2">Name *</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="FNAME"
|
|
||||||
name="FNAME"
|
|
||||||
class="w-full px-4 py-2 border border-gray-300 focus:outline-none focus:border-teal rounded-md"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-4">
|
|
||||||
<label for="EMAIL" class="block text-gray-700 font-medium mb-2">Email *</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="EMAIL"
|
|
||||||
name="EMAIL"
|
|
||||||
class="w-full px-4 py-2 border border-gray-300 focus:outline-none focus:border-teal rounded-md"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-4">
|
|
||||||
<label for="SUBJECT" class="block text-gray-700 font-medium mb-2">Subject</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="SUBJECT"
|
|
||||||
name="SUBJECT"
|
|
||||||
class="w-full px-4 py-2 border border-gray-300 focus:outline-none focus:border-teal rounded-md"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-4">
|
|
||||||
<label for="MMERGE3" class="block text-gray-700 font-medium mb-2">Message *</label>
|
|
||||||
<textarea
|
|
||||||
id="MMERGE3"
|
|
||||||
name="MMERGE3"
|
|
||||||
rows="5"
|
|
||||||
class="w-full px-4 py-2 border border-gray-300 focus:outline-none focus:border-teal rounded-md"
|
|
||||||
required
|
|
||||||
></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Submit button styled to match our site design -->
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
name="submitForm"
|
|
||||||
class="w-full px-6 py-3 bg-purple text-white font-bold hover:bg-opacity-90 transition duration-300 rounded-full flex items-center justify-center"
|
|
||||||
>
|
|
||||||
Send Message
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
<!-- End Mailchimp Contact Form -->
|
|
||||||
`;
|
|
||||||
|
|
||||||
// Insert the form into the DOM
|
|
||||||
if (formContainerRef.current) {
|
|
||||||
formContainerRef.current.innerHTML = mailchimpFormHTML;
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="py-12 bg-white">
|
<section className="py-12 bg-white">
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
|
@ -90,8 +12,25 @@ export function ContactSection() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex justify-center">
|
<div className="flex justify-center">
|
||||||
<div className="max-w-xl w-full" ref={formContainerRef}>
|
<div className="max-w-xl w-full">
|
||||||
{/* Mailchimp form will be inserted here by the useEffect hook */}
|
<div className="bg-gray-50 p-8 rounded-lg shadow-sm">
|
||||||
|
<iframe
|
||||||
|
src="https://us5.list-manage.com/contact-form?u=1d139a47cd1264b937687c37e&form_id=570823f6e3a6f36704ea241f7201c8ac"
|
||||||
|
width="100%"
|
||||||
|
height="600"
|
||||||
|
frameBorder="0"
|
||||||
|
marginHeight={0}
|
||||||
|
marginWidth={0}
|
||||||
|
style={{
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '8px',
|
||||||
|
backgroundColor: 'transparent'
|
||||||
|
}}
|
||||||
|
title="Contact Form"
|
||||||
|
>
|
||||||
|
Loading contact form...
|
||||||
|
</iframe>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue