Initial
This commit is contained in:
Christian Anetzberger
281
pages/kontakt.jsx
Normal file
281
pages/kontakt.jsx
Normal file
@@ -0,0 +1,281 @@
|
||||
import React from "react";
|
||||
import { Formik } from "formik";
|
||||
import axios from "axios";
|
||||
import Head from "next/head";
|
||||
|
||||
import {
|
||||
TextInput,
|
||||
TextareaInput,
|
||||
SelectInput,
|
||||
} from "../components/forms/formfields.jsx";
|
||||
|
||||
import { ContactSchema } from "../components/forms/schemas.jsx";
|
||||
|
||||
export default class Kontakt extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
res: null,
|
||||
status: null,
|
||||
};
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<meta
|
||||
name="description"
|
||||
content="Sie haben Fragen? Treten Sie einfach mit uns in Kontakt."
|
||||
/>
|
||||
<meta name="keywords" content="Prothmann, Kontakt, Kontaktformular" />
|
||||
<title>Kontakt - Prothmann GmbH</title>
|
||||
</Head>
|
||||
|
||||
<div className="container-fluid products-container navbar-spacing">
|
||||
<div className="row align-items-center min-height-100">
|
||||
<div
|
||||
className={`align-self-stretchd-flex flex-column justify-content-center col-lg-6 p-0 p-5`}
|
||||
>
|
||||
<h1 className="mainheading">Kontakt</h1>
|
||||
<div className="description">
|
||||
<p>
|
||||
Nutzen Sie einfach das Kontaktformular auf dieser Seite oder
|
||||
eine der untern angegebenen Kontaktmöglichkeiten.
|
||||
<br />
|
||||
Telefonisch erreichen Sie uns Montag - Freitag von 9:00 Uhr
|
||||
bis 16:00 Uhr.
|
||||
<br />
|
||||
<br />
|
||||
E-Mail:{" "}
|
||||
<a href="mailto:info@prothmann.com">info@prothmann.com</a>
|
||||
<br />
|
||||
Telefon: <a href="tel:+49814259951">+49 (0) 8142 59951</a>
|
||||
<br />
|
||||
Fax: <a href="fax:+49814259953">+49 (0) 8142 59953</a>
|
||||
<br />
|
||||
<br />
|
||||
Anschrift:
|
||||
<br />
|
||||
Industriestraße 6<br />
|
||||
82194 Gröbenzell (bei München)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`col-lg-6 pl-0 align-self-center p-5 mb-5 h-100 col-lg-6`}
|
||||
>
|
||||
<Formik
|
||||
validationSchema={ContactSchema}
|
||||
initialValues={{
|
||||
firma: "",
|
||||
anrede: "",
|
||||
titel: "",
|
||||
vorname: "",
|
||||
nachname: "",
|
||||
email: "",
|
||||
telefon: "",
|
||||
betreff: "",
|
||||
nachricht: "",
|
||||
}}
|
||||
onSubmit={async (values) => {
|
||||
console.log(values);
|
||||
const data = values;
|
||||
try {
|
||||
const res = await axios({
|
||||
method: "post",
|
||||
url: "/api/contactsend",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
data,
|
||||
});
|
||||
this.setState({
|
||||
status: "Ihre Nachricht wurde erfolgreich versendet",
|
||||
res: res.status,
|
||||
});
|
||||
} catch (error) {
|
||||
this.setState({
|
||||
status:
|
||||
"Beim versenden ist ein Fehler aufgetreten! Bitte versuchen Sie es in einigen Minuten noch einmal oder schicken Sie und direkt eine e-Mail.",
|
||||
res: res.status,
|
||||
});
|
||||
}
|
||||
console.log("State: ", this.state);
|
||||
}}
|
||||
>
|
||||
{({
|
||||
values,
|
||||
errors,
|
||||
touched,
|
||||
handleChange,
|
||||
handleBlur,
|
||||
handleSubmit,
|
||||
isSubmitting,
|
||||
}) => (
|
||||
<form onSubmit={handleSubmit} className="description">
|
||||
<div className="row g-2 mb-5">
|
||||
<div className="col">
|
||||
<TextInput
|
||||
isSubmitting={isSubmitting}
|
||||
rescode={this.state.res}
|
||||
error={errors.firma}
|
||||
touched={touched.firma}
|
||||
placeholder={"Musterfirma"}
|
||||
onChange={handleChange("firma")}
|
||||
onBlur={handleBlur("firma")}
|
||||
value={values.firma}
|
||||
label="Firma (optional)"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row g-2 mb-3">
|
||||
<div className="col">
|
||||
<SelectInput
|
||||
isSubmitting={isSubmitting}
|
||||
rescode={this.state.res}
|
||||
error={errors.anrede}
|
||||
touched={touched.anrede}
|
||||
placeholder={"Anrede"}
|
||||
onChange={handleChange("anrede")}
|
||||
onBlur={handleBlur("anrede")}
|
||||
value={values.anrede}
|
||||
label="Anrede"
|
||||
options={["Herr", "Frau", "Divers"]}
|
||||
/>
|
||||
</div>
|
||||
<div className="col">
|
||||
<SelectInput
|
||||
isSubmitting={isSubmitting}
|
||||
rescode={this.state.res}
|
||||
error={errors.titel}
|
||||
touched={touched.titel}
|
||||
placeholder={"Titel"}
|
||||
onChange={handleChange("titel")}
|
||||
onBlur={handleBlur("titel")}
|
||||
value={values.titel}
|
||||
label="Titel"
|
||||
options={["Dr.", "Prof.", "Dipl."]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row g-2 mb-5">
|
||||
<div className="col">
|
||||
<TextInput
|
||||
isSubmitting={isSubmitting}
|
||||
rescode={this.state.res}
|
||||
error={errors.vorname}
|
||||
touched={touched.vorname}
|
||||
placeholder={"Max"}
|
||||
onChange={handleChange("vorname")}
|
||||
onBlur={handleBlur("vorname")}
|
||||
value={values.vorname}
|
||||
label="Vorname (optional)"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
<div className="col">
|
||||
<TextInput
|
||||
isSubmitting={isSubmitting}
|
||||
rescode={this.state.res}
|
||||
error={errors.nachname}
|
||||
touched={touched.nachname}
|
||||
placeholder={"Max"}
|
||||
onChange={handleChange("nachname")}
|
||||
onBlur={handleBlur("nachname")}
|
||||
value={values.nachname}
|
||||
label="Nachname"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row g-2 mb-5">
|
||||
<div className="col">
|
||||
<TextInput
|
||||
isSubmitting={isSubmitting}
|
||||
rescode={this.state.res}
|
||||
error={errors.email}
|
||||
touched={touched.email}
|
||||
placeholder={"max@mustermann.de"}
|
||||
onChange={handleChange("email")}
|
||||
onBlur={handleBlur("email")}
|
||||
value={values.email}
|
||||
label="eMail"
|
||||
type="email"
|
||||
/>
|
||||
</div>
|
||||
<div className="col">
|
||||
<TextInput
|
||||
isSubmitting={isSubmitting}
|
||||
rescode={this.state.res}
|
||||
error={errors.telefon}
|
||||
touched={touched.telefon}
|
||||
placeholder={"max@mustermann.de"}
|
||||
onChange={handleChange("telefon")}
|
||||
onBlur={handleBlur("telefon")}
|
||||
value={values.telefon}
|
||||
label="Telefon (optional)"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="row g-2 mb-3">
|
||||
<div className="col-12">
|
||||
<TextInput
|
||||
isSubmitting={isSubmitting}
|
||||
rescode={this.state.res}
|
||||
error={errors.betreff}
|
||||
touched={touched.betreff}
|
||||
placeholder={"Betreff"}
|
||||
onChange={handleChange("betreff")}
|
||||
onBlur={handleBlur("betreff")}
|
||||
value={values.betreff}
|
||||
label="Betreff"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<TextareaInput
|
||||
isSubmitting={isSubmitting}
|
||||
rescode={this.state.res}
|
||||
error={errors.nachricht}
|
||||
touched={touched.nachricht}
|
||||
placeholder={"Nachricht"}
|
||||
onChange={handleChange("nachricht")}
|
||||
onBlur={handleBlur("nachricht")}
|
||||
value={values.nachricht}
|
||||
label="Nachricht"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row g-2 mb-3">
|
||||
<div className="col">
|
||||
<p>{this.state.status}</p>
|
||||
{!isSubmitting && this.state.res != 200 && (
|
||||
<button className="btn btn-dark" type="submit">
|
||||
Abschicken
|
||||
</button>
|
||||
)}
|
||||
{isSubmitting && (
|
||||
<div className="spinner-border" role="status">
|
||||
<span className="visually-hidden">Sende...</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</Formik>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user