Como criar um formulário de contato no WordPress?

1. O que vamos aprender neste curso?: Olá e bem-vindo ao squishier. Espero que você esteja bem. Neste vídeo, aprenderemos como criar um formulário de contato simples no WordPress. Portanto, o formulário de contato que vamos criar será mais menos assim. Você pode ver isso. Teorias simples rotuladas como seu nome, assunto do seu e-mail. E aqui eu uso um único campo chamado de onde você ouviu falar sobre nós. Você vê disputadas como comida e diferentes formas de quadrinhos para mencionar, você sabe, obter feedback dos clientes, como onde eles ouviram falar, Sobre nós. E então o campo de mensagem simples com alguns opcionais agora aqui. E então um lindo botão de envio. E você pode ver efeitos simples acontecendo aqui. Então, aprenderemos como podemos criar esse incrível formulário de contato no WordPress. Então, vamos mergulhar nisso. 2. Como desenvolver e personalizar um formulário de contato?: Olá e bem-vindo ao segundo vídeo deste curso. Obrigado por assistir a este curso sobre descarga de néon. Então, neste vídeo , vamos começar como criar o formulário de contato no site WordPress. Portanto, esta é uma nova instalação do WordPress. E estamos dispostos a usar uma equipe extra para criar o formulário de contato sobre isso, neste curso. E agora você vai instalar um plugin que usamos para criar o formulário de contrato. Vamos entrar e instalar o plugin chamado formulário de contato sete. Certamente, em sua totalidade, muito simples. Mostrarei passo a passo como você pode configurar esse formulário. Ativando esse plugin. E você encontrará o plugin aqui. Conteúdo rebelde. Basta entrar e você encontrará um formulário de contato padrão e criará um novo formulário para nossas necessidades. Então, adicionando um novo formulário aqui, aqui você encontrará um padrão, os campos de entrada padrão. Então, vamos limpar esse formulário, formulário de contato simples, e ver como ele vai ficar. Esse será o padrão. Veja o plugin, personalizará este formulário como acabei de indicar para você no vídeo de demonstração. Então, agora vamos ver como isso parece. A propósito, deixe-me também dizer como você pode instalar o plug-in na página no ombro. Mostrar exibir o formulário na peça. Então, vamos às páginas, criaremos uma nova página. Normalmente você vê a página de contato como entre em contato comigo, entre em contato conosco. Então entrem e nomeiem as páginas, empreiteiros. E aqui, se você estiver usando o plugin Gutenberg, você encontrará um formulário contato de extinção por aqui. Você pode simplesmente entrar e selecionar isso. E se você não estiver usando o Gutenberg ou se não houver nenhum outro plug-in, basta copiar esse código curto daqui e colá-lo na sua página. E para trabalhar. No nosso caso, aqui está em Gotemburgo. Então, aqui você pode ver o campo do formulário de contato. Selecione aqui o contrato simples que publicaremos nesta página. Basta ver como esse formulário se parece com a sua página. E você pode ver que esta é uma configuração simples disso, o plug-in, a visualização padrão dessa entidade de plug-in. Então, agora vamos personalizar esse plugin. Passando para a demonstração, acabamos de ver, acabamos de ver. Então dividimos isso, gastamos as primeiras três linhas e três colunas. Você se sentirá tão rotulado quanto de onde ouviu falar de nós. E então também adicionaremos algumas pequenas coisas de CSS para embelezar esse formulário. Então, vamos começar. Em primeiro lugar, vamos adicionar um novo campo. Para isso. Você pode usar a etiqueta e a entrega. Ouvi de você, ouvi sobre nós. E aqui vamos usar o campo suspenso. Esses são os campos que você pode usar nos textos simples de uma empresa inicialmente e no URL e no número de telefone, ou em um campo de data e você pode ver assim por diante. Existem períodos simples aqui, diferentes. Então, aqui vamos usar esse campo de menu suspenso, que é virtual, na verdade o menu Selecionar que você verá em diferentes sites. Vamos nomear o campo como amigos. Aqui vamos adicionar algumas opções como o YouTube. Facebook. Ainda tenho certeza. Também adicionaremos uma opção chamada outra, porque haverá algumas plataformas, você sabe, para não especificar a fonte para que as pessoas possam escolher o branco. Então, vamos torná-lo obrigatório. Depende de você se você tornou o campo obrigatório ou não. Mas aqui está a opção de atender a fluência de forma silenciosa ou não. Não estou fazendo com que seja obrigatório. Se quiser, você pode clicar nesse ícone de verificação. E o medo de termos inserido uma etiqueta aqui. E agora você vai ver como é a aparência desse campo. Salvando este outono e atualizando a página aqui. E você vê esse período carotídeo, certo? Portanto, como esses campos são obrigatórios, isso continuará mostrando essa mensagem de erro até que a preenchamos. Agora vamos personalizar o CSS para embelezar esse formulário. Para fazer isso, teremos que adicionar algumas tags aqui, algumas tags HTML aqui para usar tags desses usuários na caixa HTML e CSS. Então, vamos começar. Em primeiro lugar, adicionaremos algumas tags div para violar as regras. Neste vídeo, vou usar as nuvens, veja a linha f traço. E eu vou usar uma classe C, F, a coluna de idade para as colunas e fechar isso. E vamos ver se é classe Rich Paul, eu também vou usar essa classe de tamanho. Esse será um termo. Porque precisamos dividir esses primeiros três períodos e três colunas. Então, eu vou usar essa terceira classe. E antes disso, vou adicionar um pouco de CM inicial, que são muito importantes se você quiser ver se seus estilos, seu CSS estão em conflito. Porque quando instalamos plugins diferentes, CSS diferentes são integrados ao site e às vezes são construídos. Então, adicionamos algumas iniciais para torná-lo diferente dos diferentes plugins. Talvez você possa usar o CF ou talvez você possa usar seu site, FirstName ou qualquer coisa parecida que o torne diferente das outras classes de competências. Então, por enquanto, estou usando o CF 1 terço. 1 terço é na verdade o CSS que farei para fazer com que seja 1 terceira coluna e tudo mais. Então, vou copiar isso três vezes. Então eu posso usar os três móveis para o outono. Vou copiar esse campo de nome de URL e vou editar aqui. E então copiando esse campo de e-mail adicionado aqui. Vou copiar o campo de assunto e adicioná-lo. Certo? Então, fechando a auditoria do CFR aqui. Então, nossa primeira linha está concluída. Agora estou trocando outro dia por outro CFL. Podemos usar o outro campo aqui, certo? Copiando esse bloco aqui e colando-o. Também queria adicionar CF chamado div aqui. Porque a linha e a coluna estão antes da cirurgia usando todos os sites. Então, agora, desta vez, usaremos o CF one porque essa será a linha completa. Normalmente, dois espaços para isso. E agora essa linha é preenchida automaticamente, abrindo outro CFO ou o campo de mensagem e outra coluna cf. C, F, um legal, porque essa também será a linha completa. E fechar essa engrenagem e destrói o preenchimento automático. Agora, abrindo outro CFO para um botão de envio. Desculpe, aqui eu cometi meu erro. Veremos se é chamada de coluna cf aqui. Coluna. Você pode ver Oakland porque isso também precisará da linha completa, do material da coluna. Portanto, nossa estrutura básica de HTML está completa. Você verá como fica bonito com o espaçamento adequado do Peano e tudo mais. O motivo pelo qual eu uso essas classes é, na verdade, o hábito de facilitar o CSS porque essas classes serão capazes de direcionar facilmente essas entradas de tamanhos diferentes. E poderemos reutilizá-lo posteriormente em diferentes formas. Ou talvez, se tivermos vários formulários, você possa usar as mesmas classes para minimizar o CSS e, afinal, ele diminua em relação a Laura, o site. E assim, se você realizar esses sítios endometriais, isso também melhorará os tempos de carregamento e tudo mais. Então, sim, vamos salvar esse formulário. Agora. Não haverá diferença aqui porque acabamos de adicionar as tags HTML. Agora vamos fazer o CSS aqui. Isso é mágica real. Abrindo o inspetor aqui. E faremos um pouco de CSS. Vamos entrar e aqui eu também usarei o estilo CSS comum para, como mencionei, eu realmente tenho o hábito de reutilizar o fluxo CSS. Então eu também faço essa linha de cabelo CF. Vou fazer com que seja um display flexível. E aqui eu vou usar o espaço de conteúdo justificado entre. E agora vou estilizar a chamada de CF. Vamos direcionar a curva CF1. E aqui eu vou usar 3%. E vamos diminuí-lo mais. 2,5. Eu acredito que é perfeito. E aqui vou usar o maravilhoso seletor CF para criar as colunas completas COVID. Eu vou usar um 100 por cento. E você vê que tudo está alinhado brevemente. Certo? Então, agora vou entrar e estilizar nossos rótulos aqui. Vamos usar o CF all gloss. Porque é usado em todos os elementos inspiradores de empatia. Etiqueta. Vamos fazer a transformação de texto. transformação de texto é basicamente, ela muda a transformação dos textos, como catalisar letras minúsculas, maiúsculas, conhecer todas essas coisas. Então eu vou usar aqui letras maiúsculas, tamanho da fonte de 12 px. E eu vou usar o peso da fonte. O peso da fonte é, na verdade, ele altera o peso das fontes. Você vê a função da lã e está muito bonita. Certo? Então, agora eu também vou estilizar os campos de entrada. Aqui. Eu vou usar essa entrada. E depois de usar as vírgulas, também vou segmentar partes selecionadas e externas. Mas é o seguinte, porque estamos usando entradas com o CF chamado classe. Ele também terá como alvo essa entrada. Então, Melbourne, não queremos mudar isso acordo com esses campos de entrada porque isso é uma coisa diferente e isso é diferente. Então, exceção aqui e exócrina, você também aprenderá mais 11 cabeças de Zeus, que não são um colchete. E aqui eu vou adicionar o tipo de atributo submit what, então é uma tíbia, então elemento, é, você sabe, quando ignorar isso. Toda a entrada que tem esse atributo de tipos de homens. Então, pensamos que tudo isso vai ignorar esse botão. E também falaremos sobre esses campos de entrada, exceto esse número aqui. Vamos mudar o fundo para branco, transparente, na verdade. E borda para px sólido. Aqui mesmo. Vou usar uma base. Se você quiser mais detalhes, você sabe, vídeo de celebração do CSS, vou pausar isso em alguns dias. Mas, enquanto isso, você pode ver que, você sabe, o curso é de nossos instrutores. Você pode usar assim. Você poderá aprender mais sobre CSS agora mesmo. Estou apenas tentando explicar isso do zero para expandir de forma geral. Então você pode ter uma ideia. E se você conhece algumas das estações do ano, também conhecerá todos esses atributos. Esses são elementos básicos de CSS. Não é muito complexo. Transição da imagem renderizada para o Leste. Isso apenas adicionará uma transição simples quando mudará algo ou talvez o foco. Eu vou te contar daqui a pouco aqui. Certo? Então, esses são os campos de entrada básicos. E se você ver os resultados da fonte digitando em negrito porque alteramos o rótulo aqui em negrito demais. Então, o que faremos é alterar o peso da fonte aqui para a fonte normal de quatrocentas, quatrocentas bactérias. Você vê que todas essas coisas estão corrigidas, certo? Então, isso está configurado aqui. Agora vamos apontar para adicionar um efeito simples aqui no foco. Então, vamos adicionar mais um elemento de tubo. Como isso será feito, adicionará mais uma coluna aqui e adicionará a seleção da área de texto. Certo? Portanto, foque o menu de alvo elétrico. Então, vou clicar nessa entrada. Ele terá como alvo, esse campo está focado. Então, poderemos fazer o CSS aqui para torná-lo um pouco diferente quando alguém estiver lendo ou escrevendo em um campo de entrada. Então, aqui, se você estiver usando o Chrome, você também tem a opção de focar o campo para poder fazer o CSS corretamente. Vou adicionar uma borda. Na verdade, vou mudar a cor da borda para azul. Ou talvez haja uma pequena mudança. Veja o lindo. Sim. Usando isso por enquanto, geralmente as pessoas usam as cores do tema. Então, combina com o site, certo? Então, é feito aqui. Vamos nos concentrar novamente. E agora vou te mostrar como isso funciona. Veja se alguém está clicando nesta entrada aqui, isso vai mudar. Está mudando a cor da borda lindamente, certo? O efeito, o efeito que você vê aqui e altera a fonte, mudar a cor da borda é, na verdade o que o elemento de transição está fazendo lá. Certo? Se tentarmos desativar isso, você verá que, na verdade, nessa equipe transição é aplicada globalmente. Então, vou tentar mostrar a vocês, oferecer a transição de natação e você verá como fica esta série. Está voltando para mim e não parece muito bom. Portanto, a transição realmente adicionará efeito de álgebra aqui. Você também pode aumentar os milissegundos para torná-lo mais lento. Você vê isso? Então é assim que funciona. E agora também perdemos o teste desse botão de envio de muitos. Para isso, vamos usar novamente o CF chamado. E, novamente, tipos disso. Certo? Então, aqui eu vou mudar o tamanho da fonte, 14 PX. Vamos transformar a letra maiúscula que você combinou com os rótulos. Ponto extra. O peso da fonte será 700. E talvez vamos mudar o tamanho da fonte para 14. Adicione um pouco de espaçamento entre letras aqui. Talvez um pixel, aumente o botão. Livre-se da pessoa com seletor de largura mínima ou um atributo de largura mínima. Vamos mudar para 200. Ou talvez um pouco menos de 270. Parece bom. Certo? E faça uma transição diferente. Você vê como parece. Assim é a barriga, a fronteira de contato. E agora vamos entrar em contato com os ratos. E um CRC está aqui. CSS adicional e publique-o e encontre-o para atualizar a página. E você vê que nosso formulário está preenchido. É assim que construímos formulários de contato. E espero que tenham gostado do vídeo. Por favor, pergunte-me qualquer pergunta que você tenha na seção de comentários abaixo e ficarei feliz em respondê-las. Obrigada Cuide-se. E também não se esqueça de assistir ao vídeo inteiro deste curso, no qual explicarei como você pode publicar suas tarefas e reproduzir todas essas coisas em si mesmo. Obrigada Cuide-se. Tchau. 3. Como podemos alterar as configurações de e-mail e configurar outras coisas?: Ei, neste vídeo, aprenderemos como você pode definir as configurações do formulário de contato, onde e como obter os formulários de contato. As fases do cliente. O cliente enviou as bombas em qual e-mail você receberá as respostas e como você pode definir novos modelos e tudo mais. Então, vamos começar. Então, primeiro de tudo, este era um telefone, o último vídeo de Belt and Road. E agora vamos ao painel. E, novamente, essa opção de contato aqui. E nosso formulário era um contexto simples. Isso era um punhal. Nós configuramos as configurações da fazenda e tudo mais. E agora você vê essas três guias diferentes aqui, mensagens de e-mail e configurações adicionais. Então, masculino é uma guia onde vamos definir e-mails e tudo mais. Então, existem campos diferentes para é um campo, será enviado o e-mail, haverá uma para a qual as respostas, certo? Então, por exemplo, se eu quiser que a resposta teste isso, use esse e-mail e ele enviará todas as respostas para esse endereço de e-mail. E se você quiser adicionar a dinâmica de e-mail, marcamos. Ele enviará todas as respostas para o e-mail do administrador do site, que na verdade é armazenado em um segundo aqui. Configurações gerais. E você vê esse endereço de e-mail administrativo. Esse será o e-mail que chamaremos aqui. E o from é, na verdade um padrão de e-mail e é usado para enviar os e-mails. Talvez você possa manter isso como está. Ou talvez você precise alterar esse domínio às vezes. Portanto, esse domínio deve realmente corresponder ao seu domínio atual, endereço de domínio atual. Por exemplo, vou usar este notch.com para combiná-lo com meu domínio atual e o título do site, você pode deixá-lo como está, ele realmente chamará o título do site. Você geralmente o verá aqui. Então, para nós, ela chamará essa aula de Skillshare aqui. E então o endereço de e-mail do WordPress aqui no assunto. Você pode mudar isso. Talvez você possa escrever um assunto personalizado aqui. Ou, novamente, você pode usar esse texto dinâmico, citar outro enredo, o título do site, e seu assunto exibirá o conteúdo desse campo, desta vila, qualquer assunto aqui. Ou talvez você possa usar um assunto estático aqui. Alguém caia. Ou talvez você possa usar isso aqui. Na verdade, esses são os x que criamos, os campos para seu nome, e-mail, assunto, referência e mensagem. Então, talvez o que as pessoas geralmente fazem seja usar seu nome aqui. Envie-lhe uma mensagem do lado esquerdo. Ou você pode usar qualquer assunto que quiser. Na verdade, depende totalmente de você. E então haverá alguns cabeçalhos adicionais. Simplesmente, você pode mantê-lo como está. E aqui, esse é o corpo da mensagem que será o principal conteúdo de e-mail que as pessoas receberão. Portanto, certifique-se de que, se você adicionar novos campos, mantenha, também adicione um novo filtro. Então, na verdade, a promessa já existe. O assunto já está lá na referência. E então copiaremos isso daqui e colaremos aqui. E depois o corpo da mensagem. E talvez você possa remover essas coisas ou, se quiser, você pode manter. E talvez você possa adicionar mais conteúdo aqui conforme quiser. Portanto, essa é uma configuração de e-mail simples que você faz para obter as respostas imunes. E aqui, há outra guia principal de mensagens que você pode usar para alterar a resposta. Por exemplo, isso verifica os sapatos quando a mensagem do remetente foi enviada com sucesso. Você pode alterar essas mensagens facilmente a partir daqui, existem condições diferentes e mensagens diferentes são usadas aqui. E então, para configurações adicionais, se quisermos adicionar um pouco de JavaScript ou algumas configurações avançadas e complexas, usamos isso. Então, talvez deixe isso como está por enquanto. E essas foram as configurações simples de conduta com que usamos para alterar o contrato de diferentes configurações e alterar os endereços de e-mail entre as mensagens e configurar o formulário. com disputas. Então me avise se você tiver alguma dúvida. Espero ter conseguido explicar as coisas em detalhes. E sim, agora é a sua vez, talvez instale o WordPress em seu servidor local ou talvez tente reproduzi-lo em seus sites. Instale este incrível Formulário de Contato 72 novamente e tente construir esses ossos. E se você quiser publicar seus projetos no Skillshare para que as pessoas possam ver e comentar. Você pode usar uma dívida simples abaixo da guia Projeto e Recursos abaixo deste vídeo. E tente publicar seus projetos, suas tarefas. E eu ficarei feliz em ver, e pessoas diferentes também verão seus projetos e comentarão sobre eles. Então, vai ser incrível praticar, pratique este curso. E espero que tenha sido um curso incrível para você. Então, obrigado por assistir isso. E talvez deixe seus comentários e me diga como esse curso foi para você. Se isso atendeu às suas expectativas superamos suas expectativas. Também tentei escrever alguns comentários para mim e criarei mais cursos no futuro. Então, siga-me e receba as últimas atualizações sobre o Skillshare. Obrigada Cuide-se. Tchau.