Como Adicionar Campos Ao Formulário Pelo Visitante

WEBMASTER - Versão Beta

Olá, Somos criadores de conteúdo apaixonados por web design, programação, criação de websites e tecnologias digitais. O nosso website está online! Explore a nova versão beta, onde terá acesso a novos recursos e melhorias. A sua experiência e feedback são muito importantes para nós! Novos artigos, todas as semanas! Fique atento.

Como Adicionar Campos Ao Formulário Pelo Visitante

Não sei se isso já aconteceu contigo, mas… você já passou por uma situação onde teve de “gerar” os campos de seu formulário através da web?

Uma solução muito útil para quem precisa usar formulários é você poder adicionar campos dinâmicamente.

Ainda não precisei fazer isso, mas para prevenir, fiz uma brincadeira, montando esse pequeno projeto.

Acredito que ajudará a programadores que necessitam desta solução.

Porque Inserir Campos Dinâmicos?

Imagine o seguinte:

Você precisa que seu Cliente preencha TODOS os telefones dele, só que ele tem 5 números e em seu formulário existem apenas 2 campos.

Certamente você terá problemas, correto?

Então… que tal o próprio cliente gerar este formulário, isto e: Inserindo a quantidade de campos necessárias para te enviar a mensagem?

É, isso é possível e você verá através desta matéria como fazer.

Analisando O Ficheiro

Veja através do script abaixo como podemos criar os botões para inserção do conteúdo.

Página Index.php:











WebMaster.PTInserindo Campos em Formulário Dinâmico

Veja acima que montamos toda a estrutura usando Java Script, através de funções específicas podemos inserir o conteúdo com sucesso (conforme imagens a seguir).

Após preencher os campos de seu interesse, você poderá fazer o envio para a próxima página, onde seu formulário será gerado de forma automática (conforme ficheiro e imagem a seguir):



WebMaster.PTInserindo Campos em Formulário Dinâmico



Formulário:


    ";
    // Faz loop pelo array dos campos:

    foreach($_POST["campo"] as $campo) {

    $nome_arquivo = $campo;
    $nome_arquivo = str_replace('E','e',$nome_arquivo);

    $nome_arquivo = str_replace('í','i',$nome_arquivo);

    $nome_arquivo = str_replace('ç','c',$nome_arquivo);

    $nome_arquivo = str_replace('N','n',$nome_arquivo);
        echo "
";

    }

}else{

        echo "Você não adicionou dados em nenhum campo!";

}
echo "





$campo









";
?>

Vamos conferir como ficou o código fonte da página?



WebMaster.PTInserindo Campos em Formulário Dinâmico


    Formulário:



Nome



Endereço



Telefone

OBS.: Veja que acima após recebermos o conteúdo do array através de um loop, “limpei” o código, de forma que ele não aceite algumas letras maiúsculas e o cedilha.

Bem… você poderá melhorar esse script página criando a página “formulario_envia.php” e customizá-lo de acordo com suas necessidades.

Para fazer isso, basta você entender um pouco de trabalhos com “array” e não terá qualquer problema.

Espero que este ficheiro lhe ajude em algo.

Download do código usado neste tutorial > Adicionar Campos Ao Formulário Pelo Visitante

(1 votes, average: 5.00 out of 5)

Quemuel Aquino

Ver todos os artigos

Deixe o seu comentário, participe!

7 Responses

Paulo says:

03/12/2010 at 03:51

Como eu faço para aparecer 3 campos de uma vez ao apertar o botão?? Preciso muito dessa ajuda!! obrigado

Reply
Quemuel Aquino says:

03/12/2010 at 12:47

Olá Paulo,

Incremente o arquivo em JavaScript para que ele faça isso!

Seguindo o exemplo da matéria (que incrementa de 1 em 1), você pode usar a lógica e adaptar para suas necessidades.

Se você tiver dúvidas, me procura ao MSN e estarei lhe auxiliando, ok?

MSN: atendimento@empresasnainternet.com.br / grupoqsa@hotmail.com.

Abraço,

Quemuel Aquino

Reply
Carlos says:

24/01/2014 at 21:50

Pode me ajudar com essa dúvida? http://forum.imasters.com.br/topic/515307-verific…
É sobre o assunto!

Deu certo o teu tutorial (adaptei).
Mas na hora de validar os campos novos, pelo fato de terem sido criados após o form, o JS não os vê.

Como resolver isso?

Carlos

Obrigado!

Reply
Carlos says:

25/01/2014 at 12:01

Como faço para verificar se o campo foi realmente criado?
Em outras palavras: Eu vejo o campo criado mas preciso validar seu conteúdo.
Porem, quando verificado se já foi criado (senão precisa ser criado), o JS

if ( $(document.getElementsByName('nomeTipo['+servico[key]+']')).length )

sempre diz que não esta criado.

Reply
Rodrigo Drews says:

04/02/2014 at 20:16

Boa tarde, quando o código java é colocado dentro de uma 'table' no dreamweaver a variável perde o valor!

Vc sabe como posso resolver esse problema?

Reply
Paulo Sérgio Duff says:

25/07/2014 at 20:44

Show de bola!
Tive até que voltar no site para dar os devidos créditos quando eu usar o script!

Reply
Sergio says:

05/08/2015 at 20:09

como faço para gravar os dados inseridos no formulario…..

Reply

Versão Beta

Estamos a mudar

Olá, Somos criadores de conteúdo apaixonados por web design, programação, criação de websites e tecnologias digitais. Ajudamos os nossos clientes a levar o conteúdo certo às pessoas certas, criando artigos e recursos que facilitam a criação e otimização de websites.