NEW: add validation for hubspot form

src/components/LandingForm.js

@@ -29,7 +29,11 @@ const LandingForm = class extends React.Component {
     e.preventDefault();
 
     const { company_size, company, industry, name, email, jobtitle, tosAccepted } = this.state;
-    this.setState({ loading: true });
+    if ([company_size, company, industry, name, email, jobtitle].some(e => !e)) {
+      return this.setState({error: this.props.form.error});
+    }
+
+    this.setState({ loading: true, error: null });
     try {
       const res = await axios.post(formUrl, {
         fields: [
@@ -68,11 +72,16 @@ const LandingForm = class extends React.Component {
   }
 
   toggleStep2(e) {
-    this.setState(state => ({...state, isStep2Visible: !state.isStep2Visible}));
+    const { company_size, company, industry } = this.state;
+    if ([company_size, company, industry].some(e => !e)) {
+      return this.setState({error: this.props.form.error});
+    }
+
+    this.setState(state => ({...state, isStep2Visible: !state.isStep2Visible, error: null}));
   }
 
   render() {
-    const { isStep2Visible, inlineMessage, company_size, company, industry, name, email, jobtitle, tosAccepted } = this.state;
+    const { isStep2Visible, inlineMessage, company_size, company, industry, name, error, email, jobtitle, tosAccepted } = this.state;
     const { form } = this.props;
     const step1 = (
       <div className="column is-6">
@@ -125,6 +134,7 @@ const LandingForm = class extends React.Component {
           </div>
           <div className="form--container">
             <input
+              required
               value={company}
               onChange={this.setGenericValue.bind(this, 'company')}
               className="input is-rounded is-large"
@@ -148,6 +158,7 @@ const LandingForm = class extends React.Component {
               </select>
             </div>
           </div>
+          {error && <p style={{marginBottom: '0.5rem'}}>{error}</p>}
           <button
             onClick={this.toggleStep2.bind(this)}
             style={{padding: '.5rem 4rem'}}
@@ -169,6 +180,7 @@ const LandingForm = class extends React.Component {
         <form className="form">
           <div className="form--container">
             <input
+              required
               value={name}
               onChange={this.setGenericValue.bind(this, 'name')}
               className="input is-rounded is-large"
@@ -178,6 +190,7 @@ const LandingForm = class extends React.Component {
           </div>
           <div className="form--container">
             <input
+              required
               value={email}
               onChange={this.setGenericValue.bind(this, 'email')}
               className="input is-rounded is-large"
@@ -236,7 +249,7 @@ const LandingForm = class extends React.Component {
               {form.tos3}
             </p>
           </div>
-
+          {error && <p style={{marginBottom: '1rem'}}>{error}</p>}
           <button
             onClick={this.postFormData.bind(this)}
             style={{
@@ -272,6 +285,7 @@ const LandingForm = class extends React.Component {
 
 LandingForm.propTypes = {
   form: PropTypes.shape({
+    error: PropTypes.string,
     title: PropTypes.string,
     subtitle: PropTypes.string,
     businessname: PropTypes.string,

src/pages/index.md

@@ -47,6 +47,7 @@ intro:
         in modo da essere il piu rilevanti possibili per il
         consumatore finale
 form:
+  error: Completa tutti i campi
   title: I numeri del tuo business?
   subtitle: Scopri quanto Local Impact può essere rilevante per la tua attività.
   businessname: Nome azienda
@@ -59,7 +60,7 @@ form:
   role: Posizione aziendale
   tos: Accetto di ricevere comunicazioni da Omniaweb Italia
   tos2: Dichiaro di aver letto
-  tosLink: l'informativa privacy 
+  tosLink: l'informativa privacy
   tos2PostLink: e di prestare il mio consenso al trattamento dei dati per i fini indicati.
   tos3: Facendo clic sul pulsante qui sotto, si consente a Omniaweb Italia di archiviare e utilizzare le informazioni per fornire il contenuto richiesto.
   ctaStep2: Contattaci

src/templates/index-page.js

@@ -198,6 +198,7 @@ export const pageQuery = graphql`
           description
         }
         form {
+          error
           title
           subtitle
           businessname