Pular para o conteúdo

Curso Mago Contact Form 7

Como Criar Colunas no Contact Form 7 Com Bootstrap 4 – WordPress

  • Aula 34
  • 8:54 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 Colunas no Contact Form 7 Com Bootstrap 4 no seu site WordPress de uma maneira bem simples com base em um código que preparei especialmente para você.

É só continuar descendo a página que você encontrará o seu material!

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.

Código HTML para estruturar o seu formulário com Boostrap 4

*Para adaptar ao seu formulário basta trocar as tags do Contact Form 7

<div class="mg-cf7-form">
    <div class="row">
        <div class="container">
            <div class="row">
                <div class="col-12 mg-cf7-form-item">
                    <label>Nome</label>
                        [text nome class:mg-cf7-form-item-input-padrao placeholder "Nome completo"]
                </div>

                <div class="col-12 col-md-6 mg-cf7-form-item">
                    <label>E-mail</label>
                        [email* email class:mg-cf7-form-item-input-padrao placeholder "Seu melhor e-mail"]
                </div>

                <div class="col-12 col-md-6 mg-cf7-form-item">
                    <label>Celular / WhatsApp</label>
                        [tel telefone class:mg-cf7-form-item-input-padrao placeholder "(xx) x xxxx-xxxx"]
                </div>

                <div class="col-12 col-md-6 mg-cf7-form-item">
                    <label>Gênero</label>
                        [radio genero class:mg-cf7-form-item-input-radio default:2 "Masc." "Fem." "Outro"]
                </div>

                <div class="col-12 col-md-6 mg-cf7-form-item">
                    <label>Data de Nascimento</label>
                        [date data-nascimento class:mg-cf7-form-item-input-padrao min:1960-01-01 max:2002-04-13]
                    
                </div>

                <div class="col-12 mg-cf7-form-item">
                    <label>Endereço</label>
                        [text endereco class:mg-cf7-form-item-input-padrao placeholder "Rua, Bairro - Cidade / UF"]
                </div>

                <div class="col-3 mg-cf7-form-item">
                    <label>Número da Residência</label>
                        [number numero-residencia class:mg-cf7-form-item-input-padrao min:0 max:99999 placeholder "Nº"]
                </div>

                <div class="col-9 mg-cf7-form-item">
                    <label>Complemento</label>
                        [text complemento class:mg-cf7-form-item-input-padrao placeholder "APTO / Bloco / Condomínio"]
                    
                </div>

                <div class="col-12 col-md-3 mg-cf7-form-item">
                    <label>Área de Interesse</label>
                        [select area-interesse id:op-area-interesse class:mg-cf7-form-item-input-padrao include_blank "Design" "Social Mídia" "Programação" "Gestão"]
                </div>

                <div class="col-12 col-md-9 mg-cf7-form-item">
                    <label>Informe o Link do Seu Portfólio</label>
                        [url link-portfolio class:mg-cf7-form-item-input-padrao placeholder "Insira o link do seu portfólio"]
                </div>

                <div class="col-12 mg-cf7-form-item">
                    <label>Gostaria de Trabalhar em Casa?</label>
                        [checkbox home-office class:mg-cf7-form-item-input-checkbox exclusive free_text "Sim" "Não" "Indiferente" "Sim, porém..."]
                </div>

                <div class="col-12 mg-cf7-form-item">
                    <label>Conte-nos um Pouco Sobre Você</label>
                        [textarea bio-candidato class:mg-cf7-form-item-input-padrao class:mg-cf7-form-item-input-textarea minlength:100 maxlength:900 x5 placeholder "Conte-nos um pouco sobre você..."]
                </div>

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

                <div class="col-12 mg-cf7-form-item">
                    <label>Prove Que Você Não é Um Robô</label>
                        [quiz prove-humano class:mg-cf7-form-item-input-padrao "10 + 10 | 20" "25 + 5 | 30" "Qual o nome do curso | Mago CF7"]
                </div>

                <div class="col-12 mg-cf7-form-item">
                    [acceptance aceitar-dados class:mg-cf7-form-item-input-checkbox] Declaro que estou ciente da integridade dos dados informados no formulário [/acceptance]

                    [submit "Enviar"]
                </div>
            </div>
        </div>
    </div>
</div>