1

Quiero separar los datos de la parte izquierda, del formulario, meter cada uno en un cuadro, un div diferente con ese fondo transparente que están y soy incapaz. Hice varias pruebas sin éxito. Tampoco soy capaz de centrar verticalmente los datos personales. ¿ Que debo cambiar para conseguirlo ? Dejo muestra de lo conseguido hasta ahora. Gracias.

$(function()
{
    function after_form_submitted(data) 
    {
        if(data.result == 'success')
        {
            $('form#reused_form').hide();
            $('#success_message').show();
            $('#error_message').hide();
        }
        else
        {
            $('#error_message').append('<ul></ul>');

            jQuery.each(data.errors,function(key,val)
            {
                $('#error_message ul').append('<li>'+key+':'+val+'</li>');
            });
            $('#success_message').hide();
            $('#error_message').show();

            //reverse the response on the button
            $('button[type="button"]', $form).each(function()
            {
                $btn = $(this);
                label = $btn.prop('orig_label');
                if(label)
                {
                    $btn.prop('type','submit' ); 
                    $btn.text(label);
                    $btn.prop('orig_label','');
                }
            });
            
        }//else
    }

	$('#reused_form').submit(function(e)
      {
        e.preventDefault();

        $form = $(this);
        //show some response on the button
        $('button[type="submit"]', $form).each(function()
        {
            $btn = $(this);
            $btn.prop('type','button' ); 
            $btn.prop('orig_label',$btn.text());
            $btn.text('Enviando ...');
        });
        

                    $.ajax({
                type: "POST",
                url: 'handler.php',
                data: $form.serialize(),
                success: after_form_submitted,
                dataType: 'json' 
            });        
        
      });	
});



$(function()
{
	$('#captcha_reload').on('click',function(e)
	{
	  e.preventDefault();
	  d = new Date();
	  var src = $("img#captcha_image").attr("src");
	  src = src.split(/[?#]/)[0];
	  
	  $("img#captcha_image").attr("src", src+'?'+d.getTime());
	});
});
#form_container
{
	padding:15px 15px;
	margin-top:15px;
	background: rgba(255,255,255,0.75);	
}
body
{
	background-color: #F4EAD5;
	background-image: url("http://i66.tinypic.com/vem2k6.jpg");
	background-size: cover;
}
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Formulario de contacto</title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <link rel="stylesheet" href="form.css" >
        <script src="form.js"></script>
    </head>
    <body >
        <div class="container">
            <div class="row">
                <div class="text-center col-md-5 col-sm-12 col-xs-12" id="form_container">
                    <p>Miguel A. Espeso</p>
                    <p>Olivar, 5</p>
                    <p>05400, La Parra (Avila)</p>
                    <p>Tlf: 920 37 19 47</p>
                    <p>[email protected]</p>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                </div>
                <div class="col-md-7 col-sm-12 col-xs-12" id="form_container">
                    <h2>Contacte</h2> 
                    <p> Comunique sus dudas, esponga lo que necesita y nos pondremos en contacto con usted en menos de 24 horas. </br>Gracias. </p>
                    <form role="form" method="post" id="reused_form">
                        <div class="row">
                            <div class="col-sm-12 form-group">
                                <label for="message"> Mensage:</label>
                                <textarea class="form-control" type="textarea" name="message" id="message" maxlength="6000" rows="7"></textarea>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6 form-group">
                                <label for="name"> Nombre:</label>
                                <input type="text" class="form-control" id="name" name="name" required>
                            </div>
                            <div class="col-sm-6 form-group">
                                <label for="email"> Email:</label>
                                <input type="email" class="form-control" id="email" name="email" required>
                            </div>
                        </div>
                        <div class="row" style="margin-bottom:30px;">
                            <div class="col-sm-5">
                                <img src="captcha.php" id="captcha_image"/>
                                <br/>
                                <a id="captcha_reload" href="#">recargar</a> 
                            </div>
                            <div class="col-sm-6">
                                <label for="email">Ingrese el código de la imagen aquí:</label>
                                <input type="text" class="form-control" required id="captcha" name="captcha" >
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12 form-group">
                                <button type="submit" class="btn btn-lg btn-default pull-right" >Enviar &rarr;</button>
                            </div>
                        </div>
                    </form>
                    <div id="success_message" style="width:100%; height:100%; display:none; "> <h3>Su mensaje se envio con exito</h3> </div>
                    <div id="error_message" style="width:100%; height:100%; display:none; "> <h3>Error</h3> Lo sentimos, hubo un error al enviar tu formulario. </div>
                </div>
            </div>
        </div>
    </body>
</html>

2
  • 1
    No entiendo bien, que quieres separar? Commented el 29 dic. 2017 a las 14:49
  • Hola @Camilo Vasquez, estube todo el dia sin conexion. Lo que necesitaba era lo que me ha propuesto Luis Fernado, solo me queda intentar hacer el formulario mas ancho, a ver si puedo con un ejemplo en que tu me ayudaste en otra ocasion. Gracias, voy a decirle a Luis Fernando.que debo hacer para cambiar el ancho del formuario Commented el 29 dic. 2017 a las 20:07

1 respuesta 1

2

No puedes identificar dos elementos con el mismo id, debe de ser único.

Creo que esto fue lo que entendí.

Nota: Cambie la imagen de fondo porque no tengo acceso desde el trabajo a la que tu tenias.

Saludos.

$(function() {
  function after_form_submitted(data) {
    if (data.result == 'success') {
      $('form#reused_form').hide();
      $('#success_message').show();
      $('#error_message').hide();
    } else {
      $('#error_message').append('<ul></ul>');

      jQuery.each(data.errors, function(key, val) {
        $('#error_message ul').append('<li>' + key + ':' + val + '</li>');
      });
      $('#success_message').hide();
      $('#error_message').show();

      //reverse the response on the button
      $('button[type="button"]', $form).each(function() {
        $btn = $(this);
        label = $btn.prop('orig_label');
        if (label) {
          $btn.prop('type', 'submit');
          $btn.text(label);
          $btn.prop('orig_label', '');
        }
      });

    } //else
  }

  $('#reused_form').submit(function(e) {
    e.preventDefault();

    $form = $(this);
    //show some response on the button
    $('button[type="submit"]', $form).each(function() {
      $btn = $(this);
      $btn.prop('type', 'button');
      $btn.prop('orig_label', $btn.text());
      $btn.text('Enviando ...');
    });


    $.ajax({
      type: "POST",
      url: 'handler.php',
      data: $form.serialize(),
      success: after_form_submitted,
      dataType: 'json'
    });

  });
});



$(function() {
  $('#captcha_reload').on('click', function(e) {
    e.preventDefault();
    d = new Date();
    var src = $("img#captcha_image").attr("src");
    src = src.split(/[?#]/)[0];

    $("img#captcha_image").attr("src", src + '?' + d.getTime());
  });
});
.col-md-5 {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid red;
  padding: 15px;
  margin: 15px 15px 15px 15px;
}

body {
  background-color: #F4EAD5;
  background-image: url("https://placeimg.com/1000/900/people");
  background-size: cover;
}

.row {
  text-align: center;
}
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Formulario de contacto</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="form.css">
  <script src="form.js"></script>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-5">
        <div class="col-md-12">
          <p>Miguel A. Espeso</p>
          <p>Olivar, 5</p>
          <p>05400, La Parra (Avila)</p>
          <p>Tlf: 920 37 19 47</p>
          <p>[email protected]</p>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
        </div>
      </div>
      <div class="col-md-5">
        <div class="col-md-12">

          <h2>Contacte</h2>
          <p> Comunique sus dudas, esponga lo que necesita y nos pondremos en contacto con usted en menos de 24 horas. <br>Gracias. </p>
          <form role="form" method="post" id="reused_form">
            <div class="row">
              <div class="col-sm-12 form-group">
                <label for="message"> Mensage:</label>
                <textarea class="form-control" type="textarea" name="message" id="message" maxlength="6000" rows="7"></textarea>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 form-group">
                <label for="name"> Nombre:</label>
                <input type="text" class="form-control" id="name" name="name" required>
              </div>
              <div class="col-sm-6 form-group">
                <label for="email"> Email:</label>
                <input type="email" class="form-control" id="email" name="email" required>
              </div>
            </div>
            <div class="row" style="margin-bottom:30px;">
              <div class="col-sm-5">
                <img src="captcha.php" id="captcha_image" />
                <br/>
                <a id="captcha_reload" href="#">recargar</a>
              </div>
              <div class="col-sm-6">
                <label for="email">Ingrese el código de la imagen aquí:</label>
                <input type="text" class="form-control" required id="captcha" name="captcha">
              </div>
            </div>
            <div class="row">
              <div class="col-sm-12 form-group">
                <button type="submit" class="btn btn-lg btn-default pull-right">Enviar &rarr;</button>
              </div>
            </div>
          </form>
          <div id="success_message" style="width:100%; height:100%; display:none; ">
            <h3>Su mensaje se envio con exito</h3>
          </div>
          <div id="error_message" style="width:100%; height:100%; display:none; ">
            <h3>Error</h3> Lo sentimos, hubo un error al enviar tu formulario. </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

4
  • Gracias, @Luis Fernando, eso es lo que andaba buscando, pero que debo hacer para hacer mas ancho el formulario...? Commented el 29 dic. 2017 a las 20:09
  • 1
    cambia container por container-fluid
    – Alvarez
    Commented el 29 dic. 2017 a las 20:10
  • Pero queria aumentar la parte derecha, con container-fluid aumenta la parte izquierda. Commented el 29 dic. 2017 a las 20:20
  • Ya di con ello @Luis Fernando , .col-md-7, .col-md-4 { background: rgba(255, 255, 255, 0.75); /*border: 1px solid red;*/ padding: 15px; margin: 15px 15px 15px 15px; } Todo gracias a ti, claro esta. Un saludo Commented el 29 dic. 2017 a las 20:52

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.