Oliver/NGO
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge webhook donor form into main

Browse Source
This commit is contained in:
wd@odoo4projects.com
2026-03-24 19:53:43 +00:00
parent 6325b009bb
commit 6f07c937e1
1 changed files with 86 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+85 -21
View File
@@ -182,28 +182,92 @@
<li class="flex gap-3"><span class="text-brand-emerald" aria-hidden="true">•</span><span data-i18n="trial-bullet3"></span></li> <li class="flex gap-3"><span class="text-brand-emerald" aria-hidden="true">•</span><span data-i18n="trial-bullet3"></span></li>
</ul> </ul>
</div> </div>
<form class="bg-white text-brand-ink rounded-3xl p-8 shadow-brand space-y-5" data-event="form:trial"> <form id="donorForm" novalidate>
<label class="block text-sm font-medium"> <select name="location" id="locationSelect" style="display:none">
<span data-i18n="trial-label-email"></span> <option value="">Select Location</option>
<input type="email" required class="mt-2 w-full rounded-2xl border border-brand-smoke px-4 py-3 focus:outline-none focus:ring-2 focus:ring-brand-accent" data-i18n-placeholder="trial-placeholder-email" /> <option value="Boston">US, Boston</option>
</label> <option value="Manchester">UK, Manchester</option>
<label class="block text-sm font-medium"> <option value="Mumbai">IN, Mumbai</option>
<span data-i18n="trial-label-priority"></span> <option value="Saopaulo">BR, Sao Paulo</option>
<select class="mt-2 w-full rounded-2xl border border-brand-smoke px-4 py-3 focus:outline-none focus:ring-2 focus:ring-brand-accent"> <option value="meppel">NL, Meppel</option>
<option data-i18n-option="priority-1"></option> <option value="sydney">AU, Sydney</option>
<option data-i18n-option="priority-2"></option>
<option data-i18n-option="priority-3"></option>
<option data-i18n-option="priority-4"></option>
</select> </select>
</label>
<label class="block text-sm font-medium"> <input type="text" name="name" placeholder="Name" required>
<span data-i18n="trial-label-region"></span> <input type="text" name="company" placeholder="Company" required>
<input type="text" class="mt-2 w-full rounded-2xl border border-brand-smoke px-4 py-3 focus:outline-none focus:ring-2 focus:ring-brand-accent" data-i18n-placeholder="trial-placeholder-region" /> <input type="text" name="country" placeholder="Country" required>
</label> <input type="text" name="street" placeholder="Street" required>
<p class="text-xs text-brand-ink/70" data-i18n="trial-microcopy"></p>
<button type="submit" class="w-full py-3 rounded-2xl bg-brand-accent text-brand-ink font-semibold" data-i18n="cta-trial"></button> <div>
<p class="text-xs text-brand-ink/60 text-center" data-i18n="trial-help"></p> <input type="text" name="zip" placeholder="ZIP" required>
</form> <input type="text" name="town" placeholder="Town" required>
</div>
<input type="email" name="email" placeholder="Email" required>
<input type="hidden" name="product" id="productField" value="">
<input type="hidden" name="price" id="priceField" value="">
<button type="submit">Send</button>
<div id="formMessage" aria-live="polite"></div>
</form>
<script>
const WEBHOOK_URL = "https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c76e6b4e-af2f-4bc3-9875-6460d0ffc8e3";
document.addEventListener('DOMContentLoaded', () => {
const form = document.getElementById('donorForm');
const msg = document.getElementById('formMessage');
const locationSelect = document.getElementById('locationSelect');
function maybeShowLocation(productName) {
if (!productName) { locationSelect.style.display = 'none'; locationSelect.required = false; return; }
if (productName.startsWith('_')) {
locationSelect.style.display = 'block';
locationSelect.required = true;
} else {
locationSelect.style.display = 'none';
locationSelect.required = false;
locationSelect.value = '';
}
}
// If you set product/price from buttons/links on the page, ensure those handlers call:
// document.getElementById('productField').value = 'exampleProduct';
// document.getElementById('priceField').value = '123';
// maybeShowLocation('exampleProduct');
form.addEventListener('submit', async (e) => {
e.preventDefault();
msg.textContent = '';
const data = {};
new FormData(form).forEach((value, key) => data[key] = value);
try {
const res = await fetch(WEBHOOK_URL, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
if (res.ok) {
msg.textContent = 'Thank you — your submission was sent.';
form.reset();
maybeShowLocation('');
} else {
msg.textContent = 'Submission failed. Please try again.';
console.error('Webhook response status:', res.status, await res.text());
}
} catch (err) {
console.error(err);
msg.textContent = 'Error submitting form. Please try later.';
}
});
});
</script>
</div> </div>
</section> </section>