É bem básico.
Ao clicar no radio responsável pelo form 1, vai mudar o
display da div que contém o formulário 1 para
block. Ou seja, vai tornar era visível. Quando efetuar a troca (quando o cliente clicar no radio do form 2), vai ocultar a div do form 1 e mostrar a do form 2.
Ou seja, basta trabalhar com a alteração do style.display de cada form, para
none ou para
block.
No fórum mesmo tem muita coisa sobre isso...
Fiz um exemplo bem simples. Procura
entender ele, para que você mesmo possa efetuar modificações de acordo com as tuas necessidades.
<html>
<body>
<script>
function alterna(tipo) {
if (tipo == 1) {
document.getElementById("tipo1").style.display = "block";
document.getElementById("tipo2").style.display = "none";
} else {
document.getElementById("tipo1").style.display = "none";
document.getElementById("tipo2").style.display = "block";
}
}
</script>
<form name="teste">
Tipo 1: <input type="radio" name="tipo" value="1" onclick="alterna(this.value);" /><br/>
Tipo 2: <input type="radio" name="tipo" value="2" onclick="alterna(this.value);" /><br/>
<div id="tipo1" style="display:none;">
<p>Formulario do tipo 1 entra aqui:</p>
Teste: <input type="text" name="oculto" size="30" />
</div>
<div id="tipo2" style="display:none;">
<p>Formulario do tipo 2 entra aqui:</p>
Teste 2: <input type="text" name="oculto" size="30" />
</div>
</form>
</body>
</html>
