reverting to the old contacts template

kalwalt · Nov 30, 2020 · 269efe7 · 269efe7
1 parent 63f86ed
commit 269efe7
Show file tree

Hide file tree

Showing 3 changed files with 134 additions and 9 deletions.
diff --git a/src/data/messages/en.js b/src/data/messages/en.js
@@ -44,8 +44,8 @@ module.exports = {
   'contact': 'Contacts',
   'contact.infos': 'Contact informations',
   'contact.fill-the-form': 'Fill the form to send a message',
-  'contact.firstName': 'Name',
-  'contact.lastName': 'Surname',
+  'contact.name': 'Name',
+  'contact.surname': 'Surname',
   'contact.email': 'Email',
   'contact.subject': 'Subject',
   'contact.gender.male': 'Male',

diff --git a/src/data/messages/it.js b/src/data/messages/it.js
@@ -44,8 +44,8 @@ module.exports = {
   'contact': 'Contatti',
   'contact.infos': 'Informazioni di contatto',
   'contact.fill-the-form': 'Riempi la scheda per inviare un messaggio',
-  'contact.firstName': 'Nome',
-  'contact.lastName': 'Cognome',
+  'contact.name': 'Nome',
+  'contact.surname': 'Cognome',
   'contact.email': 'Email',
   'contact.subject': 'Soggetto',
   'contact.gender.male': 'Maschio',

diff --git a/src/templates/contacts.js b/src/templates/contacts.js
@@ -1,15 +1,15 @@
 import React from "react"
 import * as PropTypes from "prop-types"
 import { graphql } from 'gatsby'
+import { navigate } from "gatsby-link";
 import Layout from "../components/Layout"
 import SEO from '../components/SEO/SEO'
 import Content, { HTMLContent } from "../components/Content"
 import ContactDetails from "../components/ContactDetails"
 import OsmMap from '../components/OsmMap'
 import FollowUs from '../components/FollowUs'
-import ContactForm from '../components/ContactForm/ContactForm'
-import { getCurrentLangKey } from 'ptz-i18n'
-import { FormattedMessage } from 'react-intl'
+import { getCurrentLangKey } from 'ptz-i18n';
+import { FormattedMessage } from 'react-intl';
 
 
 function encode(data) {
@@ -48,7 +48,108 @@ const ContactPageTemplate = ({
       />
     <div className="box">
     <h4 className="subtitle"><FormattedMessage id="contact.fill-the-form"/></h4>
-      <ContactForm action={action}/>
+      <form
+        name="contact"
+        method="post"
+        action={action}
+        data-netlify="true"
+        data-netlify-honeypot="bot-field"
+        onSubmit={handleSubmit}
+      >
+        {/* The `form-name` hidden field is required to support form submissions without JavaScript */}
+        <input type="hidden" name="form-name" value="contact" />
+        <div hidden>
+          <label>
+            Don’t fill this out:{" "}
+            <input name="bot-field" onChange={handleChange} />
+          </label>
+        </div>
+        <div className="field">
+          <label className="label" htmlFor="name" ><FormattedMessage id="contact.name"/></label>
+          <div className="control">
+            <input className="input" type="text" name="name" onChange={handleChange} id="name" required={true} />
+          </div>
+        </div>
+        <div className="field">
+          <label className="label" htmlFor="surname" ><FormattedMessage id="contact.surname"/></label>
+          <div className="control">
+            <input className="input" type="text" name="surname" onChange={handleChange} id="surname" required={true} />
+          </div>
+        </div>
+        <div className="field">
+          <label className="label" htmlFor="email"><FormattedMessage id="contact.email"/></label>
+            <div className="control">
+              <input className="input" type="email" name="email" onChange={handleChange} id="email" required={true} />
+            </div>
+          </div>
+          <div className="field">
+           <label className="label" htmlFor="subject"><FormattedMessage id="contact.subject"/></label>
+             <div className="control">
+               <input className="input" type="subject" name="subject" onChange={handleChange} id="subject" required={true} />
+            </div>
+        </div>
+        <div className="field">
+          <div className="control">
+          <label className="radio menu-names">
+            <input
+              type="radio"
+              name="gender-male"
+              value="male"
+              onChange={handleChange}
+              defaultChecked
+            />
+            <span><FormattedMessage id="contact.gender.male"/></span>
+          </label>
+          <label className="radio">
+            <input
+              type="radio"
+              name="gender-female"
+              value="female"
+              onChange={handleChange}
+            />
+            <span><FormattedMessage id="contact.gender.female"/></span>
+          </label>
+        </div>
+        </div>
+        <div className="field">
+        <label className="label">
+        <p className="content has-text-weight-semibold"><FormattedMessage id='contact.enquiry'/></p>
+            <div className="select">
+            <select
+              className="content"
+              name="type-enquiry"
+              defaultValue="Type of Enquiry"
+              onChange={handleChange}
+              required
+            >
+              <option name="options" disabled hidden>
+                Choose
+              </option>
+              <FormattedMessage id='contact.enquiry.a' key={'op' + '-' + 'a'}>
+                {(message) => <option value='a'>{message}</option>}
+              </FormattedMessage>
+              <FormattedMessage id='contact.enquiry.b' key={'op' + '-' + 'b'}>
+                {(message) => <option value='b'>{message}</option>}
+              </FormattedMessage>
+              <FormattedMessage id='contact.enquiry.c' key={'op' + '-' + 'c'}>
+                {(message) => <option value='c'>{message}</option>}
+              </FormattedMessage>
+            </select>
+            </div>
+          </label>
+        </div>
+        <div className="field">
+          <label className="label" htmlFor="message"><FormattedMessage id="contact.message"/></label>
+          <div className="control">
+            <textarea className="textarea" name="message" onChange={handleChange} id="message" required={true} />
+          </div>
+        </div>
+        <div className="field">
+        <div className="control">
+          <button className="button is-link" type="submit"><FormattedMessage id="contact.send"/></button>
+        </div>
+        </div>
+      </form>
       </div>
       </div>
       </div>
@@ -63,7 +164,30 @@ ContactPageTemplate.propTypes = {
 }
 
 class ContactPage extends React.Component {
-    render() {
+  constructor(props) {
+    super(props);
+    this.state = { isValidated: false };
+  };
+
+  handleChange = e => {
+    this.setState({ [e.target.name]: e.target.value });
+  };
+
+  handleSubmit = e => {
+    e.preventDefault();
+    const form = e.target;
+    fetch("/?no-cache=1", {
+      method: "POST",
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      body: encode({
+        "form-name": form.getAttribute("name"),
+        ...this.state
+      })
+    })
+      .then(() => navigate(form.getAttribute("action")))
+      .catch(error => alert(error));
+  };
+  render() {
     let dataMarkdown = [];
     let data;
     if (this.props.data !== null) {
@@ -104,6 +228,7 @@ class ContactPage extends React.Component {
                 email={email}
                 title={dataMarkdown.frontmatter.title}
                 content={dataMarkdown.html}
+                onSubmit={this.handleSubmit}
                 action={action}
                  />
             </div>