¿Cómo creo una forma autoadaptativa

Quiero crear un formulario dynamic en mi sitio web.

En mi sitio tengo varios formularios que son específicos de cada tema, pero también tengo un formulario de contacto con un menú desplegable de temas desde el cual pueden elegir cualquiera de las materias que cubren los formularios específicos de cada tema.

ahora, si seleccionan la consulta de diseño del sitio web, les pido su dirección web, mientras que la dirección del sitio web no es relevante para todos los demás temas de la consulta, si preguntan sobre el alojamiento del sitio web, necesito su dirección web pero también su preferencia de alojamiento paquete.

si preguntan sobre el desarrollo de aplicaciones móviles, no necesito el sitio web o los campos del paquete de alojamiento, pero necesito que aparezcan 4 casillas de verificación que les permitan marcar los que están relacionados con las plataformas para las que se desarrollará la aplicación móvil.

por lo tanto, debe ser autoadaptable al tipo de consulta seleccionada.

¿Cómo puedo lograr esto?

puedes usar jQuery, para lograr eso.

necesita agregar jQuery change listener en la lista desplegable. luego agrega elementos de formulario a un contenedor que coincide con el valor seleccionado.

aquí hay un pequeño ejemplo

$( ".select" ).change(function() { var value = this.val(); if(value == "webDesign") { $("#fieldsContainer").append(''); } }); 

También puede cambiar la URL de acción accroding para seleccionar Value, por lo que será más fácil manejar diferentes formularios

 if(value == "webDesign") { $("form#myForm").attr('action','process.php?type=webdesign'); } 

Su pregunta es bastante vaga, pero la respuesta es que hay muchas maneras de lograrlo. Una de las formas más comúnmente usadas es usar javascript (o alguna biblioteca como jQuery usando js).

He creado una función básica para ti que mostrará cómo se hace en js puro:

HTML:

 Services: 
Website:

JS:

 document.getElementById("service").onchange = function () { if (document.getElementById("service").options[document.getElementById("service").selectedIndex].value == "webdesign") document.getElementById("webname").style.display = "none"; else document.getElementById("webname").style.display = "block"; } 

Aquí está la página de demostración del código anterior: http://jsfiddle.net/w3pGr/