Pular para o conteúdo

Curso Mago Contact Form 7

Criar Campos Condicionais no Contact Form 7 Com o Plugin Conditional Fields

  • Aula 39
  • 25:50 minutos de vídeo

FalaÊ Incuber beleza? Seja muito bem-vindo a mais uma aula do Curso gratuito Mago Contact Form 7 do Nano Academy. Aqui é o Paulo Felipe e nessa aula eu vou te ensinar como Criar Campos Condicionais no Contact Form 7 Com o Plugin Conditional Fields e assim mostrar campos com base em um opção selecionada.

Esse recurso é indicado para formulários que precisam mostrar campos específicos que dependem de um opção escolhida previamente, por exemplo:

Digamos que uma empresa tem 3 vagas para homens e 3 vagas para mulheres, sendo assim o formulário precisará de um campo de seleção “Sexo” com as opções “Homem” “Mulher” e com base na escolha do sexo as vagas serão listadas.

Professor

Paulo Felipe

Front-end na Nano Incub.
Estudou banco de dados na FATEC de Indaiatuba/SP, é formado pela equipe Nano Incub de desenvolvimento, é neurótico por autoconhecimento, pai, skatista, slackliner e doido por ensinar.

Materiais de apoio

Código para inserir no corpo do e-mail:

<h3>Vamos começar?</h3>
[radio vamos-comecar "Sim" "Não"]

[group g-nao-comecar]

    <p>Tudo bem não comece =D</p>

[/group]

[group g-nome]

    <h3>Qual é o seu nome?</h3>
    [text nome placeholder "Nome completo"]

[/group]

[group g-email]

    <h3>Qual é o seu E-mail?</h3>
    [email* email placeholder "Seu melhor e-mail"]

[/group]

[group g-anexo]

    <h3>Quer nos enviar um anexo?</h3>
    [radio anexo "Sim" "Não"]

[/group]

[group g-anexo-sim]

    <h3>Anexe o seu Currículo</h3>
    [file anexo-curriculo class:mg-cf7-form-item-input-padrao limit:3mb filetypes:pdf|doc|docx|ppt|pptx]

[/group]

[group g-conhecimento]

    <h3>Em qual área você tem conhecimento?</h3>
    [select area-interesse id:op-area-interesse class:mg-cf7-form-item-input-padrao include_blank "Design" "Programação"]

    [group g-conhecimento-design]
        [select software-design class:mg-cf7-form-item-input-padrao first_as_label "Selecione o seu software favorito" "Photoshop" "Illustrator" "Figma"]
    [/group]

    [group g-conhecimento-programacao]
        [select linguagem-programacao class:mg-cf7-form-item-input-padrao first_as_label "Selecione sua linguagem favorita" "PHP" "Javascript" "VB .Net"]
    [/group]

[/group]

[group g-btn-enviar]

    [submit "Enviar"]

[/group]

 

Código para o Corpo do E-mail

Olá, Administrador.
        Acabamos de receber mais um candidato via site [_site_title].

        Nome: [nome]
        E-mail: [email]

        <br>

        [g-anexo-sim]
        Enviou um documento em anexo
        [/g-anexo-sim]

        [nome] Tem conhecimentos em: [area-interesse]

        [g-conhecimento-design]
        Prefere utilizar o software [software-design]
        [/g-conhecimento-design]

        [g-conhecimento-programacao]
        Tem mais familiaridade com a linguagem [linguagem-programacao]
        [/g-conhecimento-programacao]

        Abraço!

 

Exemplo de como ficou as minhas condições no exemplo da aula: