Skip to content

Commit

Permalink
updating forms
Browse files Browse the repository at this point in the history
  • Loading branch information
@jhoude5
jhoude5 committed Sep 27, 2024
1 parent 3c0894d commit f0f5ae1
Show file tree
Hide file tree
Showing 8 changed files with 75 additions and 47 deletions.
2 changes: 2 additions & 0 deletions gatsby-node.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ exports.createPages = async ({ graphql, actions }) => {
createRedirect({
fromPath: `/`,
toPath: `/en`,
isPermanent: true,
redirectInBrowser: true,
});
const { createPage } = actions;
const result = await graphql(
Expand Down
19 changes: 11 additions & 8 deletions src/pages/adoption/adoption-application.en.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ const AdoptionApplication = () => {
.then(() => {
document.querySelector('.success').innerText =
"Thank you for reaching out to us, we'd get back to you shortly.";
document.getElementById('success').scrollIntoView();
// Clear form fields
setName('');
setEmail('');
Expand Down Expand Up @@ -81,19 +82,19 @@ const AdoptionApplication = () => {
<div className="row clearfix">

<div className="form-group">
<label for="email" className='col-3 col-sm-2 col-md-5'>Email <span className='required'>*</span></label>
<input id="email" className='col-9 col-sm-10 col-md-11' type="email"
<label for="email" >Email <span className='required'>*</span>
<input id="email" type="email"
name="email" value={email} required
onChange={({ target }) => setEmail(target.value)} placeholder="Your Email" />
onChange={({ target }) => setEmail(target.value)} placeholder="Your Email" /></label>
</div>
<div className=" form-group">
<label for="name" className='col-3 col-sm-2 col-md-5'>Name <span className='required'>*</span></label>
<label for="name">Name <span className='required'>*</span>
<input id="name" className='col-9 col-sm-10 col-md-11' onChange={({ target }) => setName(target.value)}
type="text" required name="name" value={name} minLength="3" placeholder="Your Answer" />
type="text" required name="name" value={name} minLength="3" placeholder="Your Answer" /></label>
</div>
<div className=" form-group">
<label for="phone" className='col-3 col-sm-2 col-md-5'>Contact Phone Number <span className='required'>*</span></label>
<input id="phone" className='col-9 col-sm-10 col-md-11' onChange={({ target }) => setPhone(target.value)}
<label for="phone" >Contact Phone Number <span className='required'>*</span></label>
<input id="phone" onChange={({ target }) => setPhone(target.value)}
type="text" required name="phone" value={phone} minLength="3" placeholder="Your Answer" />
</div>
<div className=" form-group">
Expand Down Expand Up @@ -204,7 +205,7 @@ const AdoptionApplication = () => {
</div>
<div className=" form-group">
<div className='radio-option'>Should your application be approved and an agreement be completed, an adoption fee will be charged. The adoption fee for a kitten is $350, the adoption fee for an adult cat is $200, and the adoption fee for a senior cat or a humanitarian adoption varies (please contact us for details regarding specific cats.) The adoption fee covers the spay or neuter operation, flea treatments, deworming and vaccinations (as well as booster shots when applicable). <span className='required'>*</span></div>
<label class="radio-label-cost" for="cost">I understand<input id="cost" onChange={({ target }) => setCost(target.value)}
<label className="radio-label-cost" for="cost">I understand<input id="cost" onChange={({ target }) => setCost(target.value)}
type="radio" required name="cost" value={cost} minLength="3" placeholder="Your Answer" /></label>
</div>
<div className="form-group">
Expand All @@ -219,6 +220,8 @@ const AdoptionApplication = () => {
</div>
</div>
</form>
<div className="success" id="success"></div>
<div className="error"></div>
</div>
<section className='volunteers'>
<Volunteer />
Expand Down
5 changes: 4 additions & 1 deletion src/pages/adoption/adoption-application.fr.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ const AdoptionApplication = () => {
.then(() => {
document.querySelector('.success').innerText =
"Thank you for reaching out to us, we'd get back to you shortly.";
document.getElementById('success').scrollIntoView();
// Clear form fields
setName('');
setEmail('');
Expand All @@ -67,7 +68,7 @@ const AdoptionApplication = () => {
setAccessories('');
setCost('');
})
.catch((error) => document.querySelector('.error').innerText = 'Something went wrong, pls try again.');
.catch((error) => document.querySelector('.error').innerText = 'Merci de nous avoir contactés, nous vous répondrons sous peu.');
};
return (
<main>
Expand Down Expand Up @@ -221,6 +222,8 @@ const AdoptionApplication = () => {
</div>
</div>
</form>
<div className="success" id="success"></div>
<div className="error"></div>
</div>
<section className='volunteers'>
<Volunteer />
Expand Down
21 changes: 12 additions & 9 deletions src/pages/contact.en.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ const Contact = () => {
})
.then(() => {
document.querySelector('.success').innerText =
"Thank you for reaching out to us, we'd get back to you shortly.";
"Thank you for reaching out to us, we will get back to you shortly.";
document.getElementById('success').scrollIntoView();
// Clear form fields
setName('');
setEmail('');
Expand All @@ -40,29 +41,31 @@ const Contact = () => {
<input type="hidden" name="bot-field" />
<div className="row clearfix">
<div className=" form-group">
<label for="name">Name <span className='required'>*</span></label>
<label for="name">Name <span className='required'>*</span>
<input id="name" onChange={({ target }) => setName(target.value)}
type="text" required name="name" value={name} minLength="3" placeholder="Your Full Name" />
type="text" name="name" value={name} minLength="3" placeholder="Your Full Name" /></label>
</div>

<div className="form-group">
<label for="email">Email <span className='required'>*</span></label>
<label for="email">Email <span className='required'>*</span>
<input id="email" className='col-md-11' type="email"
name="email" value={email} required
onChange={({ target }) => setEmail(target.value)} placeholder="Your Email" />
name="email" value={email}
onChange={({ target }) => setEmail(target.value)} placeholder="Your Email" /></label>
</div>

<div className="form-group">
<label for="message">Message <span className='required'>*</span></label>
<textarea id="message" name="message" placeholder="Message" required onChange={({ target }) => setMessage(target.value)}
value={message}></textarea>
<label for="message">Message <span className='required'>*</span>
<textarea id="message" name="message" placeholder="Message" onChange={({ target }) => setMessage(target.value)}
value={message}></textarea></label>
</div>

<div className="form-group form-button">
<button className="theme-btn btn-style-one" type="submit">SUBMIT</button>
</div>
</div>
</form>
<div className="success" id="success"></div>
<div className="error"></div>
</div>
</div>
<section className='adopt-cta'>
Expand Down
17 changes: 10 additions & 7 deletions src/pages/contact.fr.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ const Contact = () => {
})
.then(() => {
document.querySelector('.success').innerText =
"Thank you for reaching out to us, we'd get back to you shortly.";
"Merci de nous avoir contactés, nous vous répondrons sous peu.";
document.getElementById('success').scrollIntoView();
// Clear form fields
setName('');
setEmail('');
Expand All @@ -41,29 +42,31 @@ const Contact = () => {
<input type="hidden" name="bot-field" />
<div className="row clearfix">
<div className=" form-group">
<label className='col-3 col-sm-2 col-md-1'>Nom <span className='required'>*</span></label>
<label className='col-3 col-sm-2 col-md-1'>Nom <span className='required'>*</span>
<input className='col-9 col-sm-10 col-md-11' onChange={({ target }) => setName(target.value)}
type="text" required name="name" value={name} minLength="3" placeholder="Votre nom complet" />
type="text" required name="name" value={name} minLength="3" placeholder="Votre nom complet" /></label>
</div>

<div className="form-group">
<label className='col-3 col-sm-2 col-md-1'>Email <span className='required'>*</span></label>
<label className='col-3 col-sm-2 col-md-1'>Email <span className='required'>*</span>
<input className='col-9 col-sm-10 col-md-11' type="email"
name="email" value={email} required
onChange={({ target }) => setEmail(target.value)} placeholder="Votre Email" />
onChange={({ target }) => setEmail(target.value)} placeholder="Votre Email" /></label>
</div>

<div className="form-group">
<label className='col-3 col-sm-2 col-md-1'>Message <span className='required'>*</span></label>
<label className='col-3 col-sm-2 col-md-1'>Message <span className='required'>*</span>
<textarea className='col-9 col-sm-10 col-md-11' name="message" placeholder="Message" required onChange={({ target }) => setMessage(target.value)}
value={message}></textarea>
value={message}></textarea></label>
</div>

<div className="form-group form-button">
<button className="theme-btn btn-style-one" type="submit">SOUMETTRE</button>
</div>
</div>
</form>
<div className="success" id="success"></div>
<div className="error"></div>
</div>
</div>
</div>
Expand Down
23 changes: 13 additions & 10 deletions src/pages/fosters/foster-application.en.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ const FosterApplication = () => {
.then(() => {
document.querySelector('.success').innerText =
"Thank you for reaching out to us, we'd get back to you shortly.";
document.getElementById('success').scrollIntoView();
// Clear form fields
setName('');
setEmail('');
Expand Down Expand Up @@ -199,13 +200,13 @@ const FosterApplication = () => {
<div className=" form-group">
<div className='checkbox-option'>Do you currently share a home with individuals under the age of 18?<span className='required'>*</span></div>
<label className='checkbox-label' for="childrenunderfive">Yes, I share a home with individual(s) under 5 years of age<input id="childrenunderfive" className='col-9 col-sm-10 col-md-11' onChange={({ target }) => setChildren(target.value)}
type="checkbox" required name="children" value={children} minLength="3" /></label>
type="checkbox" name="children" value={children} minLength="3" /></label>
<label className='checkbox-label' for="childrenbetweenfiveandten">Yes, I share a home with indivudual(s) between the ages of 5 and 10<input id="childrenbetweenfiveandten" className='col-9 col-sm-10 col-md-11' onChange={({ target }) => setChildren(target.value)}
type="checkbox" required name="children" value={children} minLength="3" /></label>
type="checkbox" name="children" value={children} minLength="3" /></label>
<label className='checkbox-label' for="childrenbetweentenandeighteen">Yes, I share a home with individual(s) between the ages of 10 and 18<input id="childrenbetweentenandeighteen" className='col-9 col-sm-10 col-md-11' onChange={({ target }) => setChildren(target.value)}
type="checkbox" required name="children" value={children} minLength="3" /></label>
type="checkbox" name="children" value={children} minLength="3" /></label>
<label className='checkbox-label' for="childrenno">No<input id="childrenno" className='col-9 col-sm-10 col-md-11' onChange={({ target }) => setChildren(target.value)}
type="checkbox" required name="children" value={children} minLength="3" /></label>
type="checkbox" name="children" value={children} minLength="3" /></label>
</div>
<div className=" form-group">
<div className='radio-option'>Do you currently share a home with any other adults?<span className='required'>*</span></div>
Expand Down Expand Up @@ -243,17 +244,17 @@ const FosterApplication = () => {
<div className=" form-group">
<div className='checkbox-option'>Do you want to foster adult cats, senior cats, mother cats with kittens, kittens no longer with their mother, or cat(s) requiring special care (socialising or medical care)?<span className='required'>*</span></div>
<label className='checkbox-label' for="typeadult">Adult cats<input id="typeadult" className='col-9 col-sm-10 col-md-11' onChange={({ target }) => setType(target.value)}
type="checkbox" required name="type" value={type} minLength="3" /></label>
type="checkbox" name="type" value={type} minLength="3" /></label>
<label className='checkbox-label' for="typesenior">Senior cats<input id="typesenior" className='col-9 col-sm-10 col-md-11' onChange={({ target }) => setType(target.value)}
type="checkbox" required name="type" value={type} minLength="3" /></label>
type="checkbox" name="type" value={type} minLength="3" /></label>
<label className='checkbox-label' for="typemotherkitten">Mother cat with their kitten(s)<input id="typemotherkitten" className='col-9 col-sm-10 col-md-11' onChange={({ target }) => setType(target.value)}
type="checkbox" required name="type" value={type} minLength="3" /></label>
type="checkbox" name="type" value={type} minLength="3" /></label>
<label className='checkbox-label' for="kitten">Kitten(s) no longer with their mother<input id="kitten" className='col-9 col-sm-10 col-md-11' onChange={({ target }) => setType(target.value)}
type="checkbox" required name="type" value={type} minLength="3" /></label>
type="checkbox" name="type" value={type} minLength="3" /></label>
<label className='checkbox-label' for="catspecialcare">Cat(s) requiring special care<input id="catspecialcare" className='col-9 col-sm-10 col-md-11' onChange={({ target }) => setType(target.value)}
type="checkbox" required name="type" value={type} minLength="3" /></label>
type="checkbox" name="type" value={type} minLength="3" /></label>
<label className='checkbox-label' for="any">Any of the above<input id="any" className='col-9 col-sm-10 col-md-11' onChange={({ target }) => setType(target.value)}
type="checkbox" required name="type" value={type} minLength="3" /></label>
type="checkbox" name="type" value={type} minLength="3" /></label>
</div>
<div className=" form-group">
<div className='radio-option'>Do you want to foster animals indefinitely, during "kitten season" or only until you find an animal to adopt?<span className='required'>*</span></div>
Expand Down Expand Up @@ -360,6 +361,8 @@ const FosterApplication = () => {
</div>
</div>
</form>
<div className="success" id='success'></div>
<div className="error"></div>
</div>
<section className='volunteers'>
<Volunteer />
Expand Down
Loading

0 comments on commit f0f5ae1

Please sign in to comment.