REACTJS - Aplicação de Página �nica - #9 Contato

Faremos agora a construção e desenvolvimento completo do componente Contact.js. Esse componente ficará responsável pelo formulário de contato.

Formulário de Contato com React JS

Vamos desenvolver primeiramente o formulário do contato:

import React from 'react';
import InputMask from 'react-input-mask';

export default class Contact extends React.Component {

    render(){
        return(
            <div className="formulario">
                <h1>Fale Conosco</h1>
                <form name="form1" id="form1" method="post" action="/controllers/controllerForm.php">
                    <input type="text" name="nome" id="nome" placeholder="Nome:"/>
                    <InputMask type="tel" name="telefone" id="telefone" placeholder="Telefone:" mask="(99) 99999-9999"  />
                    <input type="email" name="email" id="email" placeholder="Email:"/>
                    <textarea name="mensagem" id="mensagem" placeholder="Mensagem:"></textarea>
                    <input type="submit" value="Enviar"/>
                </form>
            </div>
        );
    }
}

Repare que no componente acima nós importamos o módulo externo InputMask. Esse módulo ficará responsável por fazer uma máscara no campo telefone, de forma que já fique padronizado o dd e o telefone no padrão (xx) xxxxx-xxxx.

Dentro do diretório controllers você vai inserir o arquivo da sua linguagem de programação do backend (python, java, php...). No caso vamos utilizar o php. Vou salvar o arquivo controllerForm.php e nessa aula vou apenas inserir um debug pra verificar se os dados post estão chegando corretamente:

<?php
var_dump($_POST);

Vamos estilizar o formulário:

.formulario{display:flex; flex-direction: column;}
    .formulario h1{color: #38777E; text-align: center; font-size: 30px;}
    .formulario input{margin: 6px 0; height: 40px; color:#333;}
    .formulario input[type='text'], .formulario input[type='tel'], .formulario input[type='email']{width: 100%; padding: 0 5px;}
    .formulario input[type='submit']{background: #38777E;cursor: pointer;color:#fff;font-weight: bold;border:none;border-radius: 5px;}
    .formulario textarea{width: 100%;height: 150px;color:#333;padding: 5px;}

@media screen and (max-width: 480px) {
    .formulario{width: 90%;margin: 20px 5%;}
        .formulario input[type='submit']{width: 100%;}
}

@media screen and (min-width: 481px) and (max-width: 768px) {
    .formulario{width: 80%;margin: 20px 10%;}
        .formulario input[type='submit']{width: 50%;}
}

@media screen and (min-width: 769px) and (max-width: 1199px) {
    .formulario{width: 50%;margin: 20px 25%;}
        .formulario input[type='submit']{width: 40%;}
}

@media screen and (min-width: 1200px) {
    .formulario{width: 50%;margin: 20px 25%;}
        .formulario input[type='submit']{width: 30%;}
}

Com o formulário pronto, para testar o envio dos dados precisamos construir nossa build. Para isso, no nosso terminal vamos apertar Ctrl+C pra fechar o servidor local e rodar o comando:

npm run build

Se você reparar no seu projeto agora, verá que foi criada a pasta build com os arquivos já compilados para produção. Esses arquivos serão colocados na pasta do servidor da sua linguagem backend, no PHP utilizando o WampServer eu utilizo a pasta www.

No servidor de php já se pode repara que os dados estão chegando corretamente via POST.

Na próxima aula faremos o envio dos emails.