MERMS/MermsWebsite2025
1
0
Fork 0
Code Issues Pull Requests Releases Activity

contact layout

Browse Source
This commit is contained in:
CHIEFSOFT\ameye
2025-12-25 11:33:13 -05:00
parent 46f38c9633
commit b0e9a477fe
1 changed files with 137 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/contacts.js
+75 -22
View File
@@ -3,6 +3,7 @@ import Layout from "../components/layout/Layout"
import Link from "next/link" import Link from "next/link"
import {Form, Formik} from 'formik'; import {Form, Formik} from 'formik';
import * as Yup from "yup"; import * as Yup from "yup";
export default function Home() { export default function Home() {
const validationSchema = Yup.object().shape({ const validationSchema = Yup.object().shape({
@@ -57,15 +58,25 @@ export default function Home() {
{/* Title */} {/* Title */}
<h2 className="s-52 w-700">Questions? Let's Talk</h2> <h2 className="s-52 w-700">Questions? Let's Talk</h2>
{/* Text */} {/* Text */}
<p className="p-lg">Want to learn more about MERMS, get a quote, or speak with an expert? <p className="p-lg">Want to learn more about MERMS, get a quote, or speak with
an expert?
Let us know what you are looking for and we’ll get back to you right away Let us know what you are looking for and we’ll get back to you right away
</p> </p>
</div> </div>
</div> </div>
</div> </div>
{/* CONTACT FORM */} {/* CONTACT FORM */}
<div className="row justify-content-center">
<div className="col-md-11 col-lg-10 col-xl-8"> <div>
<div className="row d-flex align-items-center">
{/* IMAGE BLOCK */}
<div className="col-md-6 col-lg-6">
<div className="img-block left-column wow fadeInRight">
<img className="img-fluid" src="/images/img-14.png" alt="content-image" />
</div>
</div>
<div className="col-md-6 col-lg-6">
<div className="form-holder"> <div className="form-holder">
<Formik <Formik
initialValues={initialValues} initialValues={initialValues}
@@ -77,32 +88,59 @@ export default function Home() {
<Form name="contactform" className="row contact-form"> <Form name="contactform" className="row contact-form">
{/* Form Select */} {/* Form Select */}
<div className="col-md-12 input-subject"> <div className="col-md-12 input-subject">
<p className="p-lg">This question is about:{(props.errors.subject && props.touched.subject) && <span style={{display: 'inline'}} className='text-danger'>{props.errors.subject}</span>}</p> <p className="p-lg">This question is
about:{(props.errors.subject && props.touched.subject) &&
<span style={{display: 'inline'}}
className='text-danger'>{props.errors.subject}</span>}</p>
<span>Choose a topic, so we know who to send your request to: </span> <span>Choose a topic, so we know who to send your request to: </span>
<select name='subject' onChange={props.handleChange} className="form-select subject" aria-label="Default select example"> <select name='subject' onChange={props.handleChange}
className="form-select subject"
aria-label="Default select example">
<option value=''>This question is about...</option> <option value=''>This question is about...</option>
<option value='registering/authorising'>Registering/Authorising</option> <option
<option value='using application'>Using Application</option> value='registering/authorising'>Registering/Authorising
<option value='troubleshooting'>Troubleshooting</option> </option>
<option value='backup/restore'>Backup/Restore</option> <option value='using application'>Using
Application
</option>
<option value='troubleshooting'>Troubleshooting
</option>
<option value='backup/restore'>Backup/Restore
</option>
<option value='others'>Other</option> <option value='others'>Other</option>
</select> </select>
</div> </div>
{/* Contact Form Input */} {/* Contact Form Input */}
<div className="col-md-12"> <div className="col-md-12">
<p className="p-lg">Your Name:{(props.errors.name && props.touched.name) && <span style={{display: 'inline'}} className='text-danger'>{props.errors.name}</span>}</p> <p className="p-lg">Your
Name:{(props.errors.name && props.touched.name) &&
<span style={{display: 'inline'}}
className='text-danger'>{props.errors.name}</span>}</p>
<span>Please enter your real name: </span> <span>Please enter your real name: </span>
<input type="text" onChange={props.handleChange} name="name" className="form-control name" placeholder="Your Name*" /> <input type="text" onChange={props.handleChange}
name="name" className="form-control name"
placeholder="Your Name*"/>
</div> </div>
<div className="col-md-12"> <div className="col-md-12">
<p className="p-lg">Your Email Address:{(props.errors.email && props.touched.email) && <span style={{display: 'inline'}} className='text-danger'>{props.errors.email}</span>}</p> <p className="p-lg">Your Email
Address:{(props.errors.email && props.touched.email) &&
<span style={{display: 'inline'}}
className='text-danger'>{props.errors.email}</span>}</p>
<span>Please carefully check your email address for accuracy</span> <span>Please carefully check your email address for accuracy</span>
<input type="text" onChange={props.handleChange} name="email" className="form-control email" placeholder="Email Address*" /> <input type="text" onChange={props.handleChange}
name="email" className="form-control email"
placeholder="Email Address*"/>
</div> </div>
<div className="col-md-12"> <div className="col-md-12">
<p className="p-lg">Explain your question in details:{(props.errors.message && props.touched.message) && <span style={{display: 'inline'}} className='text-danger'>{props.errors.message}</span>}</p> <p className="p-lg">Explain your question in
details:{(props.errors.message && props.touched.message) &&
<span style={{display: 'inline'}}
className='text-danger'>{props.errors.message}</span>}</p>
<span>Your OS version, MERMS version &amp; build, steps you did. Be VERY precise!</span> <span>Your OS version, MERMS version &amp; build, steps you did. Be VERY precise!</span>
<textarea onChange={props.handleChange} className="form-control message" name="message" rows={6} placeholder="I have a problem with..." /> <textarea onChange={props.handleChange}
className="form-control message"
name="message" rows={6}
placeholder="I have a problem with..."/>
</div> </div>
{/* Contact Form Button */} {/* Contact Form Button */}
<div className="d-flex justify-content-end mt-15 form-btn"> <div className="d-flex justify-content-end mt-15 form-btn">
@@ -115,10 +153,14 @@ export default function Home() {
</button> </button>
</div> </div>
<div className="contact-form-notice"> <div className="contact-form-notice">
<p className="p-sm">We are committed to your privacy. MERMS uses the information you <p className="p-sm">We are committed to your privacy.
provide us to contact you about our relevant content, products, and services. MERMS uses the information you
You may unsubscribe from these communications at any time. For more information, provide us to contact you about our relevant
check out our <Link href="/privacy">Privacy Policy</Link>. content, products, and services.
You may unsubscribe from these communications at any
time. For more information,
check out our <Link href="/privacy">Privacy
Policy</Link>.
</p> </p>
</div> </div>
{/* Contact Form Message */} {/* Contact Form Message */}
@@ -131,9 +173,20 @@ export default function Home() {
</Formik> </Formik>
</div> </div>
</div> </div>
</div> {/* END CONTACT FORM */} </div>
</div> {/* End container */} {/* End row */}
</section> {/* END CONTACTS-1 */} </div>
{/*<div className="row justify-content-center">*/}
{/* <div className="col-md-11 col-lg-10 col-xl-8">*/}
{/* </div>*/}
{/*</div> */}
</div>
{/* End container */}
</section>
{/* END CONTACTS-1 */}
{/* DIVIDER LINE */} {/* DIVIDER LINE */}
<hr className="divider"/> <hr className="divider"/>
{/* NEWSLETTER-1 {/* NEWSLETTER-1