HTML widget > HTML field
============================================================ -->
/* Google Fonts — Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
.fga-form-wrap *,
.fga-form-wrap *::before,
.fga-form-wrap *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.fga-form-wrap {
font-family: 'Montserrat', sans-serif;
width: 100%;
max-width: 720px;
}
/* ── Field rows ─────────────────────────────────────────── */
.fga-row {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.fga-field {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.fga-field.full {
flex: 1 1 100%;
}
/* ── Labels ─────────────────────────────────────────────── */
.fga-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #16163F;
margin-bottom: 7px;
}
.fga-label .fga-req {
color: #d3b574;
margin-left: 2px;
}
/* ── Inputs, selects, textarea ──────────────────────────── */
.fga-input,
.fga-select,
.fga-textarea {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 300;
color: #4A4A4A;
background: #ffffff;
border: 1px solid #d8d3ca;
border-radius: 0;
padding: 12px 14px;
width: 100%;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
-webkit-appearance: none;
appearance: none;
}
.fga-input:focus,
.fga-select:focus,
.fga-textarea:focus {
border-color: #d3b574;
box-shadow: 0 0 0 3px rgba(211, 181, 116, 0.15);
}
.fga-input::placeholder,
.fga-textarea::placeholder {
color: #b0a898;
font-weight: 300;
}
.fga-textarea {
resize: vertical;
min-height: 120px;
line-height: 1.6;
}
/* ── Select wrapper (custom arrow) ─────────────────────── */
.fga-select-wrap {
position: relative;
}
.fga-select-wrap::after {
content: '';
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid #d3b574;
pointer-events: none;
}
.fga-select {
padding-right: 36px;
background: #ffffff;
cursor: pointer;
}
/* ── Radio group (preferred contact) ───────────────────── */
.fga-radio-group {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 2px;
}
.fga-radio-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 400;
color: #4A4A4A;
cursor: pointer;
padding: 9px 14px;
border: 1px solid #d8d3ca;
transition: border-color 0.2s, background 0.2s;
}
.fga-radio-label:hover {
border-color: #d3b574;
background: #fdf9f3;
}
.fga-radio-label input[type="radio"] {
accent-color: #d3b574;
width: 15px;
height: 15px;
cursor: pointer;
flex-shrink: 0;
}
.fga-radio-label.fga-radio-selected {
border-color: #d3b574;
background: rgba(211, 181, 116, 0.08);
}
/* ── Privacy note ───────────────────────────────────────── */
.fga-privacy {
font-size: 12px;
font-weight: 300;
color: #888;
line-height: 1.6;
margin-bottom: 24px;
padding: 12px 16px;
background: #f8f5ef;
border-left: 3px solid #d3b574;
}
/* ── Submit button ──────────────────────────────────────── */
.fga-submit {
font-family: 'Montserrat', sans-serif;
font-size: 15px;
font-weight: 500;
color: #ffffff;
background: #d3b574;
border: none;
border-radius: 0;
padding: 15px 36px;
cursor: pointer;
letter-spacing: 0.04em;
text-transform: capitalize;
transition: background 0.2s, transform 0.1s;
display: inline-flex;
align-items: center;
gap: 10px;
}
.fga-submit:hover {
background: #c4a050;
}
.fga-submit:active {
transform: translateY(1px);
}
.fga-submit:disabled {
background: #c8bba0;
cursor: not-allowed;
transform: none;
}
.fga-submit-arrow {
font-size: 17px;
transition: transform 0.2s;
}
.fga-submit:hover .fga-submit-arrow {
transform: translateX(4px);
}
/* ── Validation errors ──────────────────────────────────── */
.fga-error {
font-size: 11px;
font-weight: 500;
color: #b94040;
margin-top: 5px;
display: none;
}
.fga-field.has-error .fga-input,
.fga-field.has-error .fga-select,
.fga-field.has-error .fga-textarea {
border-color: #b94040;
}
.fga-field.has-error .fga-error {
display: block;
}
/* ── Thank-you panel ────────────────────────────────────── */
.fga-thankyou {
display: none;
padding: 40px 36px;
background: #16163F;
border-top: 4px solid #d3b574;
}
.fga-thankyou.visible {
display: block;
}
.fga-thankyou-icon {
width: 48px;
height: 48px;
background: rgba(211, 181, 116, 0.15);
border: 2px solid #d3b574;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin-bottom: 20px;
}
.fga-thankyou-heading {
font-size: 22px;
font-weight: 600;
color: #ffffff;
margin-bottom: 12px;
line-height: 1.3;
}
.fga-thankyou-body {
font-size: 14px;
font-weight: 300;
color: rgba(255, 255, 255, 0.72);
line-height: 1.7;
margin-bottom: 20px;
}
.fga-thankyou-trust {
display: flex;
flex-wrap: wrap;
gap: 16px;
font-size: 12px;
font-weight: 400;
color: rgba(255, 255, 255, 0.5);
}
.fga-thankyou-trust span::before {
content: '✔ ';
color: #d3b574;
}
/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 600px) {
.fga-row {
flex-direction: column;
gap: 0;
}
.fga-row .fga-field {
margin-bottom: 20px;
}
.fga-radio-group {
flex-direction: column;
gap: 8px;
}
}
(function () {
var form = document.getElementById('fgaContactForm');
var thanks = document.getElementById('fgaThankyou');
var btn = document.getElementById('fga-btn');
// ── Radio label highlight ────────────────────────────────
document.querySelectorAll('.fga-radio-label input[type="radio"]').forEach(function (radio) {
radio.addEventListener('change', function () {
document.querySelectorAll('.fga-radio-label').forEach(function (lbl) {
lbl.classList.remove('fga-radio-selected');
});
radio.closest('.fga-radio-label').classList.add('fga-radio-selected');
});
});
// ── Validation helpers ───────────────────────────────────
function setError(fieldId, errId, show) {
var field = document.getElementById(fieldId);
var err = document.getElementById(errId);
if (!field || !err) return;
if (show) {
field.classList.add('has-error');
} else {
field.classList.remove('has-error');
}
}
function validateEmail(val) {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val.trim());
}
function validate() {
var ok = true;
var name = document.getElementById('fga-name').value.trim();
var email = document.getElementById('fga-email').value.trim();
var state = document.getElementById('fga-state').value;
var situation = document.getElementById('fga-situation').value.trim();
var nameOk = name.length >= 2;
var emailOk = validateEmail(email);
var stateOk = state !== '';
var situationOk = situation.length >= 10;
setError('field-name', 'err-name', !nameOk);
setError('field-email', 'err-email', !emailOk);
setError('field-state', 'err-state', !stateOk);
setError('field-situation', 'err-situation', !situationOk);
if (!nameOk || !emailOk || !stateOk || !situationOk) ok = false;
return ok;
}
// ── Clear error on input ─────────────────────────────────
['fga-name', 'fga-email', 'fga-phone', 'fga-situation'].forEach(function (id) {
var el = document.getElementById(id);
if (el) {
el.addEventListener('input', function () {
var field = el.closest('.fga-field');
if (field) field.classList.remove('has-error');
});
}
});
document.getElementById('fga-state').addEventListener('change', function () {
document.getElementById('field-state').classList.remove('has-error');
});
// ── Submit ───────────────────────────────────────────────
form.addEventListener('submit', function (e) {
e.preventDefault();
if (!validate()) return;
// Disable button & show loading state
btn.disabled = true;
btn.innerHTML = 'Sending…';
// Simulate a brief delay then show thank-you
setTimeout(function () {
form.style.display = 'none';
thanks.classList.add('visible');
// Scroll thank-you panel into view smoothly
thanks.scrollIntoView({ behavior: 'smooth', block: 'start' });
}, 600);
});
})();
