Add CSRF protection and rate limiting to contact form

Improve contact form styling with dedicated CSS file Move contact form
styles from base.css to separate file Add security measures to custom
directory with .htaccess Update honeypot field styling and
implementation
This commit is contained in:
Ruben 2025-11-04 22:33:14 +01:00
parent c013c2cde3
commit 7e44e7e132
4 changed files with 126 additions and 92 deletions

View file

@ -0,0 +1,97 @@
/* Contact Form Styles */
/* Honeypot field - hidden from users but looks normal to bots */
.hp-field {
position: absolute;
left: -5000px;
}
/* Contact form section */
.contact-form {
margin-top: 2rem;
margin-bottom: 2rem;
}
/* Success message */
.form-success {
background-color: #d4edda;
border: 1px solid #c3e6cb;
color: #155724;
padding: 1rem;
border-radius: 0.25rem;
margin-bottom: 1rem;
}
/* Error messages */
.form-errors {
background-color: #f8d7da;
border: 1px solid #f5c6cb;
color: #721c24;
padding: 1rem;
border-radius: 0.25rem;
margin-bottom: 1rem;
}
.form-errors ul {
margin: 0.5rem 0 0 0;
padding-left: 1.5rem;
}
/* Form fields */
.contact-form-inner .form-group {
margin-bottom: 1.3rem;
}
.contact-form-inner .form-group label {
display: block;
font-weight: 600;
margin-bottom: 0.3rem;
color: var(--color-grey);
}
.contact-form-inner .form-group label .required {
color: #dc3545;
}
.contact-form-inner .form-group input[type="text"],
.contact-form-inner .form-group input[type="email"],
.contact-form-inner .form-group textarea {
width: 100%;
padding: 0.6rem;
border: 1px solid #ccc;
border-radius: 0.25rem;
font-family: inherit;
font-size: 1rem;
box-sizing: border-box;
}
.contact-form-inner .form-group input[type="text"]:focus,
.contact-form-inner .form-group input[type="email"]:focus,
.contact-form-inner .form-group textarea:focus {
outline: none;
border-color: var(--color-green);
box-shadow: 0 0 0 0.2rem rgba(0, 156, 128, 0.25);
}
.contact-form-inner .form-group textarea {
resize: vertical;
min-height: 150px;
}
.contact-form-inner .form-group small {
display: block;
margin-top: 0.3rem;
color: #6c757d;
font-size: 0.875rem;
}
.contact-form-inner .form-group button[type="submit"] {
cursor: pointer;
border: none;
font-size: 1rem;
font-family: inherit;
}
.contact-form-inner .form-group button[type="submit"]:hover {
cursor: pointer;
}