/* =========================
FORMULIR WORDPRESS MODERN
Tema: Hijau Edukasi
========================= */
:root {
–primary: #1e8f5a;
–primary-dark: #146c43;
–secondary: #e8f5ee;
–border: #cfe8da;
–text: #1f2933;
}
/* Wrapper form */
.wp-form,
.wpcf7 form,
.gform_wrapper,
.wpforms-container {
max-width: 900px;
margin: 40px auto;
padding: 30px;
background: #ffffff;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
font-family: “Segoe UI”, sans-serif;
}
/* Judul form */
.wp-form h2,
.wpcf7 h2,
.gform_title,
.wpforms-title {
text-align: center;
color: var(–primary);
font-size: 26px;
margin-bottom: 25px;
}
/* Label */
.wp-form label,
.wpcf7 label,
.gfield_label,
.wpforms-field-label {
font-weight: 600;
color: var(–text);
margin-bottom: 6px;
display: block;
}
/* Input umum */
.wp-form input[type=”text”],
.wp-form input[type=”email”],
.wp-form input[type=”number”],
.wp-form input[type=”date”],
.wp-form input[type=”tel”],
.wp-form select,
.wp-form textarea,
.wpcf7 input,
.wpcf7 select,
.wpcf7 textarea,
.gform_wrapper input,
.gform_wrapper select,
.gform_wrapper textarea,
.wpforms-container input,
.wpforms-container select,
.wpforms-container textarea {
width: 100%;
padding: 12px 14px;
border-radius: 10px;
border: 1.5px solid var(–border);
background: #f9fffc;
font-size: 15px;
transition: 0.3s;
}
/* Fokus input */
input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: var(–primary);
background: #ffffff;
box-shadow: 0 0 0 3px rgba(30,143,90,0.15);
}
/* Textarea */
textarea {
resize: vertical;
min-height: 120px;
}
/* Radio & checkbox */
input[type=”radio”],
input[type=”checkbox”] {
accent-color: var(–primary);
}
/* Grid dua kolom */
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
/* Section / fieldset */
fieldset {
border: 1px solid var(–border);
padding: 20px;
border-radius: 12px;
margin-bottom: 25px;
background: var(–secondary);
}
legend {
padding: 0 10px;
font-weight: 700;
color: var(–primary-dark);
}
/* Tombol submit */
.wp-form input[type=”submit”],
.wpcf7 input[type=”submit”],
.gform_button,
.wpforms-submit {
background: linear-gradient(135deg, var(–primary), var(–primary-dark));
color: #fff;
border: none;
padding: 14px 28px;
border-radius: 30px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
display: block;
margin: 30px auto 0;
transition: 0.3s ease;
}
input[type=”submit”]:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(30,143,90,0.35);
}
/* Pesan sukses */
.wpcf7-response-output,
.gform_confirmation_message,
.wpforms-confirmation-container {
background: #e8f5ee;
color: var(–primary-dark);
border-left: 6px solid var(–primary);
padding: 15px;
border-radius: 8px;
margin-top: 20px;
}
/* Responsive */
@media (max-width: 600px) {
.wp-form,
.wpcf7 form,
.gform_wrapper,
.wpforms-container {
padding: 20px;
}
}