Formulário para contato
  1. Contato por e-mail
    1. TAGS utilizadas
    2. Criação do formulário
    3. Aparência
    4. Obrigatoriedade de preenchimento
    5. Validação do conteúdo
    6. Formulário completo
    7. Envio

Contato por e-mail

Todo o formulário deverá ser criado no editor de conteúdo do gerenciador.

Importante campos mailtoDS, mailTO e mailSubject deverão ser criados em cada formulário de e-mail. Podem ficar com value="" mas DEVEM existir.
 
<INPUT name=mailToDs type=hidden value="Destinatario"> 
<INPUT name=mailTo type=hidden value="email@provedor"> 
<INPUT name=mailSubject type=hidden value="Assunto">

Utilizar tags HTML para definição de rótulos e campos

TAGS utilizadas

  • <label>
    • for
  • <input>
    • type
      • text
      • radio
  • <select>
    • <option>
      • value
    • name
    • title
    • alt
  • <fieldset>
    • <legend>

Criação do formulário

Campo texto de preenchimento livre com, no máximo, 40 caracteres. tag "<label>" com propriedade "for=" tag "<input>" com atributos "name", "id" e "title" 

  <label for=nome>Nome</label>
  <input name=Nome id=nome title=Nome maxlength=40>

Campo texto de preenchimento OBRIGATÓRIO e, no máximo, 40 caracteres.

  • acrescentamos tag no <label> para identificar a obrigatoriedade
  • a propriedade "alt" será utilizada como mensagem de obrigatoriedade de preenchimento 
  <label for=nome>Nome<FONT style="COLOR: red">*</FONT></label>
  <input name=Nome id=nome title=Nome alt="O nome COMPLETO deve ser informado" maxlength=40>

Aparência

utilize propriedade style 
  <label ... style="COLOR: red" ...></label>
  <INPUT ... style="WIDTH: 25%; HEIGHT: 22px" ...>

Obrigatoriedade de preenchimento

  • utilize a propriedade alt com mensagem para falha no preenchimento. 
  <input ... alt="O nome COMPLETO deve ser informado" ...>

Validação do conteúdo

  • utilize a propriedade title. Implementamos suporte para "data". 
  <input ... title="data" ...>

Formulário completo

<INPUT name=mailToDs type=hidden value="Destinatario"> 
<INPUT name=mailTo type=hidden value="email@provedor"> 
<INPUT name=mailSubject type=hidden value="Assunto">
<FIELDSET>
  <LEGEND>Dados Pessoais</LEGEND>
  <LABEL style="WIDTH: 15%" for=nome>Nome<FONT style="COLOR: red">*</FONT></LABEL>
  <INPUT style="WIDTH: 81%; HEIGHT: 22px" id=nome title=Nome alt="O nome COMPLETO deve ser informado" size=36 name=Nome>
  <BR>
  <LABEL style="WIDTH: 15%" for=email>E-mail<FONT style="COLOR: red">*</FONT></LABEL>
  <INPUT style="WIDTH: 81%; HEIGHT: 22px" id=email title=email alt="importante informar e-mail para contato" name=e-Mail>
  <BR>
  <LABEL style="WIDTH: 15%" for=telefone>Telefone</LABEL>
  <INPUT style="WIDTH: 33%; HEIGHT: 22px" id=telefone title=Telefone name=Telefone>
  <LABEL style="WIDTH: 15%" for=celular>Celular</LABEL>
  <INPUT style="WIDTH: 33%; HEIGHT: 22px" id=celular title=Celular name=Celular>
  <BR>
  <LABEL style="WIDTH: 15%" for=rg>Identidade</LABEL>
  <INPUT style="WIDTH: 33%; HEIGHT: 22px" id=rg title=identidade name=Identidade>
  <LABEL style="WIDTH: 25%" for=dataNascimento>Data de Nascimento</LABEL>
  <INPUT style="WIDTH: 23%; HEIGHT: 22px" id=dataNascimento title=data name="Data de nascimento">
  <BR>
  <LABEL style="WIDTH: 15%" for=sexo>Sexo</LABEL>
  <INPUT style="WIDTH: 2.66%; HEIGHT: 20px" id=sexo title=Sexo value=Masculino type=radio name=Sexo>
  <LABEL> Masculino</LABEL>
  <INPUT style="WIDTH: 3.56%; HEIGHT: 20px" id=sexo title=Sexo value=Feminino type=radio name=Sexo>
  <LABEL>Feminino</LABEL>
  <INPUT style="WIDTH: 3.56%; HEIGHT: 20px" id=sexo title=Sexo value="Não informado" CHECKED type=radio name=Sexo>
  <LABEL>Não informado</LABEL>
</FIELDSET> 
<FIELDSET>
  <LEGEND>Dados Médicos</LEGEND>
  <LABEL style="WIDTH: 25%" for=tipoSanguineo>Tipo Sanguíneo</LABEL>
  <INPUT style="WIDTH: 10%; HEIGHT: 22px" id=tipoSanguineo title=Tipo name="Tipo sanguíneo">
  <LABEL style="WIDTH: 51%" for=alergia>Possui alergia a algum medicamento?</LABEL>
  <SELECT style="WIDTH: 10%" name=Alergia alt="possui alergia">
    <OPTION value=Sim>Sim</OPTION>
    <OPTION selected value=Não>Não</OPTION>
  </SELECT>
  <BR>
  <LABEL style="WIDTH: 15%" for=medicamento>Qual?</LABEL>
  <INPUT style="WIDTH: 81%; HEIGHT: 22px" id=medicamento title=Qual? name=Medicamento>
</FIELDSET> 
<FIELDSET>
  <LEGEND>Endereço</LEGEND>
  <LABEL style="WIDTH: 15%" for=endereco>Endereço</LABEL>
  <INPUT style="WIDTH: 81%; HEIGHT: 22px" id=endereco title=Endereço size=53 name=Endereço>
  <BR>
  <LABEL style="WIDTH: 15%" for=complemento>Complemento</LABEL>
  <INPUT style="WIDTH: 33%; HEIGHT: 22px" id=complemento title=Complemento name=Complemento>
  <LABEL style="WIDTH: 15%" for=bairro>Bairro</LABEL>
  <INPUT style="WIDTH: 33%; HEIGHT: 22px" id=bairro title=Bairro name=Bairro>
  <BR>
  <LABEL style="WIDTH: 15%" for=cep>Cep</LABEL>
  <INPUT style="WIDTH: 15%; HEIGHT: 22px" id=cep title=Cep name=cep>
  <LABEL style="WIDTH: 10%" for=cidade>Cidade</LABEL>
  <INPUT style="WIDTH: 36%; HEIGHT: 22px" id=cidade title=Cidade name=Cidade>
  <LABEL style="WIDTH: 10%" for=estado>Estado</LABEL>
  <INPUT style="WIDTH: 10%; HEIGHT: 22px" id=estado title=Estado name=Estado>
</FIELDSET>

Dependendo do CSS aplicado, o resultado será muito parecido com a imagem:

Envio