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
    Commented 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
    Commented 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
    Commented 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
    Commented el 8 nov. 2018 a las 0:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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