omgitsalexl/noel-design-atelier
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated form and messages

Browse Source
This commit is contained in:
omgitsalexl
2026-09-23 15:18:25 -07:00
parent 4776512afc
commit b27704a636
2 changed files with 28 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+22 -14
View File
@@ -15,7 +15,7 @@
href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600&display=swap"
rel="stylesheet"
>
<link rel="stylesheet" href="styles.css?version=reusable-classes">
<link rel="stylesheet" href="styles.css?version=form-refinement">
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/ScrollTrigger.min.js"></script>
@@ -374,26 +374,26 @@
<input type="hidden" name="access_key" value="e13bd9eb-b409-4b3f-936c-a938a701ee2e">
<div class="field-grid">
<div class="field-group">
<label class="label-uppercase" for="inquiry-name">Your name</label>
<input id="inquiry-name" type="text" autocomplete="name" required>
<label class="label-uppercase" for="name">Your name</label>
<input id="name" name="name" type="text" autocomplete="name" required>
</div>
<div class="field-group">
<label class="label-uppercase" for="inquiry-email">Email</label>
<input id="inquiry-email" type="email" autocomplete="email" required>
<label class="label-uppercase" for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email" required>
</div>
</div>
<input type="checkbox" name="botcheck" class="hidden" style="display: none;">
<div class="field-group">
<label class="label-uppercase" for="inquiry-organization">Describe the space</label>
<input id="inquiry-organization" type="text" autocomplete="organization" required>
<label class="label-uppercase" for="organization">Describe the space</label>
<input id="organization" name="organization" type="text" autocomplete="organization" required>
</div>
<div class="field-group">
<label class="label-uppercase" for="inquiry-project-brief">What do you have in mind?</label>
<textarea id="inquiry-project-brief" rows="5" required></textarea>
<label class="label-uppercase" for="project-brief">What do you have in mind?</label>
<textarea id="project-brief" name="project-brief" rows="5" required></textarea>
</div>
<button class="button-filled label-uppercase" type="submit">
@@ -401,10 +401,12 @@
</button>
</form>
<p class="target-notice" id="contact-confirmation" class="hidden">
<div class="grid-trailing-form vertical-centering hidden" id="contact-confirmation">
<p class="target-notice" id="confirmation-message">
Please wait...
</p>
</div>
</div>
</section>
</main>
@@ -426,7 +428,6 @@
decoding="async"
>
</a>
<!--<p class="text-muted-small">For the welcome you offer and the memories you make.</p>-->
</div>
<nav class="link-stack" aria-label="Footer navigation">
@@ -453,8 +454,10 @@
</body>
<script>
var success = false;
const inquiryForm = document.getElementById("inquiry-form");
const confirmation = document.getElementById("contact-confirmation");
const confirmationMessage = document.getElementById("confirmation-message");
inquiryForm.addEventListener("submit", (event) => {
event.preventDefault();
@@ -476,16 +479,21 @@
.then(async (response) => {
let json = await response.json();
if (response.status === 200) {
confirmation.innerHTML = "Thank you for your interest! Noel Design Atelier will review your inquiry and contact you soon.";
success = true;
confirmationMessage.innerHTML = "Thank you for your interest! Noel Design Atelier will review your inquiry and contact you soon.";
} else {
confirmation.innerHTML = json.message;
console.error('Error:', json);
confirmationMessage.innerHTML = json.message;
}
})
.catch((error) => {
console.error('Error:', error);
confirmation.innerHTML = "An error occurred. Please try again.";
confirmationMessage.innerHTML = "An error occurred. Please try again.";
})
.then((response) => {
if (success) {
return;
}
inquiryForm.reset();
setTimeout(() => {
confirmation.classList.add("hidden");
styles.css
+4 -1
View File
@@ -83,6 +83,10 @@ ul {
display: none;
}
.vertical-centering {
align-self: center;
}
/* Compose layout, typography, surfaces, and components independently.
Responsive placement belongs to descriptive layout variants; IDs are anchors only. */
.grid-twelve-columns {
@@ -743,7 +747,6 @@ ul {
}
.target-notice {
display: none;
margin-top: 1.5rem;
padding: 1rem;
border-left: 0.25rem solid var(--color-noel-red);