Código: clicar em um botão e aparecer formulário

Ingridss · 3 de março de 2016

Olá, procurei muito e o tópico do link abaixo me ajudou, mas não o suficiente. Gostaria que no lugar de "" aparecesse um formulário de contato. Testei este mesmo método e coloquei este código "" (que é o código do formulário de contato do wordpress) no lugar desse texto "", mas só apareceu o botão. Se alguém entendeu minha dúvida e puder me ajudar, eu agradeço. Segue o link conforme citado:

DiF · 3 de março de 2016

@Ingridss Primeiramente seja, bem vindo ao Fórum do Clube do Hardware.

Por gentileza, poderia postar como tentou fazer?

Para postar um código aqui clique no icone <> que está no editor, e cole seu código na janela que abrir.

No aguardo.

Ingridss · 3 de março de 2016

@dif segue o código

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
<script type="text/javascript">
function insereTexto()
{document.getElementById('divTeste').innerHTML = '[contact-form-7 id="6343" title="Sem nome"]';}
</script>

</head>
<body>

<input type='button' onclick='insereTexto()' value='Inserir texto'/><br/>

<div id="divTeste"> </div>
</body>
</html>

DiF · 3 de março de 2016

@Ingridss O problema é que o wordpress trabalha diferente para renderizar um formulário.. esse código que usou é específico do wordpress.

Direto ele funciona veja um exemplo: https://jsfiddle.net/jnmj5k7g/

Ingridss · 4 de março de 2016

@dif desculpa minha ignorância, mas não entendi como posso (e se é possível) inserir o código do formulário neste código HTML que você mostrou.

Quero que fique como este site: http://www.vipvagas.com/vaga/operador-de-producao-r-1-60000

Veja que ao clicar em "Enviar Currículo", logo aparece o formulário...

DiF · 4 de março de 2016

@Ingridss O que podes fazer ali é algo bem simples mesmo, manipular a propriedade display no css.

Faz assim:

Cria o botão de mostrar/ocultar

e embaixo dele cria seu formulário. Com tudo posicionado, esconda o formulário setando o valor de display para none.

Não sei como é no wordpress, mas se você puder definir valores de ID ou class vai funcionar.

então seu formulário precisa ter pelo menos uma id ou class assim:

<form method="post"  id="seuformulario">
  OU
  <form method="post"  class="seuformulario">

Veja que tem um ID ou uma class, para que o formulário seja identificado pelo javascript.

Então no CSS você define a visibilidade:

#seuformulario{
  display: none;
}

OU
.seuformulario{
  display: none;
}

você pode escolher. como é um elemento que será usado uma vez, ou seja, um formulário só, use o ID.

Eai no javascript você faz a manipulação.

Hj em dia é mais fácil usar o jQuery. mas se quiser fazer em javascript puro dá também.

por exemplo:

em javascript puro:

function mostrar(){
    document.elementById("seuformulario").style['display'] = 'block';
}

Agora se quer implementar o mesmo botão para abrir e fechar como no exemplo do site tem que mudar o javascript por exemplo:

function mostrar(elemento){
  var display = document.getElementById(elemento).style.display;
    if(display == "none"){
        document.getElementById(elemento).style.display = 'block';
    }else{
        document.getElementById(elemento).style.display = 'none';
    }    
}

E ai para chamar a função seria:

<button onclick="mostrar('seuformulario')">Mostrar formulário</button>

Veja um exemplo funcionando: https://jsfiddle.net/jnmj5k7g/1/

Contudo, em jQuery é MUITO mais fácil, onde já existe uma função de toggle.

exemplo:

//quando o DOM tiver pronto
$(document).ready(function(){
    //atribui a função de click em cima do botão
	$('#botao').on('click', function(){
        //o formulário irá mostrar ou esconder.
    	$('#seuformulario').toggle();
    });
});

Para usar o jQuery dé uma pesquisadinha!

Olha o mesmo exemplo em jQuery: https://jsfiddle.net/jnmj5k7g/2/

O jQuery reduz as linhas de código e é bem simples de entender!

Boa sorte!

AndresonFerreia · 4 de março de 2016

<style type="text/css">
.escondida {
    display:none;
}
</style>

<script type="text/javascript">
function abrir() {
    var main = document.getElementById("central");
    var iten = main.getElementsByTagName("input");
    if (iten) {
        for (var i=0;i<iten.length;i++) {
            iten[i].onclick = function() {
                var el = document.getElementById(this.id.substr(7,7));
                if (el.style.display == "block")
                    el.style.display = "none";
                else
                    el.style.display = "block";
            }
        }
    }
}
window.onload=abrir;
</script>

<div id="central">
	<!-- Botao -->
    <input type="button" value="Abrir / fechar" id="receita1">
	<!-- conteudo escondido -->
    <div id="1" class="escondida"> 
		<!-- Aqui fica o seu form -->
					
					<!-- INICIO DO FORMULÁRIO -->
					
					<form id="formulario" method="post" action="enviar.php">
					
						<p>
							Nome:<br>
							<input type="text" name="nome" id="nome_id">
						</p>
						
						<p>
							E-mail:<br>
							<input type="email" name="email" id="email_id">
						</p>
						
						<p>
							Telefone:<br>
							<input type="tel" name="fone" id="fone_id">
						</p>
						
						<p>
							Mensagem:<br>
							<textarea name="msg" cols="35" rows="5"></textarea>
						</p>
						
						<p>
							<input class="botao" type="submit" name="enviar" id="enviar_id" value="Enviar">
						</p>
						
					</form>
						
					<!-- FIM DO FORMULÁRIO -->
	
	
	</div>

</div>