Embed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prayer Request Form</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f8f9fa;
            color: #333;
        }
        .container {
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            color: #3a5795;
            text-align: center;
            margin-bottom: 30px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
        }
        input[type="text"],
        input[type="email"],
        textarea,
        select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
            font-family: inherit;
            font-size: 16px;
        }
        textarea {
            height: 150px;
            resize: vertical;
        }
        .privacy-options {
            display: flex;
            gap: 15px;
            margin-top: 10px;
        }
        .radio-option {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        button {
            background-color: #3a5795;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            width: 100%;
            margin-top: 10px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #2a4178;
        }
        .confirmation {
            display: none;
            text-align: center;
            margin-top: 20px;
            padding: 15px;
            background-color: #dff0d8;
            color: #3c763d;
            border-radius: 4px;
        }
        .required {
            color: #d9534f;
        }
        .privacy-note {
            font-size: 14px;
            color: #666;
            margin-top: 5px;
        }
        .error-message {
            display: none;
            text-align: center;
            margin-top: 20px;
            padding: 15px;
            background-color: #f8d7da;
            color: #721c24;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Prayer Request Form</h1>
        <form id="prayerRequestForm">
            <div class="form-group">
                <label for="name">Your Name <span class="required">*</span></label>
                <input type="text" id="name" name="name" required>
            </div>
            
            <div class="form-group">
                <label for="email">Email Address <span class="required">*</span></label>
                <input type="email" id="email" name="email" required>
                <div class="privacy-note">Your email will not be shared publicly.</div>
            </div>
            
            <div class="form-group">
                <label for="request">Prayer Request <span class="required">*</span></label>
                <textarea id="request" name="request" required></textarea>
            </div>
            
            <div class="form-group">
                <label>Prayer Request Privacy <span class="required">*</span></label>
                <div class="privacy-options">
                    <div class="radio-option">
                        <input type="radio" id="public" name="privacy" value="public" required>
                        <label for="public">Public</label>
                    </div>
                    <div class="radio-option">
                        <input type="radio" id="private" name="privacy" value="private" checked>
                        <label for="private">Private (to Chaplain Mark only)</label>
                    </div>
                </div>
                <div class="privacy-note">
                    <strong>Public:</strong> Your request will be shared with my prayer team to pray for you.
                    <br>
                    <strong>Private:</strong> Your request will be sent directly to Chaplain Mark (ChaplainMark@chaplain-services.com).
                </div>
            </div>
            
            <div class="form-group">
                <label for="category">Category</label>
                <select id="category" name="category">
                    <option value="">-- Select a category --</option>
                    <option value="health">Health & Healing</option>
                    <option value="family">Family</option>
                    <option value="financial">Financial</option>
                    <option value="spiritual">Spiritual</option>
                    <option value="guidance">Guidance & Direction</option>
                    <option value="other">Other</option>
                </select>
            </div>
            
            <button type="submit">Submit Prayer Request</button>
        </form>
        
        <div id="confirmation" class="confirmation">
            Your prayer request has been submitted. Thank you for sharing with us.
        </div>
        
        <div id="error-message" class="error-message">
            There was a problem submitting your prayer request. Please try again or contact us directly at chaplainmark@chaplain-services.com.
        </div>
    </div>

    <script>
        document.getElementById('prayerRequestForm').addEventListener('submit', function(e) {
            e.preventDefault(); // Prevent default form submission
            
            // Get form data
            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            const request = document.getElementById('request').value;
            const privacy = document.querySelector('input[name="privacy"]:checked').value;
            const category = document.getElementById('category').value || 'Not specified';
            
            // Create email content
            const subject = encodeURIComponent('New Prayer Request');
            const body = encodeURIComponent(`
Name: ${name}
Email: ${email}
Category: ${category}
Privacy: ${privacy}

Prayer Request:
${request}
            `);
            
            // Create mailto link
            const mailtoLink = `mailto:chaplainmark@chaplain-services.com?subject=${subject}&body=${body}`;
            
            // Open email client
            window.location.href = mailtoLink;
            
            // Hide the form
            document.getElementById('prayerRequestForm').style.display = 'none';
            
            // Show the confirmation message
            const confirmationElement = document.getElementById('confirmation');
            confirmationElement.style.display = 'block';
            
            // Set the appropriate confirmation message
            if (privacy === 'private') {
                confirmationElement.innerHTML = `Your email client should have opened with your private prayer request. Send the email to reach Chaplain Mark directly at ${email}.`;
            } else {
                confirmationElement.innerHTML = 'Your email client should have opened with your public prayer request. Send the email and it will be shared with the prayer team.';
            }
        });
    </script>
</body>
</html>

Chaplain Services

Chaplain-Services provides compassionate spiritual support, grief counseling, and crisis intervention when you need it most. With professional experience in hospital visits, memorial services, and wedding ceremonies, I offer a respectful listening ear for all faiths and backgrounds. Available for personal consultation in the Sparta, MI area, I walk alongside you through life's challenges and celebrations with genuine care and wisdom. 