282 lines
11 KiB
JavaScript
282 lines
11 KiB
JavaScript
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>
|
|
</>
|
|
);
|
|
}
|
|
}
|