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 →</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>