Pregunta:
Fecha: 07-08-2017 09:05:47
(En Español)
CODIGO PHP:
CODIGO HTML:
CSS:
Desde ya, gracias por la ayuda!! Votos: 0 - Respuestas: 5 - Vistas: 14 Compartir en: Google Facebook Twitter LinkedIn Link
No me funciona el botón de submit en formulario de contacto html, php, honeypot[Resuelta]
Saludos muchachos!!! Tengo un problema con formulario de contacto html, php honeypot, no me funciona el boton submit.CODIGO PHP:
<?php
// If the form is submitted, send the message.
require_once('./include/phpmailer/class.phpmailer.php');
if (isset($_POST['submit_contact_form']) && empty($_POST['thewall']))
{
$mail = new PHPMailer();
$mail -> IsHTML (true);
$mail -> From = $_POST['email'];
$mail -> FromName = ucwords($_POST['name']);
$mail -> Subject = 'CONTACT FORM SUBJECT';
$mail -> Body = 'Name: '.$_POST['name'].'<br />Email: '.$_POST['email'].'<br />Phone: '.$_POST['asunto'].'<br />message:'.$_POST['message'];
$mail -> AddAddress ('mi@email.com');
if ($mail -> send()) {
header('Location: https://www.mi-web.com/gracias-mensaje.html');
die();
}
else {
echo '<p>Tu mensaje no fue enviado!.</p>';
echo '<pre>';
echo 'Error: '. $mail->ErrorInfo;
echo '</pre>';
echo '<p>Vuelve a la pagina de contacto dando click en <a href="https://www.mi-weby.com/contacto.html">here</a>.';
die();
}
}
?>
CODIGO HTML:
<h1>CONTACTANOS</h1>
<form id="contact_form" action="contactform.php" method="post" accept-charset="UTF-8">
<div class="form-group"><label for="name"></label><input type="text" class="form-control req-1" name="name" id="name" placeholder=" *Tu nombre" /></div>
<div class="form-group"><label for="email"></label><input type="email" class="form-control req-1" name="email" id="email" placeholder=" *Tu e-mail"/></div>
<div class="form-group"><label for="phone"></label><input type="text" class="form-control req-1" name="phone" id="phone" placeholder=" *Asunto" /></div>
<div class="form-group thewall"><label for="thewall"></label><input type="text" class="form-control" name="thewall" /></div>
<div class="form-group"><label for="message"></label><textarea placeholder=" *Escribe Tu Mensaje" class="form-control req-2" name="message" id="message" rows="6"></textarea></div>
<div class="form-group"><input type="submit" class="form-control req-b" name="submit_contact_form" id="submit_contact_form" value="ENVIAR" disabled="disabled" /></div>
<br>
<br>
<br>
<br>
<a href="index.html">Click aqui para regresar al menu</a>
</form>
</div>
<script>
(function() {
$('#contact_form .req').keyup(function() {
var empty = false;
$('#contact_form .req').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#submit_contact_form').attr('disabled', 'disabled');
} else {
$('#submit_contact_form').removeAttr('disabled');
}
});
}
)() $('.alert .close').click(function() {
$('.alert').hide();
}
);
</script>
CSS:
* {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif!important;
}
.thewall {
left: -9999px;
position: absolute;
top: -9999px;
visibility: hidden;
}
::-moz-placeholder {
letter-spacing: 2px;
}
::-ms-input-placeholder {
letter-spacing: 2px;
}
:-moz-placeholder {
letter-spacing: 2px;
}
:-ms-input-placeholder {
letter-spacing: 2px;
}
body {
background: #fff;
}
h1 {
color: #FFDD57;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 45px;
font-size: 25px;
}
.columna-formulario {
background: #252525;
margin: 150px 0 0 700px;
width: 620px;
height: 580px;
}
.req-1 {
width: 536px;
height: 40px;
}
.req-2 {
width: 535px;
height: 135px;
}
.req-b {
margin-top: 100px;
width: 110px;
height: 43px;
background: #FFDD57;
color: #000;
font-style: bold;
border: none;
transition: 0.5s;
}
.req-b:hover {
margin-top: 100px;
width: 110px;
height: 43px;
background: #fff;
color: #FFDD57;
border: none;
transition: 0.5s;
}
a {
text-decoration: none;
color: white;
padding-left: 45px;
}
a:hover {
text-decoration: underline;
color: #FFDD57;
padding-left: 45px;
}
.form-group {
width: 200px;
height: 70px;
padding-left: 45px;
}
Desde ya, gracias por la ayuda!! Votos: 0 - Respuestas: 5 - Vistas: 14 Compartir en: Google Facebook Twitter LinkedIn Link
Respuestas:
-
Fecha: 08-08-2017 05:46:20 Como duda ¿inicias con el botón desactivado y se desactiva cuando sueltas teclas o el form esta lleno? ¿puedes dar mas detalles de lo que hace porfa? por que tal vez el error esta en esa parte que esta desactivado y nunca se activa Votos: 1 - Link respuesta
-
Fecha: 08-08-2017 07:41:54 Saludos Ruben
Gracias por tu amable respuesta.
Cuando se digitan todas las casillas y se le intenta dar clic al botón ENVIAR, simplemente cambia de color pero no realiza la acción de envío, te adjunte un video de la situación:
https://www.screencast.com/t/9jtUpCwQ
Gracias y quedo atento. Votos: 0 - Link respuesta -
Fecha: 08-08-2017 09:19:15 Que tal mira con tu formulario te muestro una forma de validar lo hago de esta manera
con jquery queda así
<script> $(document).ready(function(){ // se hace el evento del boton $("#submit_contact_form").click(function(){ // llama a la funcion validarForm si retorna false no muestra // el alert de hacer lo necesario if(validarForm()){ alert ("hacer lo necesario") } }); }); //Esta funcion lo que hace es que va verificando que los campos tengan datos // de no tener datos manda un alert con un mensaje especifico y coloca el cursor // en dicho campo function validarForm(){ $('*').removeClass('valida-error'); if ($('#name').val() == "") { alert('es necesario el nombre.'); $('#name').addClass('valida-error').focus(); return false; }else if ($('#email').val() == "") { alert('es necesario el email.'); $('#email').addClass('valida-error').focus(); return false; }else if ($('#phone').val() == "") { alert('es necesario el phone.'); $('#phone').addClass('valida-error').focus(); return false; } else { return true; } } </script>
Y tu formulario el sumbit lo hice boton y quite el action del form ya que el evento se realizaria con jquery
<h1>CONTACTANOS</h1> <form id="contact_form" action="contactform.php" method="post" accept-charset="UTF-8"> <div class="form-group"><label for="name"></label><input type="text" class="form-control req-1" name="name" id="name" placeholder=" *Tu nombre" /></div> <div class="form-group"><label for="email"></label><input type="email" class="form-control req-1" name="email" id="email" placeholder=" *Tu e-mail"/></div> <div class="form-group"><label for="phone"></label><input type="text" class="form-control req-1" name="phone" id="phone" placeholder=" *Asunto" /></div> <div class="form-group thewall"><label for="thewall"></label><input type="text" class="form-control" name="thewall" /></div> <div class="form-group"><label for="message"></label><textarea placeholder=" *Escribe Tu Mensaje" class="form-control req-2" name="message" id="message" rows="6"></textarea></div> <div class="form-group"><input type="botton" class="form-control req-b" name="submit_contact_form" id="submit_contact_form" value="ENVIAR" /></div> <br> <br> <br> <br> <a href="index.html">Click aqui para regresar al menu</a> </form> </div>
Esta forma es la que uso ya que así el sistema le avisa al usuario que falta o donde esta el error, Quedo a espera de comentarios espero pueda ayudarte Votos: 1 - Link respuesta -
Fecha: 08-08-2017 13:28:06 Gracias Ruben, voy a instalarlo y te comento como me va con el!! Votos: 0 - Link respuesta
-
Fecha: 14-08-2017 10:18:56 Hola Ruben, gracias por tu ayuda, quedo OK.
Bendiciones!! Votos: 2 - Link respuesta
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión
