warns that contact form is semi-functional

This commit is contained in:
2026-02-19 08:21:03 +00:00
parent 500fb7bb55
commit af7d40ef39
2 changed files with 31 additions and 0 deletions

View File

@@ -46,6 +46,17 @@
--colour-error-90: oklch(0.9 0.2 26); --colour-error-90: oklch(0.9 0.2 26);
--colour-error-95: oklch(0.95 0.2 26); --colour-error-95: oklch(0.95 0.2 26);
--colour-warn-10: oklch(0.1 0.2 46);
--colour-warn-20: oklch(0.2 0.2 46);
--colour-warn-30: oklch(0.3 0.2 46);
--colour-warn-40: oklch(0.4 0.2 46);
--colour-warn-50: oklch(0.5 0.2 46);
--colour-warn-60: oklch(0.6 0.2 46);
--colour-warn-70: oklch(0.7 0.2 46);
--colour-warn-80: oklch(0.8 0.2 46);
--colour-warn-90: oklch(0.9 0.2 46);
--colour-warn-95: oklch(0.95 0.2 46);
--colour-primary-fg: var(--colour-primary-90); --colour-primary-fg: var(--colour-primary-90);
--colour-primary-fg-accent: var(--colour-primary-80); --colour-primary-fg-accent: var(--colour-primary-80);
--colour-primary-bg: var(--colour-primary-10); --colour-primary-bg: var(--colour-primary-10);
@@ -57,6 +68,8 @@
--colour-grey-bg: var(--colour-grey-30); --colour-grey-bg: var(--colour-grey-30);
--colour-error-fg: var(--colour-error-90); --colour-error-fg: var(--colour-error-90);
--colour-error-bg: var(--colour-error-40); --colour-error-bg: var(--colour-error-40);
--colour-warn-fg: var(--colour-warn-20);
--colour-warn-bg: var(--colour-warn-80);
--font-size-sm: 1rem; --font-size-sm: 1rem;
--font-size-base: 1.125rem; --font-size-base: 1.125rem;
@@ -492,3 +505,12 @@ dialog {
padding-block: var(--spacing--block-sm); padding-block: var(--spacing--block-sm);
padding-inline: var(--spacing-inline-sm); padding-inline: var(--spacing-inline-sm);
} }
.warn {
background: var(--colour-warn-bg);
border: 2px solid var(--colour-warn-fg);
color: var(--colour-warn-fg);
padding-block: var(--spacing--block-sm);
padding-inline: var(--spacing-inline-sm);
--colour-hyperlink: var(--colour-hyperlink-40);
}

View File

@@ -8,6 +8,15 @@ import Page from "../layouts/Page.astro";
<form class="contact-form"> <form class="contact-form">
<h1>Contact me</h1> <h1>Contact me</h1>
<p class="warn">
This contact form only accepts a very small number of submissions per day
to avoid spamming my inbox with bots. I have an idea for a workaround, but
in the meantime, please forgive me if the form refuses to accept your
submission. If you want to get in touch with me professionally, you can
message me on <a href="https://www.linkedin.com/in/joe-carstairs-0aa936277">LinkedIn</a>.
</p>
<p hidden class="error"/> <p hidden class="error"/>
<label for="name">Name</label> <label for="name">Name</label>
<input id="name" name="name" type="text" required> <input id="name" name="name" type="text" required>