0

Quiero ponerle una seccion a mi formulario, así como los formularios de google, no sé como hacerlo... esto para que cada pregunta del formulario vaya separada.

alguien puede decirme cómo hacerlo sin php. solo con javascript u otro lenguaje.

Mi formulario:

<div class="widget ContactForm" data-version="2" id="ContactForm1"><h3class="title">Formulario de contacto</h3><div class="contact-form-widget">
  <div class="form">

 <form name="contact-form">
        <p></p>
        Nombre<br><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="">
        <p></p>
        Correo electrónico<span style="font-weight: bolder;">*</span><br><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="">
        <p></p>
        Mensaje<span style="font-weight: bolder;">*</span><br>
        <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
        <p></p>
        <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Enviar">
        <p></p>
        <div style="text-align: center; max-width: 222px; width: 100%">
           <p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
           <p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
        </div>
     </form>
  </div>

introducir la descripción de la imagen aquí

1 respuesta 1

2

Lo puedes hacer del siguiente modo:

Paso 1: Crearemos el archivo index.html. Aquí incluiremos todo el HTML necesario para que se muestre nuestro formulario. Para ello debemos incluir las librerías de Bootstrap y de jQuery. Sin ellas, nada de esto funcionará.

Paso 2: Implementamos el código HTML para todos los pasos de nuestro formulario de múltiples pasos, y lo añadimos al archivo index.html, como te he comentado anteriormente.

Paso 3: Utilizaremos jQuery para esconder y mostrar el fieldset de HTML para la navegación entre pasos. Debes añadir el siguiente código dentro del footer del archivo index.html

Ejemplo:

$(document).ready(function(){
  var current = 1,current_step,next_step,steps;
  steps = $("fieldset").length;
  $(".next").click(function(){
    current_step = $(this).parent();
    next_step = $(this).parent().next();
    next_step.show();
    current_step.hide();
    setProgressBar(++current);
  });
  $(".previous").click(function(){
    current_step = $(this).parent();
    next_step = $(this).parent().prev();
    next_step.show();
    current_step.hide();
    setProgressBar(--current);
  });
  setProgressBar(current);
  // Change progress bar action
  function setProgressBar(curStep){
    var percent = parseFloat(100 / steps) * curStep;
    percent = percent.toFixed();
    $(".progress-bar")
      .css("width",percent+"%")
      .html(percent+"%");   
  }
});
#regiration_form fieldset:not(:first-of-type) {
    display: none;
  }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  
  <div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <form id="regiration_form" novalidate action="action.php"  method="post">
  <fieldset>
    <h2>Step 1: Create your account</h2>
    <div class="form-group">
    <label for="email">Email address</label>
    <input type="email" class="form-control" id="email" name="email" placeholder="Email">
    </div>
    <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="password" placeholder="Password">
    </div>
    <input type="button" name="password" class="next btn btn-info" value="Next" />
  </fieldset>
  <fieldset>
    <h2> Step 2: Add Personnel Details</h2>
    <div class="form-group">
    <label for="fName">First Name</label>
    <input type="text" class="form-control" name="fName" id="fName" placeholder="First Name">
    </div>
    <div class="form-group">
    <label for="lName">Last Name</label>
    <input type="text" class="form-control" name="lName" id="lName" placeholder="Last Name">
    </div>
    <input type="button" name="previous" class="previous btn btn-default" value="Previous" />
    <input type="button" name="next" class="next btn btn-info" value="Next" />
  </fieldset>
  <fieldset>
    <h2>Step 3: Contact Information</h2>
    <div class="form-group">
    <label for="mob">Mobile Number</label>
    <input type="text" class="form-control" id="mob" placeholder="Mobile Number">
    </div>
    <div class="form-group">
    <label for="address">Address</label>
    <textarea  class="form-control" name="address" placeholder="Communication Address"></textarea>
    </div>
    <input type="button" name="previous" class="previous btn btn-default" value="Previous" />
    <input type="submit" name="submit" class="submit btn btn-success" value="Submit" />
  </fieldset>
  </form>

Saludos!

4
  • No puedo usar php
    – code2018
    el 8 nov. 2018 a las 0:15
  • @code2018 No estoy usando php en este código. Los archivos son .php pero tranquilamente lo cambias por .html y es lo mismo.
    – Fran Islas
    el 8 nov. 2018 a las 0:18
  • es un blog de blogger... ya todo está hecho. por ejemplo ese div que pusiste con la clase form-group dentro de ese div es donde debo meter los input no?
    – code2018
    el 8 nov. 2018 a las 0:22
  • @code2018 exacto. Puedes leer la documentación de bootstrap para entender como usar las clases en los formularios. Cada fieldset sería una etapa. Puedes agregarle o sacarle inputs según sea tu necesidad. Saludos!
    – Fran Islas
    el 8 nov. 2018 a las 0:28

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.