Form Contato

Sobre

O componente de form contato é uma aplicação para inserir um formulário de contato utilizado normalmente em páginas institucionais de atendimento contendo campos de nome, e-mail, telefone, assunto e mensagem.

Dependências

• prod

  • Descrição: Suporta somente a estrutura de dados recebida da API da Wap.store.

  • Tipo: Object

Instalação

• Instale o app através do seu terminal

npm install @wapstore/form-contato

• Valide se seu arquivo package.json possui a dependência

"dependencies": {
  "@wapstore/form-contato": "^1.0.0"
}

Agora a loja está apta para o uso da aplicação.

Uso

O componente de form contato pode ser inserido em qualquer lugar da pasta "components". Neste arquivo você pode inserir todas as props e slots que o componente aceita, além de seus estilos.

Exemplo

-Este é um exemplo da aplicação de um arquivo padrão para um Formulário de contato:

<template>
  <section>
    <form action="" class="formDefault" @submit.prevent="submitForm()">
      <div class="formDefault-flex">
        <input v-model="nome" type="text" :class="{alert: nomeError}" placeholder="Seu nome">
        <input v-model="email" type="email" :class="{alert: emailError}" placeholder="Seu melhor e-mail">
      </div>
      <div class="formDefault-flex">
        <input
          v-model="contato"
          oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
          type="tel"
          :class="{alert: contatoError}"
          placeholder="Telefone"
          maxlength="12"
        >
        <input v-model="assunto" type="text" placeholder="Assunto" :class="{alert: assuntoError}">
      </div>
      <textarea v-model="mensagem" :class="{alert: mensagemError}" placeholder="Mensagem" />
      <div class="formDefault-btnSubmit-flex">
        <button type="submit" :class="{btnSuccess: btnSuccess, btnError: btnError}" class="formDefault-btnSubmit">
          {{ msgBtn }}
        </button>
      </div>
    </form>
  </section>
</template>

<script>
  export default {
    filters: {
      maskTel (tel) {
        const formatedTel = tel.replace(/\(?(\d{2})\)?\s?(\d{5})-?(\d{4})/, '($1) $2-$3');
        return formatedTel;
      }
    },
    data () {
      return {
        nomeError: false,
        emailError: false,
        contatoError: false,
        mensagemError: false,
        assuntoError: false,
        btnError: '',
        assunto: '',
        nome: '',
        email: '',
        contato: '',
        mensagem: '',
        msgBtn: 'Enviar',
        btnSuccess: false
      };
    },
    watch: {
      assunto (val) {
        if (this.assunto !== null) {
          this.assuntoError = false;
          this.resetBtn(val);
        }
      },
      nome (val) {
        if (this.nome !== null) {
          this.nomeError = false;
          this.resetBtn(val);
        }
      },
      email (val) {
        if (this.email !== null) {
          this.emailError = false;
          this.resetBtn(val);
        }
      },
      contato (val) {
        this.contato = this.$options.filters.maskTel(val);
        if (this.contato !== null || this.contato.length === 12) {
          this.contatoError = false;
          this.resetBtn(val);
        }
      },
      mensagem (val) {
        if (this.mensagem !== null) {
          this.mensagemError = false;
          this.resetBtn(val);
        }
      }
    },
    methods: {
      submitForm () {
        if (this.validateInput()) {
          this.$axios.request({
            method: 'post',
            url: '/v2/front/form/contact',
            data: {
              hashEmail: 'contato/formulario',
              nome: this.nome,
              email: this.email,
              contato: this.contato.replace(/[^a-zA-Z0-9s]/g, ''),
              mensagem: this.mensagem
            }
          }).then(response => {
            this.successRequest(response.data.sucesso);
          }).catch(() => {
            this.errorRequest();
          });
        }
      },
      resetBtn (val) {
        if (val !== '') {
          this.btnError = false;
          this.msgBtn   = 'Enviar';
        }
      },
      error (itemValue) {
        this[itemValue] = true;
        this.btnError   = true;
        this.msgBtn     = 'Preencha os campos!';
      },
      validateInput () {
        let success = true;

        if (this.nome.length === 0) {
          success = false;
          this.error('nomeError');
        }
        if (this.assunto.length === 0) {
          success = false;
          this.error('assuntoError');
        }
        if (this.email.length === 0 && this.email.search(/@.*\.[A-Za-z]/g) === -1) {
          success = false;
          this.error('emailError');
        }
        if (this.contato.length === 0 || this.contato.length < 12) {
          success = false;
          this.error('contatoError');
        }
        if (this.mensagem.length === 0) {
          success = false;
          this.error('mensagemError');
        }

        return success;
      },
      successRequest (success) {
        this.btnSuccess = success;
        if (success) {
          this.nome            = '';
          this.email           = '';
          this.contato         = '';
          this.mensagem        = '';
          this.assunto         = '';
          this.msgBtn          = 'Enviado com sucesso!';
        }
        setTimeout(() => {
          this.msgBtn     = 'Enviar';
          this.btnSuccess = false;
          this.btnError   = false;
        }, 3000);
      },
      errorRequest () {
        this.btnError = true;
        this.msgBtn   = 'Houve um erro ao enviar.';
      }
    }
  };
</script>
<style>
  ...
</style>

Estilização

Para a estilização, basta utilizar estilos sem escopos dentro do componente onde for inserido, utilizando sempre de um ID ou classe específica para a chamada do componente, para que em outras chamadas o estilo não influencie. Caso o estilo seja para várias chamadas do componente é recomendado a inserção dos estilos em um arquivos CSS separado.