1.0
This commit is contained in:
@ -2,9 +2,13 @@ import { createSignal, type Component } from "solid-js";
|
||||
import { Show } from "solid-js/web";
|
||||
|
||||
const ContactForm: Component = () => {
|
||||
const [firstName, setFirstName] = createSignal("");
|
||||
const [lastName, setLastName] = createSignal("");
|
||||
const [email, setEmail] = createSignal("");
|
||||
const [company, setCompany] = createSignal("");
|
||||
const [service, setService] = createSignal("");
|
||||
const [budget, setBudget] = createSignal("");
|
||||
const [message, setMessage] = createSignal("");
|
||||
const [name, setName] = createSignal("");
|
||||
const [status, setStatus] = createSignal<
|
||||
"idle" | "sending" | "success" | "error"
|
||||
>("idle");
|
||||
@ -20,8 +24,15 @@ const ContactForm: Component = () => {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
subject: `New Contact Form Message from ${name()}`,
|
||||
message: `From: ${name()}\nEmail: ${email()}\n\nMessage:\n${message()}`,
|
||||
subject: `New Contact Form Message from ${firstName()} ${lastName()}`,
|
||||
message: `From: ${firstName()} ${lastName()}
|
||||
Email: ${email()}
|
||||
Company: ${company() || "Not specified"}
|
||||
Service Needed: ${service() || "Not specified"}
|
||||
Budget: ${budget() || "Not specified"}
|
||||
|
||||
Project Details:
|
||||
${message()}`,
|
||||
}),
|
||||
});
|
||||
|
||||
@ -32,8 +43,12 @@ const ContactForm: Component = () => {
|
||||
}
|
||||
|
||||
setStatus("success");
|
||||
setName("");
|
||||
setFirstName("");
|
||||
setLastName("");
|
||||
setEmail("");
|
||||
setCompany("");
|
||||
setService("");
|
||||
setBudget("");
|
||||
setMessage("");
|
||||
setTimeout(() => setStatus("idle"), 3000);
|
||||
} catch (error) {
|
||||
@ -47,47 +62,115 @@ const ContactForm: Component = () => {
|
||||
|
||||
return (
|
||||
<form class="space-y-6" onSubmit={handleSubmit}>
|
||||
<div class="form-control w-full">
|
||||
<label for="name" class="label">
|
||||
<span class="label-text text-neutral-content">Name</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
required
|
||||
class="input input-bordered w-full"
|
||||
placeholder="Your Name"
|
||||
value={name()}
|
||||
onInput={(e) => setName(e.currentTarget.value)}
|
||||
disabled={status() === "sending"}
|
||||
/>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-semibold">First Name *</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="firstName"
|
||||
class="input input-bordered w-full"
|
||||
required
|
||||
value={firstName()}
|
||||
onInput={(e) => setFirstName(e.currentTarget.value)}
|
||||
disabled={status() === "sending"}
|
||||
/>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-semibold">Last Name *</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="lastName"
|
||||
class="input input-bordered w-full"
|
||||
required
|
||||
value={lastName()}
|
||||
onInput={(e) => setLastName(e.currentTarget.value)}
|
||||
disabled={status() === "sending"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-control w-full">
|
||||
<label for="email" class="label">
|
||||
<span class="label-text text-neutral-content">Email</span>
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-semibold">Email Address *</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
required
|
||||
name="email"
|
||||
class="input input-bordered w-full"
|
||||
placeholder="your@email.com"
|
||||
required
|
||||
value={email()}
|
||||
onInput={(e) => setEmail(e.currentTarget.value)}
|
||||
disabled={status() === "sending"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control w-full">
|
||||
<label for="message" class="label">
|
||||
<span class="label-text text-neutral-content">Message</span>
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-semibold">Company</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="company"
|
||||
class="input input-bordered w-full"
|
||||
value={company()}
|
||||
onInput={(e) => setCompany(e.currentTarget.value)}
|
||||
disabled={status() === "sending"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-semibold">Service Needed</span>
|
||||
</label>
|
||||
<select
|
||||
name="service"
|
||||
class="select select-bordered w-full"
|
||||
value={service()}
|
||||
onChange={(e) => setService(e.currentTarget.value)}
|
||||
disabled={status() === "sending"}
|
||||
>
|
||||
<option value="">Select a service...</option>
|
||||
<option value="web-development">Web Development</option>
|
||||
<option value="mobile-development">Mobile App Development</option>
|
||||
<option value="devops">DevOps</option>
|
||||
<option value="it-support">IT Support Processes</option>
|
||||
<option value="consultation">General Consultation</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-semibold">Project Budget</span>
|
||||
</label>
|
||||
<select
|
||||
name="budget"
|
||||
class="select select-bordered w-full"
|
||||
value={budget()}
|
||||
onChange={(e) => setBudget(e.currentTarget.value)}
|
||||
disabled={status() === "sending"}
|
||||
>
|
||||
<option value="">Select budget range...</option>
|
||||
<option value="under-5k">Under $5,000</option>
|
||||
<option value="5k-15k">$5,000 - $15,000</option>
|
||||
<option value="15k-50k">$15,000 - $50,000</option>
|
||||
<option value="50k-plus">$50,000+</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="project-details">
|
||||
<span class="label-text font-semibold">Project Details *</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
id="project-details"
|
||||
name="message"
|
||||
class="textarea textarea-bordered h-32 w-full resize-none"
|
||||
placeholder="Tell us about your project requirements, timeline, and any specific needs..."
|
||||
required
|
||||
class="textarea textarea-bordered h-32"
|
||||
placeholder="How can we help you?"
|
||||
value={message()}
|
||||
onInput={(e) => setMessage(e.currentTarget.value)}
|
||||
disabled={status() === "sending"}
|
||||
@ -134,10 +217,10 @@ const ContactForm: Component = () => {
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<div class="card-actions justify-end">
|
||||
<div class="form-control pt-4">
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary"
|
||||
class="btn btn-primary btn-lg w-full"
|
||||
disabled={status() === "sending"}
|
||||
>
|
||||
{status() === "sending" ? (
|
||||
|
||||
Reference in New Issue
Block a user