romfast/romfast-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add functional contact form with PHP backend and SMTP integration

Browse Source 
- Create contact-handler.php with SMTP configuration for mail.romfast.ro
- Update contact.html with form action, validation, and JavaScript messaging
- Implement email delivery to office@romfast.ro with proper headers
- Add success/error message handling with clean URL management
- Include form validation and user feedback improvements

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Marius Mutu
2025-08-15 00:20:42 +03:00
parent 90aa51bcf9
commit cc5a96455c
2 changed files with 249 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
menu/contact.html
View File

@@ -136,15 +136,18 @@
</div>
<h2 class="text-2xl font-semibold mb-6 professional-text-primary text-center">Trimite-ne un Mesaj</h2>
<form class="space-y-6">
<!-- Mesaje de succes/eroare -->
<div id="form-messages"></div>
<form class="space-y-6" action="../contact-handler.php" method="POST">
<div>
<label for="nume" class="block text-sm font-medium professional-text-primary mb-2">Nume complet</label>
<input type="text" id="nume" name="nume" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" placeholder="Numele dumneavoastră">
<input type="text" id="nume" name="nume" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" placeholder="Numele dumneavoastră">
</div>
<div>
<label for="email" class="block text-sm font-medium professional-text-primary mb-2">Adresa de e-mail</label>
<input type="email" id="email" name="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" placeholder="exemplu@email.com">
<input type="email" id="email" name="email" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" placeholder="exemplu@email.com">
</div>
<div>
@@ -154,9 +157,9 @@
<div>
<label for="subiect" class="block text-sm font-medium professional-text-primary mb-2">Subiect</label>
<select id="subiect" name="subiect" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors">
<select id="subiect" name="subiect" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors">
<option value="">Selectați subiectul</option>
<option value="informaii-roa">Informații despre ROA</option>
<option value="informatii-roa">Informații despre ROA</option>
<option value="suport-tehnic">Suport tehnic</option>
<option value="implementare">Implementare soluție</option>
<option value="demo">Solicitare demo</option>
@@ -166,7 +169,7 @@
<div>
<label for="mesaj" class="block text-sm font-medium professional-text-primary mb-2">Mesajul dumneavoastră</label>
<textarea id="mesaj" name="mesaj" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors resize-none" placeholder="Descrieți cererea dumneavoastră în detaliu..."></textarea>
<textarea id="mesaj" name="mesaj" rows="5" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors resize-none" placeholder="Descrieți cererea dumneavoastră în detaliu..."></textarea>
</div>
<button type="submit" class="professional-btn-primary px-8 py-4 text-lg w-full">
@@ -255,6 +258,81 @@
})
</script>
<!-- Contact Form Messages JavaScript -->
<script>
// Afișarea mesajelor de succes/eroare
function showMessage(message, type) {
const messagesDiv = document.getElementById('form-messages');
const alertClass = type === 'success' ? 'bg-green-100 border-green-400 text-green-700' : 'bg-red-100 border-red-400 text-red-700';
messagesDiv.innerHTML = `
<div class="border-l-4 p-4 mb-6 rounded ${alertClass}" role="alert">
<div class="flex">
<div class="flex-shrink-0">
<i data-lucide="${type === 'success' ? 'check-circle' : 'alert-circle'}" class="w-5 h-5"></i>
</div>
<div class="ml-3">
<p class="text-sm">${message}</p>
</div>
<div class="ml-auto pl-3">
<div class="-mx-1.5 -my-1.5">
<button type="button" class="inline-flex rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-offset-2" onclick="this.parentElement.parentElement.parentElement.parentElement.remove()">
<i data-lucide="x" class="w-4 h-4"></i>
</button>
</div>
</div>
</div>
</div>
`;
// Reinitializează iconițele Lucide pentru mesajul nou
if (typeof lucide !== 'undefined') {
lucide.createIcons();
}
// Scroll către mesaj
messagesDiv.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
// Verifică parametrii URL pentru mesaje
document.addEventListener('DOMContentLoaded', function() {
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.has('success')) {
showMessage('Mesajul dumneavoastră a fost trimis cu succes! Vă vom răspunde în cel mai scurt timp posibil.', 'success');
// Curăță URL-ul
const newUrl = window.location.pathname;
window.history.replaceState({}, '', newUrl);
}
if (urlParams.has('error')) {
const errorMessage = urlParams.get('error');
showMessage(errorMessage, 'error');
// Curăță URL-ul
const newUrl = window.location.pathname;
window.history.replaceState({}, '', newUrl);
}
});
// Validare suplimentară la submit
document.querySelector('form').addEventListener('submit', function(e) {
const submitBtn = this.querySelector('button[type="submit"]');
const originalText = submitBtn.innerHTML;
// Schimbă textul butonului în timpul trimiterii
submitBtn.innerHTML = '<span>Se trimite...</span>';
submitBtn.disabled = true;
// Resetează butonul după 5 secunde (în caz de eroare)
setTimeout(() => {
submitBtn.innerHTML = originalText;
submitBtn.disabled = false;
}, 5000);
});
</script>
<!-- Professional Theme JavaScript -->
<script src="../professional-theme.js"></script>
</body>