beau/my-portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Replace contact form with alert on submission

Browse Source
This commit is contained in:
Beau Findlay
2024-03-14 17:47:54 +00:00
parent 82fa6a156c
commit 9fc5f0c28a
2 changed files with 66 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
BeauFindlay/src/BeauFindlay.Client/Pages/Contact.razor
View File

@@ -13,48 +13,50 @@
</p> </p>
</div> </div>
<div class="mx-auto max-w-xl pt-8 pb-4"> @if (!isSubmitted)
<EditForm Model="contactInput" OnValidSubmit="HandleValidSubmit">
<DataAnnotationsValidator/>
<div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
<div class="sm:col-span-2">
<label for="name" class="block font-semibold leading-6">Name</label>
<div class="mt-2.5">
<InputText id="name" @bind-Value="contactInput.Name" class="block w-full text-lg border-0 px-3.5 py-2 bg-black shadow ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600" autocomplete="given-name"/>
<ValidationMessage For="() => contactInput.Name" class="text-red-600"/>
</div>
</div>
<div class="sm:col-span-2">
<label for="email" class="block font-semibold leading-6">Email</label>
<div class="mt-2.5">
<InputText id="email" @bind-Value="contactInput.Email" class="block w-full text-lg border-0 px-3.5 py-2 bg-black shadow ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600" autocomplete="email"/>
<ValidationMessage For="() => contactInput.Email" class="text-red-600"/>
</div>
</div>
<div class="sm:col-span-2">
<label for="message" class="block font-semibold leading-6">Message</label>
<div class="mt-2.5">
<InputTextArea id="message" @bind-Value="contactInput.Message" rows="4" class="block w-full text-lg border-0 px-3.5 py-2 bg-black shadow ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600"/>
<ValidationMessage For="() => contactInput.Message" class="text-red-600"/>
</div>
</div>
</div>
<div class="mt-4">
<small>This site is protected by reCAPTCHA and the Google <Anchor Href="https://policies.google.com/privacy" Target="_blank">Privacy Policy</Anchor> and <Anchor Href="https://policies.google.com/terms" Target="_blank">Terms of Service</Anchor> apply.</small>
</div>
<div class="mt-4 flex items-center justify-center">
<Button Type="submit" IsLoading="@isSubmitting">
<i class="fa-solid fa-paper-plane"></i> Send
</Button>
</div>
</EditForm>
</div>
@if (isSubmitted)
{ {
<div class="m-auto max-w-xl"> <div class="mx-auto max-w-xl pt-8 pb-4">
<EditForm Model="contactInput" OnValidSubmit="HandleValidSubmit">
<DataAnnotationsValidator/>
<div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
<div class="sm:col-span-2">
<label for="name" class="block font-semibold leading-6">Name</label>
<div class="mt-2.5">
<InputText id="name" @bind-Value="contactInput.Name" class="block w-full text-lg border-0 px-3.5 py-2 bg-black shadow ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600" autocomplete="given-name"/>
<ValidationMessage For="() => contactInput.Name" class="text-red-600"/>
</div>
</div>
<div class="sm:col-span-2">
<label for="email" class="block font-semibold leading-6">Email</label>
<div class="mt-2.5">
<InputText id="email" @bind-Value="contactInput.Email" class="block w-full text-lg border-0 px-3.5 py-2 bg-black shadow ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600" autocomplete="email"/>
<ValidationMessage For="() => contactInput.Email" class="text-red-600"/>
</div>
</div>
<div class="sm:col-span-2">
<label for="message" class="block font-semibold leading-6">Message</label>
<div class="mt-2.5">
<InputTextArea id="message" @bind-Value="contactInput.Message" rows="4" class="block w-full text-lg border-0 px-3.5 py-2 bg-black shadow ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600"/>
<ValidationMessage For="() => contactInput.Message" class="text-red-600"/>
</div>
</div>
</div>
<div class="mt-4">
<small>This site is protected by reCAPTCHA and the Google <Anchor Href="https://policies.google.com/privacy" Target="_blank">Privacy Policy</Anchor> and <Anchor Href="https://policies.google.com/terms" Target="_blank">Terms of Service</Anchor> apply.</small>
</div>
<div class="mt-4 flex items-center justify-center">
<Button Type="submit" IsLoading="@isSubmitting">
<i class="fa-solid fa-paper-plane"></i> Send
</Button>
</div>
</EditForm>
</div>
}
else
{
<div class="m-auto max-w-xl py-14">
@if (sendEmailSuccess) @if (sendEmailSuccess)
{ {
<Alert Type="AlertType.Success" Title="Email sent successfully"> <Alert Type="AlertType.Success" Title="Email sent successfully">

20
BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.min.css vendored
View File

@@ -803,6 +803,26 @@ video {
padding-bottom: 2rem; padding-bottom: 2rem;
} }
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.py-14 {
padding-top: 3.5rem;
padding-bottom: 3.5rem;
}
.pb-2 { .pb-2 {
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
} }