jeffemmett
/
pwf-website-new
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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 2025-06-13 16:19:39 +00:00
parent c42db15c9c
commit 548fead15e
2 changed files with 19 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/targeted_element_1749831527971.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

99
client/src/components/contact/contact-section.tsx
View File

@ -1,82 +1,4 @@
import { useEffect, useRef } from "react";
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 (
<section className="py-12 bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@ -90,8 +12,25 @@ export function ContactSection() {
</div>
<div className="flex justify-center">
<div className="max-w-xl w-full" ref={formContainerRef}>
{/* Mailchimp form will be inserted here by the useEffect hook */}
<div className="max-w-xl w-full">
<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>