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:
parent
c013c2cde3
commit
7e44e7e132
4 changed files with 126 additions and 92 deletions
97
content/kontakt/styles.css
Normal file
97
content/kontakt/styles.css
Normal 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;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue