Última modificação em 10 de setembro de 2020.
Bootstrap é a solução mais popular para projetar componentes de IU otimizados, intuitivos e prontos para dispositivos móveis. É fácil integrar a biblioteca Bootstrap para a interface do aplicativo.
Freqüentemente, muitos de meus leitores pedem um código de formulário de contato Bootstrap. Então, pensei em criar um exemplo básico para um formulário de contato PHP habilitado para Bootstrap.
O Bootstrap fornece recursos integrados para cuidar da capacidade de resposta da IU, validação de formulário e muito mais. Usei sua biblioteca de ícones SVG para exibir os campos do formulário de contato com ícones adequados.
Um formulário de contato Bootstrap parece enriquecido. A interface do usuário atrai as pessoas e permite que elas a utilizem com facilidade. Além disso, o esforço dos desenvolvedores é reduzido com o uso da estrutura Bootstrap.
Eu criei um formulário de contato responsivo e seguro e repleto de recursos-Iris . Este é um dos melhores e elegantes componentes de formulário de contato que você pode obter.
O que há dentro?
- Formulário de contato com vs sem Bootstrap
- Maioria dos os campos do formulário de contato
- Sobre este exemplo
- Estrutura de arquivo
- Layout de IU fino com o contato Bootstrap de
- Formulário de contato validação com JavaScript simples
- Processando dados do formulário de contato em código PHP
- IU do formulário de contato de bootstrap saída
Um formulário de contato coleta um tipo diferente de detalhes do usuário, como nome, mensagem e muito mais. Existem vários modelos populares para formulários de contato.
Criei vários exemplos de formulário de contato em PHP . E esses modelos de formulário usam meu próprio CSS personalizado.
Embora seja direto para ir com CSS personalizado, projetar com Bootstrap oferece uma oferta irrefutável.
O Bootstrap fornece estilos completos para criar vários tipos de layout de formulário. Inclui mais estilos de formulários específicos de elementos e atributos.
Com um formulário de contato Bootstrap, a capacidade de resposta e as compatibilidades entre navegadores são um negócio fácil.
Se você já usa o framework Bootstrap, então também seria natural não escolher a opção customizada de IU CSS.
Para um exemplo simples, para adicionar ícones para formar entradas sem Bootstrap, é necessário um monte de CSS e consultas de mídia. Mas, com o Bootstrap, ele tem um seletor de grupo de entrada para fazer isso.
No caso de você desejar renderizar um formulário de contato primitivo e fino, CSS personalizado é preferível.
A maioria dos formulários de contato contém os campos de nome, e-mail, assunto e mensagem. Algumas vezes, varia de acordo com a finalidade dos aplicativos.
Por exemplo, o administrador do site pode mesclar os feedbacks dos usuários e os pontos de entrada das consultas. Nesses casos, o formulário de contato pode ter um grupo de opção de rádio para escolher entre feedback e inquérito.
Às vezes, as pessoas podem coletar números de telefone com o código do país. Além disso, pode haver opções de caixa de seleção para receber o consentimento do GDPR de acordo com a legislação europeia.
De certa forma, os formulários de contato tornam-se complexos nos campos de posicionamento, dando fluidez e mais aspectos.
O Bootstrap suporta uma variedade de opções de layout para criar um formulário ainda mais complexo. Com base na complexidade do layout do formulário de contato, o Bootstrap é até confiável.
Sobre este exemplo
Este exemplo usa estilos de formulário reinicializados com classes para criar um formulário de contato Bootstrap. Isso torna este formulário de IU responsivo e consistente em todos os navegadores e janelas de visualização.
Inclui um formulário de contato padrão com controles de formulário empilhados verticalmente. Cada controle de formulário tem um ícone prefixado adequado para a entrada de contato. Baixei a biblioteca de ícones do Bootstrap SVG para ter esses ícones.
A validação do formulário com um JavaScript simples simplifica o esforço de carregar qualquer biblioteca externa.
Em PHP, ele lida com os dados postados para enviá-los por meio de um e-mail de contato. Além disso, ele armazena os dados em uma tabela de banco de dados, se houver. É opcional e pode ser desativado no código.
Este código usa uma simples função PHP mail () para enviar os e-mails. Em um exemplo anterior, adicionei como enviar e-mail usando o SMTP do Gmail. Substitua a função mail () simples pela que usa PhpMailer via SMTP do Gmail.
Estrutura do arquivo
O código do formulário de contato é um pequeno componente integrador de um aplicativo. Este exemplo contém um código mínimo de um formulário de contato Bootstrap.
O diretório do fornecedor inclui o CSS Bootstrap e a biblioteca de ícones.
O arquivo bootstrap-contact-form.php contém o modelo HTML do formulário de contato. A página de destino processa o formulário de contato incluindo este modelo.
Esta seção mostra o código HTML do formulário de contato do Bootstrap. Este HTML mostra os campos padrão do formulário de contato empilhados verticalmente.
Os estilos de grade do formulário Bootstrap e CSS fornecem opções para exibir um formulário horizontal.
No HTML abaixo, cada elemento do formulário está em um recipiente de grupo de formulários . Ele agrupa o rótulo do elemento do formulário, os controles do formulário, a validação e o texto de ajuda de maneira adequada.
O campo E-mail tem um texto de ajuda que exibe uma nota com espaçamento de texto sem áudio .
Os estilos específicos do grupo de entrada ajudam a exibir controles de formulário anexados a ícones. Esses ícones são da biblioteca de ícones SVG do Bootstrap.
bootstrap-contact-form.php
Formulário de contato de bootstrap Formulário de contato de bootstrap
O modelo HTML acima importa o CSS Bootstrap do local do fornecedor.
Depois de enviar os detalhes do contato, os usuários receberão uma mensagem de confirmação. A caixa de alerta de sucesso do bootstrap exibe uma resposta positiva no envio de e-mail bem-sucedido.
Todos os campos são obrigatórios neste exemplo de formulário de contato Bootstrap.
O arquivo js/validation.js contém o script de validação. No evento de carregamento da janela, este script configura o ouvinte do evento de envio para verificar a validade do formulário.
Assim que encontrar campos de formulário inválidos, impedirá o envio do formulário. Adicionado a isso, ele adicionará estilos de validação personalizados do Bootstrap para destacar os campos inválidos.
Ele adiciona a classe .was-validated ao elemento pai do formulário. Ele destaca os campos do formulário com relação às pseudoclasses : válido e :inválido .
Além do realce do campo inválido com borda vermelha, o script exibe uma mensagem de erro baseada em texto. O setValidationResponse () verifica os dados do formulário e insere a mensagem de erro no destino.
Esta função personalizada invoca markAsValid () e markAsInvalid () para mostrar as mensagens de erro. Essas funções definem a propriedade de exibição do elemento e o innerText.
js/validation.js
(function () { 'use estrito'; window.addEventListener ('load', function () { var form=document.getElementById ('frmContact'); form.addEventListener ('enviar', função (evento) { if (form.checkValidity ()===false) { event.preventDefault (); event.stopPropagation (); setValidationResponse (); } form.classList.add ('foi validado'); }, falso); }, falso);
}) (); function setValidationResponse () {
var emailRegex=/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9] {2,4}) + $/; var userName=document.getElementById ("userName"). value;
var userEmail=document.getElementById ("userEmail"). value;
var subject=document.getElementById ("subject"). value;
var content=document.getElementById ("mensagem"). value; if (userName=="") {
markAsInvalid ("userName","obrigatório");
} outro {
markAsValid ("userName");
} if (userEmail=="") {
markAsInvalid ("userEmail","obrigatório");
} else if (! emailRegex.test (userEmail)) {
markAsInvalid ("userEmail","invalid");
} outro {
markAsValid ("userEmail");
} if (assunto=="") {
markAsInvalid ("assunto","obrigatório");
} outro {
markAsValid ("assunto");
} if (content=="") {
markAsInvalid ("conteúdo","obrigatório");
} outro {
markAsValid ("conteúdo");
}
} function markAsValid (id) {
document.getElementById (id +"-info"). style.display="nenhum";
} function markAsInvalid (id, feedback) {
document.getElementById (id +"-info"). style.display="inline";
document.getElementById (id +"-info"). innerText=feedback;
}
Esta seção é algo comum em todos os meus exemplos de formulários de contato. Mas, isso é importante, pelo qual começamos.
Neste exemplo, ele tem suporte para armazenar os dados do formulário de contato em um banco de dados. Porém, é opcional e configurável na codificação.
O código PHP tem uma variável $ isDatabase que pode ter um booleano true para habilitar o banco de dados.
structure.sql
- -Banco de dados: `bootstrap_contact_form` - --------------------------------------------------------- - -Estrutura da tabela para a tabela `tbl_contact` - CRIAR TABELA `tbl_contact` ( `id` int (11) NÃO NULO, `user_name` varchar (255) NÃO NULO, `user_email` varchar (255) NÃO NULO, `assunto` varchar (255) NÃO NULO, `mensagem` varchar (255) NÃO NULO ) ENGINE=InnoDB DEFAULT CHARSET=latin1; - -Índices para tabelas despejadas - - -Índices para a tabela `tbl_contact` - ALTER TABLE `tbl_contact` ADICIONE CHAVE PRIMÁRIA (`id`); - -AUTO_INCREMENT para tabelas despejadas - - -AUTO_INCREMENT para a tabela `tbl_contact` - ALTER TABLE `tbl_contact` MODIFICAR `id` int (11) NÃO NULO AUTO_INCREMENT, AUTO_INCREMENT=1;
O código a seguir mostra a lógica de backend criada em PHP para lidar com os dados postados. Este código possui a função PHP mail () padrão para enviar os detalhes do contato.
index.php
insert ($ query, $ paramType, $ paramArray); } $ toEmail="[email protected]"; $ mailHeaders='De: [email protected]'."\ r \ n".'Responder a:'. $ name.'<'. $ email."> \ r \ n".'X-Mailer: PHP/'. phpversion (); $ mailHeaders="De:". $ name."<". $ email."> \ r \ n"; //se as linhas tiverem mais de 70 caracteres, devem ser quebradas $ message=wordwrap ($ message, 70,"\ r \ n"); //sua configuração de PHP deve ter configuração para enviar e-mail $ isValidMail=mail ($ toEmail, $ subject, $ message, $ mailHeaders); if ($ isValidMail) { $ displayMessage="Mensagem enviada. Obrigado."; } } require_once __DIR__."/bootstrap-contact-form.php";
Depois de definir $ isDatabase como true, configure os detalhes do banco de dados nesta classe para conectar o banco de dados para a ação do formulário de contato.
lib/DataSource.php
conn=$ this-> getConnection (); } /** * Se o objeto de conexão for necessário, use este método e obtenha acesso a ele. * Caso contrário, use os métodos abaixo para inserir/atualizar/etc. * * @return \ mysqli */ public function getConnection () { $ conn=new \ mysqli (self:: HOST, self:: USERNAME, self:: PASSWORD, self:: DATABASENAME); if (mysqli_connect_errno ()) { trigger_error ("Problema ao conectar ao banco de dados."); } $ conn-> set_charset ("utf8"); return $ conn; } /** * Para obter resultados de banco de dados * * @param string $ query * @param string $ paramType * @param array $ paramArray * @return array */ seleção de função pública ($ query, $ paramType="", $ paramArray=array ()) { $ stmt=$ this-> conn-> prepare ($ query); if (! empty ($ paramType) &&! empty ($ paramArray)) { $ this-> bindQueryParams ($ stmt, $ paramType, $ paramArray); } $ stmt-> execute (); $ resultado=$ stmt-> get_result (); if ($ result-> num_rows> 0) { while ($ row=$ result-> fetch_assoc ()) { $ conjunto de resultados []=$ linha; } } if (! vazio ($ conjunto de resultados)) { return $ resultset; } } /** * Inserir * * @param string $ query * @param string $ paramType * @param array $ paramArray * @return int */ inserção de função pública ($ query, $ paramType, $ paramArray) { $ stmt=$ this-> conn-> prepare ($ query); $ this-> bindQueryParams ($ stmt, $ paramType, $ paramArray); $ stmt-> execute (); $ insertId=$ stmt-> insert_id; return $ insertId; } /** * Para executar a consulta * * @param string $ query * @param string $ paramType * @param array $ paramArray */ public function execute ($ query, $ paramType="", $ paramArray=array ()) { $ stmt=$ this-> conn-> prepare ($ query); if (! empty ($ paramType) &&! empty ($ paramArray)) { $ this-> bindQueryParams ($ stmt, $ paramType, $ paramArray); } $ stmt-> execute (); } /** * 1. * Prepara ligação de parâmetro * 2. Vincular prameters à instrução sql * * @param string $ stmt * @param string $ paramType * @param array $ paramArray */ public function bindQueryParams ($ stmt, $ paramType, $ paramArray=array ()) { $ paramValueReference []=& $ paramType; para ($ i=0; $ i conn-> prepare ($ query); if (! empty ($ paramType) &&! empty ($ paramArray)) { $ this-> bindQueryParams ($ stmt, $ paramType, $ paramArray); } $ stmt-> execute (); $ stmt-> store_result (); $ recordCount=$ stmt-> num_rows; return $ recordCount; }
}
Esta captura de tela mostra a saída de exemplo do formulário de contato do Bootstrap. Ele exibe os campos válidos em verde e os campos inválidos em vermelho.
Esta indicação notificará o usuário ao clicar no botão de envio “Enviar e-mail”.
No envio de e-mail bem-sucedido, uma resposta bem-sucedida será enviada ao usuário conforme mostrado abaixo.
