fixed css do formulário

src/Components/FormInput.js

@@ -67,8 +67,12 @@ export default function FormInput(props) {
           type = {props.inputType}
           value = {props.value}
           onChange = {props.handleChange}
+          helperText = {props.help}
+          rows = {props.rows}
+          rowsMax = {props.rowsMax}
           InputProps={{className: classes.input}}
           style={{width:"100%"}}
+          multiline = {props.multi}
         />
 
     </FormContainerStyled>

src/Pages/Contact.js

@@ -19,6 +19,8 @@ along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>
 import React, { Component, useState, useEffect } from 'react';
 import styled from 'styled-components';
 import Banner1 from '../img/banner-sobre.jpg';
+import { TextField } from '@material-ui/core';
+import FormInput from "../Components/FormInput.js"
 
 const Seção1 =  styled.div `
   width: 100%;
@@ -147,6 +149,42 @@ const Seção3 = styled.div `
 
 
 class Contact extends Component {
+
+  constructor (props) {
+      super(props);
+
+      this.state = {
+          nome: "",
+          email: "",
+          mensagem: ""
+      };
+      this.handleChange = this.handleChange.bind(this);
+      this.onSubmit = this.onSubmit.bind(this);
+  };
+
+  handleChange = e => {
+      this.setState({[e.target.name]: e.target.value})
+  };
+
+  onSubmit = (e) => {
+      //on submit we should prevent the page from refreshing
+      e.preventDefault(); //though this is arguable
+
+      //pass user info to Store.js and clear all text fields
+
+      console.log(this.state);
+
+
+      this.setState({
+          nome: "",
+          email: "",
+          mensagem: ""
+      })
+
+
+  }
+
+
   render() {
     return(
       <>
@@ -160,35 +198,33 @@ class Contact extends Component {
 
           <Formulário>
             <h2>Entre em contato para enviar dúvidas,<br/>sugestões ou críticas</h2>
-            <form>
-              <div className="inputBlock">
-                <label htmlFor="nome">Nome *</label>
-                <input
-                 required
-                 name="nome"
-                 id="nome"
-
+            <form onSubmit={this.onSubmit}>
+              <FormInput
+                inputType={"text"}
+                name={"nome"}
+                value={this.state.nome}
+                placeholder={"Nome *"}
+                handleChange={e => this.handleChange(e)}
               />
-              </div>
-              <div className="inputBlock">
-                <label htmlFor="email">E-mail *</label>
-                <input
-                 required
-                 name="email"
-                 id="email"
-
+              <FormInput
+                inputType={"text"}
+                name={"email"}
+                value={this.state.email}
+                placeholder={"E-mail *"}
+                handleChange={e => this.handleChange(e)}
               />
-              </div>
-              <div className="inputBlock Message">
-                <label htmlFor="mensagem">Mensagem *</label>
-                <input
-                 required
-                 nome="mensagem"
-                 id="mensagem"
-
+              <FormInput
+                inputType={"text"}
+                name={"mensagem"}
+                value={this.state.mensagem}
+                placeholder={"Mensagem *"}
+                multi = {true}
+                rows = "3"
+                rowsMax = "5"
+                help="Escreva sua mensagem no campo acima."
+                handleChange={e => this.handleChange(e)}
               />
-              </div>
-              <button type="submit">Enviar Mensagem</button>
+              <button onClick={e => this.onSubmit(e)} >Enviar Mensagem</button>
             </form>
 
           </Formulário>