Formulário de feedback personalizável: como criar online? Como fazer um belo formulário de feedback pop -up html e php com um telefone e enviando um pedido de e -mail?

Instruções para criar um formulário de feedback no HTML e CSS, bem como uma coleção de formulários prontos e manuais para sua conexão e configuração.

Hoje, qualquer pessoa que nem tenha habilidades de programação pode facilmente criar seu próprio site, baixando um modelo pronto para uso da rede e instalando -o no mecanismo usado.

No entanto, nem todo modelo pronto para atender aos requisitos do usuário. Muitos deles são representados em uma forma de "queijo" e não têm seções e funções tão importantes como, por exemplo, um formulário de feedback.

Este bloco de site é extremamente importante para os proprietários de lojas on -line e grandes portais de informações. Em nosso artigo, você encontrará informações sobre como criar um formulário de feedback de forma independente, onde baixar um modelo final e como instalá -lo em seu site.

Figura 1. O que é um formulário de feedback e por que é tão necessário?

O que é um formulário de feedback e por que é tão necessário?

• Uma das funções mais importantes de qualquer site decente é o formulário de feedback. Serve para interação entre o visitante e a administração de recursos. Portanto, com sua ajuda, você pode escrever um apelo ao suporte técnico ou enviar os dados necessários para as administrações. Por exemplo, detalhes de pagamento em lojas on -line ou o nome das mercadorias solicitadas. É altamente recomendável ter esse formulário em seu portal, pois o contato constante com seus visitantes e clientes é a chave para seu desenvolvimento bem -sucedido.

O formulário de feedback é uma página ou bloco separado (departamento), consistindo em vários campos de entrada do texto e no botão "Enviar". Como regra, o formulário padrão possui os seguintes campos:

• Nome completo
• E-mail (endereço de e-mail)
• Número do telefone celular
• Os endereços do seu site
• Campo para inserir mensagem de texto

No entanto, os campos podem ser tanto quanto você quiser, e eles podem ser assinados como você quiser. Tudo depende de suas necessidades e imaginação.

Figura 2. O que é um formulário de feedback e por que é tão necessário?

• Além disso, alguns proprietários adicionam cartões do Google ou Yandex ao formulário de feedback, formas de inserção no site usando redes sociais "vkontakte", "Facebook", "Google+" e assim por diante. Mas falaremos sobre a criação da forma mais simples de feedback, para a qual você precisará de conhecimento exclusivamente do básico da linguagem de marcação Html e nada mais.

Como criar o formulário de feedback mais simples para o site em HTML e PHP?

Para não transformar o artigo em um livro chato, procederemos do fato de você já estar familiarizado com o básico da linguagem de marcação Html E você tem uma idéia geral de como isso funciona. Se você não possui essas habilidades, antes de assumir a criação de um formulário, é fortemente recomendável apertar um pouco seu conhecimento em um recurso gratuito htmlbook.ru. Caso contrário, você pode não apenas abandonar esse empreendimento, mas também estraga o código do seu site.

Para recriar a forma de trabalho de feedback, você precisa de três elementos importantes, um dos quais é responsável pela marcação e estrutura da forma ( Html), o segundo para seu design externo ( CSS) e o terceiro para processamento e transmissão de dados ( Php). Vamos começar em ordem:

Escrevendo um código HTML para feedback

• Passo 1. Para indicar forma em Html Tag é usada ‹Formulário› ‹/forma›. Dentro, será definido tamanhos, estilos e outras propriedades vitais da forma. Ao gravar a própria tag, ele precisa definir uma classe para indicar, o que ajudará ainda mais a instalar para o formulário CSS Estilos.

Figura 1. Como criar o formulário de feedback mais simples para o site em HTML e PHP?

• Passo 2. Além disso, para criar o primeiro campo de nossa forma dentro da tag \u003cForma\u003e Você precisa escrever uma tag de bloco ‹P›que é responsável por criar uma nova linha.

Figura 2. Como criar o formulário de feedback mais simples para o site em HTML e PHP?

• etapa 3. Tag interna ‹P› A partir da nova linha, inserimos a seguinte tag: ‹Label para \u003d" Nome "›Nome \u003c/Rótulo\u003e. Ele é responsável pelos nomes do futuro campo de forma.

Figura 3. Como criar o formulário de feedback mais simples para o site em HTML e PHP?

• Passo 4. Na nova linha, tudo está na mesma etiqueta ‹P› Prescrevemos a etiqueta de criar um campo com os seguintes valores: ‹INPUT TIPO \u003d" Texto »Nome \u003d" Nome "Pase de espaço (" "Digite seu nome "Obrigatório \\\u003e. Parâmetro " type \u003d "texto"" Define o tipo de campo de texto e o parâmetro " espaço reservado \u003d "Digite seu nome «» Define o texto inicial neste campo de texto. Parâmetro " obrigatório»Fica claro para o visitante do site que esse campo é obrigatório para preencher. Como resultado, você deve obter um formulário com um campo, conforme mostrado na captura de tela abaixo.

Figura 4. Como criar o formulário de feedback mais simples para o site em HTML e PHP?

• Etapa 5. Pelo exemplo acima, adicione os campos restantes necessários, cada vez que começam na tag ‹P›. Para instalar um campo com mensagem de texto, use a tag ‹Nome da textarea \u003d" Mensagem "cols \u003d" 50 "linhas \u003d" 6 ″ Necessário ›‹/textarea ›. Opções " cols" E " linhas»São responsáveis \u200b\u200bpela largura e altura do campo de texto. Você pode definir os parâmetros que você gosta mais. Você deve obter algo assim mostrado na captura de tela abaixo.

Figura 5. Como criar o formulário de feedback mais simples para o site em HTML e PHP?

• Etapa 6. Para se proteger de bots, que estão muito na internet hoje, crie outra linha com tag ‹Nome de entrada \u003d" bezspama "type \u003d" text "style \u003d" display: nenhum "value \u003d" " /›. Devido ao parâmetro " style \u003d "Display: Nenhum"»Este campo não será visível por meros mortais, mas os bots serão preenchidos automaticamente. Assim, você sempre pode distinguir uma pessoa viva do programa.

Figura 6. Como criar o formulário de feedback mais simples para o site em HTML e PHP?

• Etapa 7. A etapa final da marcação será a criação do botão de envio. A tag é usada para isso \u003cBotão\u003e. Crie um novo bloco ‹P› E dentro dele, insira o código do botão com os seguintes parâmetros: ‹Button class \u003d" submit "type \u003d" submeter "›envie uma mensagem \u003c/Botão\u003e. Um resultado semelhante deve ocorrer, como mostrado na captura de tela.

Figura 7. Como criar o formulário de feedback mais simples para o site em HTML e PHP?

Trabalhando com estilos em cascata (CSS)

• Como você já notou no processo de marcação, acabamos com algo muito torto, incrível e nojento. Para dar o feedback uma aparência mais ou menos arrumada, um idioma Html Não será suficiente. Para esse fim, você terá que recorrer ao uso de estilos CSS.
• No caso de você aproveitar o conselho para apertar suas habilidades básicas no recurso htmlbook.ru, então defina certos parâmetros de design para todas as partes do formulário usando CSS Não será difícil para você. Se você não tiver um desejo ou tempo de mexer com tudo isso, forneceremos um código pronto para você e informaremos como conectá -lo.

Figura 8. Como criar o formulário de feedback mais simples para o site em HTML e PHP?

Conecte estilos CSS Para Html Você pode duas maneiras:

• Copie o código da nossa tabela em cascata para a parte inferior do arquivo style.cssque está presente na hospedagem do local
• Mova nosso arquivo estilos para sua hospedagem e conecte -o

Arquivo style.css Conecta dentro da tag ‹Cabeça› ‹/Head› Usando um script ‹Link rel \u003d" Stylesheet "Media \u003d" Screen "href \u003d" style.css "›. No caso de um arquivo com estilos estar não na mesma pasta que o arquivo HTML principal, você precisa especificar o caminho para ele. Em nosso arquivo com estilos, cada elemento tem uma designação. Se desejar, você pode alterar os parâmetros por si mesmo, guiados apenas por habilidades básicas de programação.

Conexão do arquivo php e configurando -o

Como mencionado anteriormente, script Php é responsável pela execução do formulário de feedback. No entanto, para entender mais ou menos o princípio do trabalho da linguagem Php, você precisa ler um grande volume de literatura e gastar um número decente de horas para a prática. Portanto, como no caso de CSS, forneceremos a você um arquivo pronto com um script PHP que permanece apenas para anexar ao documento com o formulário.

Ao contrário do arquivo style.css, um arquivo com um script PHP é anexado nas propriedades do próprio formulário. Vamos começar em ordem:

• Passo 1. Abra o código escrito anteriormente e encontre uma linha com uma tag de formulário aberto. Adicione propriedades a ele " action \u003d "Contato-form.php"" E " método \u003d "Post"". Assista a um exemplo na captura de tela.

Figura 9. Como criar o formulário de feedback mais simples para o site em HTML e PHP?

• Passo 2. Faça o download do nosso arquivo php e coloque -o na hospedagem na mesma pasta em que o documento HTML está localizado. Assim, os arquivos PHP e HTML interagem entre si.

Figura 10. Como criar o formulário de feedback mais simples para o site em HTML e PHP?

• etapa 3. Em seguida, você precisa configurar o script para si mesmo. Abra o arquivo e defina as variáveis, atribuindo -lhes os mesmos nomes que no script HTML. Se você adicionou campos adicionais ao formulário, adicione -os no script PHP exatamente como mostrado na captura de tela.

Figura 11. Como criar o formulário de feedback mais simples para o site em HTML e PHP?

• Passo 4. Em seguida, você precisa adicionar mais duas variáveis \u200b\u200bcom o endereço do seu email e o tópico da carta que será exibida em sua caixa. Em uma linha com uma variável " $ Endereço"Indique e-mail e na linha" $ sub»O tema da carta é mostrado na captura de tela.

Figura 12. Como criar o formulário de feedback mais simples para o site em HTML e PHP?

• Etapa 5. Em uma linha com uma variável " $ ms»O formato da carta que você receberá por e -mail está configurado. Você pode reescrevê -lo inalterado ou editar seu próprio gosto.

Figura 13 Como criar o formulário de feedback mais simples para o site em HTML e PHP?

• Etapa 6. Todas as outras linhas são responsáveis \u200b\u200bpor enviar a mensagem e conter as configurações de proteção dos bots, para que elas sejam deixadas inalteradas. Como resultado, o código completo deve se parecer com o mostrado na captura de tela abaixo.

Figura 14. Como criar o formulário de feedback mais simples para o site em HTML e PHP?

Baixe os arquivos CSS e PHP para feedback

Depois de executar todas as ações na saída, você receberá um formulário de feedback tão simples de arrumação

Figura 15. Como criar o formulário de feedback mais simples para o site em HTML e PHP?

Uma seleção de belas formas de feedback de design sobre HTML e CSS para diferentes fins

• Com base nas instruções acima, você pode facilmente "desenhar" o formulário de feedback para o seu próprio gosto. No entanto, se você não tiver tempo ou desejo de criar um formulário de forma independente, pode encontrar formulários prontos para design na Internet e ter habilidades básicas Html edite -os por si mesmo.

Figura 1. Uma seleção de belas formas de feedback de design sobre HTML e CSS para diferentes fins

• Tendo procurado um pouco, encontramos para você uma seleção de 35 Belas formas de feedback de design pop -up, que estão escritas em Html E CSS. Essas formas são adequadas para motores como WordPress E JoomlaEles têm uma configuração simples e fácil do painel de controle e também são perfeitos para sites sem motor.

Faça o download de uma seleção de formas de feedback de designers para sites

VÍDEO: ReadPress Feedback de feedback refratário