Neste artigo vou passar um código simples e muito efetivo para adicionar campos extras em um formulário utilizando jQuery para isto. Este tipo de recurso é muito bom quando em um formulário você gostaria de dar opções do usuário adicionar mais campos daquela informação, como por exemplo, adicionar mais números de telefone ou mais emails.
Além de informar como criar os campos, neste artigo também vamos resgatar as informações dos campos para que sejam usados no seu back-end depois de maneira organizada.

Abaixo há um exemplo de como seria o formulário com campos adicionais:


Gostou? Pois é, tudo é bem simples e totalmente dinamico.

A estrutura que iremos utilizar para fazer este campos é a seguinte:
No html teremos um input padrão para ser o campo fixo, ou seja, um campo que deve ser obrigatório, então o usuário não poderá remover este campo e também não deverá deixá-lo nulo. Bem simples até aqui.
No Javascript criaremos uma função que para cada vez que o usuário clique em Adicionar mais um(a), esta função gerará uma string html que será adicionada em uma div do html específica para isto. Também coloquei um botão para excluir o campo assim quando ele é criado. Para excluirmos esse campo também é uma lógica simples, quando o usuário clicar no botão para excluir, o campo será escondido, e na hora de validar os campos do formulário basta validarmos apenas os campos visíveis.
Veremos este código javascript logo abaixo, mas primeiro, veja o código html:

<div class="container">
	<div class="row">
		<div class="text-center">
			<h1>Campos adicionais</h1>
			<p>Adicione quantos campos quiser!</p>
		</div>
	</div>
	<div class="row">
		<div class="col-md-5 col-md-offset-1">
			<label>Email</label>
			<input type="text" class="form-control campoDefault" placeholder="Este campo é fixo!"/>
			
			<div id="imendaHTMLemail"></div>
			
			<a href="#" id="btnAdicionaEmail" ><i class="fa fa-plus"></i> Adicionar mais um(a)</a>
		</div>
		<div class="col-md-5">
			<label>Telefone</label>
			<input type="text" class="form-control campoDefault" placeholder="Este campo é fixo!"/>
			
			<div id="imendaHTMLtelefone"></div>
			
			<a href="#" id="btnAdicionaTelefone" ><i class="fa fa-plus"></i> Adicionar mais um(a)</a>
		</div>
	</div>
	<div class="row text-center">
		<button class="btn btn-lg btn-primary" id="btnSalvar">Salvar formulário</button>
	</div>
</div>

Sem muitos segredos no html, porém é necessário ficar atento que após o input de default, é inserido uma div fazia, que será onde iremos introduzir os novos campos adicionais. Também coloquei a classe campoDefault para que mais tarde seja mais fácil de identificá-los no jQuery.

Uma vez com o html já organizado, analise o código Javascript que fará o trabalho com os novos campos:

<script type="text/javascript">

	var idContador = 0;
			
	function exclui(id){
		var campo = $("#"+id.id);
		campo.hide(200);
	}

	$( document ).ready(function() {
		
		$("#btnAdicionaEmail").click(function(e){
			e.preventDefault();
			var tipoCampo = "email";
			adicionaCampo(tipoCampo);
		})
		
		$("#btnAdicionaTelefone").click(function(e){
			e.preventDefault();
			var tipoCampo = "telefone";
			adicionaCampo(tipoCampo);
		})
		
		function adicionaCampo(tipo){

			idContador++;
			
			var idCampo = "campoExtra"+idContador;
			var idForm = "formExtra"+idContador;
		
			var html = "";
			
			html += "<div style='margin-top: 8px;' class='input-group' id='"+idForm+"'>";
			html += "<input type='text' id='"+idCampo+"' class='form-control novoCampo' placeholder='Insira um "+tipo+"'/>";
			html += "<span class='input-group-btn'>";
			html +=	"<button class='btn' onclick='exclui("+idForm+")' type='button'><span class='fa fa-trash'></span></button>";html +=	"<button class='btn' onclick='exclui("+idForm+")' type='button'><span class='fa fa-trash'></span></button>";
			html += "</span>";
			html += "</div>";
			
			$("#imendaHTML"+tipo).append(html);
		}
		
		$(".btnExcluir").click(function(){
			console.log("clicou");
			$(this).slideUp(200);
		})
		
		$("#btnSalvar").click(function(){
		
		var mensagem = "";
		var novosCampos = [];
		var camposNulos = false;
		
			$('.campoDefault').each(function(){
				if($(this).val().length < 1){
					camposNulos = true;
				}
			});
			$('.novoCampo').each(function(){
				if($(this).is(":visible")){
					if($(this).val().length < 1){
						camposNulos = true;
					}
					//novosCampos.push($(this).val());
					mensagem+= $(this).val()+"\n";
				}
			});
			
			if(camposNulos == true){
				alert("Atenção: existem campos nulos");
			}else{
				alert("Novos campos adicionados: \n\n "+mensagem);
			}
			
			novosCampos = [];
		})
		
	});
	
	</script>

Logo de início é apresentado a variavel global idContador, que será incrementada toda que vez a a função adicionaCampo for chamada. Isto serve para que possamos incrementar o final do id de todos os campos daquele formulário. Neste exemplo, não precisei utilizar o id dos campos, mas caso você pretenda fazer um código com uma lógica mais complexa, você pode rodar um loop for na variável idContador e encontrar todos os campos que foram adicionados. Não se esqueça de zerá-lo quando o usuário não estiver mais utilizando esta tela.
Como a função que adiciona os campos no html usa o jQuery e o jQuery já foi rodado uma vez no seu escopo, você precisa colocar a função de onclick e manipular os elementos de exclusão fora do jQuery, por isso, é importante já determinar no parametro da função o id do campo, assim, na função excluir você simplesmente esconde aquele campo.
Neste exemplo eu apena escondi todos os campos que foram excluidos, então quando o usuário clicar em salvar, haverá um if verificando se os campos que contém a classe novoCampo estão visíveis.
Na hora de enviar os dados do formulário você tem várias opções. Uma de minhas sugestões é justamente na linha comentada após a verificação dos novos campos, onde você pode simplesmente adicionar todos os novos campos em um Array e depois inseri-los um por um em uma lista ou objeto e a partir daí inserir no banco ou manipulá-los da forma que achar melhor.

Campos adicionais, como dito, são uma ótima forma de deixar o usuário livre para registrar quantas informações forem necessárias sobre um objeto, o que é ótimo para o armazenamento de dados. Você também pode inserir máscaras nos campos adicionais, melhorando a forma com que são inseridos os dados, como por exemplo, melhorar a forma na qual o usuário insere os dígitos no campo telefone.
Aqui no blog existe um artigo explicando sobre as máscara, você pode clicar aqui para ler o artigo na íntegra.