entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

Como hacer formulario en jQuery para enviar a un email.

Hola a todos, necesito por favor alguien que me ayude... resulta que tengo este formulario asi como lo ven abajo ya armado con html y css pero ahora necesito lo mas importante, que funcione jaja :) este formulario tiene que llegar a una cuenta de email (ej [email protected]) yo lo queria hacer todo el funcionamiento por jQuery, pero como ven estoy nobato en esto. Aca le dejo el html que tengo hecho y debajo la imagen del formulario como esta hecho, es un formulario para adquirir un servicio. Desde ya, el que pueda ayudarme estare muy agradecido. Gracias por su tiempo.

<form id="appointment" method="post"  action="appointment.php">
                <text style="margin-left:20px; text-align:left; font-size:32px; color:#fff; font-family:oswald">Appointment Form</text></br><text style="margin-left:20px; text-align:left; font-size:18px; color:#fff; font-family:oswald; font-style:italic;">Schedule an appointment online with CD Carpet Care in Los Angeles, CA or feel free to call us at (951)398-0303</text></br></br>
                <input type="text" class="field" id="appointment_name" name="name" placeholder="Name" required /></br>
                <input type="email" class="field" id="appointment_email" name="email" placeholder="Email" /></br>
                <input type="tel" class="field" id="appointment_telephone" name="telephone" placeholder="Telephone" required /></br>
                <input type="text" class="field2" id="appointment_address1" name="address1" placeholder="Address 1" required /></br>
                <input type="text" class="field2" id="appointment_address2" name="address2" placeholder="Address 2" /></br>
                <input type="text" class="field" id="appointment_city" name="city" placeholder="City" required /></br>
                <div id="servicesCheckbox">
                <text style="text-align:left; font-size:18px; color:#F1F2EB; font-family:oswald;">Service list, please check one or more options.</text></br>
                    <input class="checkbox" id="check-1" type="checkbox" name="serv1" value="24 Hours emergency service" >
                    <label style="margin-right:50px;" tabindex="1" for="check-1" class="checkbox-label">24 Hours emergency service</label>
                    <input class="checkbox" id="check-7" type="checkbox" name="serv2" value="Drapery cleaning" >
                    <label tabindex="7" for="check-7" class="checkbox-label">Drapery cleaning</label></br>
                    <input class="checkbox" id="check-2" type="checkbox" name="serv3" value="Tile & grout cleaning" >
                    <label style="margin-right:97px;" tabindex="2" for="check-2" class="checkbox-label">Tile & grout cleaning</label>
                    <input class="checkbox" id="check-8" type="checkbox" name="serv4" value="Oriental & specialty rug cleaning" >
                    <label tabindex="8" for="check-8" class="checkbox-label">Oriental & specialty rug cleaning</label></br>
                    <input class="checkbox" id="check-3" type="checkbox" name="serv5" value="Windows cleaning" >
                    <label style="margin-right:113px;"tabindex="3" for="check-3" class="checkbox-label">Windows cleaning</label>
                    <input class="checkbox" id="check-9" type="checkbox" name="serv6" value="Carpet stretch repair & restore" >
                    <label tabindex="9" for="check-9" class="checkbox-label">Carpet stretch repair & restore</label></br>
                    <input class="checkbox" id="check-4" type="checkbox" name="serv7" value="Leather restoration" >
                    <label style="margin-right:105px;"tabindex="4" for="check-4" class="checkbox-label">Leather restoration</label>
                    <input class="checkbox" id="check-10" type="checkbox" name="serv8" value="Pet odor removal" >
                    <label style="margin-right:20px;"tabindex="3" tabindex="10" for="check-10" class="checkbox-label">Pet odor removal</label></br>
                    <input class="checkbox" id="check-5" type="checkbox" name="serv9" value="Carpet preconditioning" >
                    <label style="margin-right:81px;"tabindex="5" for="check-5" class="checkbox-label">Carpet preconditioning</label>
                    <input class="checkbox" id="check-11" type="checkbox" name="serv10" value="Dryer vent cleaning" >
                    <label tabindex="11" for="check-11" class="checkbox-label">Dryer vent cleaning</label></br>
                    <input class="checkbox" id="check-6" type="checkbox" name="serv11" value="Pad removal & replacemen" >
                    <label style="margin-right:53px;"tabindex="6" for="check-6" class="checkbox-label">Pad removal & replacement</label>
                    <input class="checkbox" id="check-12" type="checkbox" name="serv12" value="Dryer vent cleaning" >
                    <label tabindex="12" for="check-12" class="checkbox-label">Dryer vent cleaning</label>
                </div> <!-- end services checkboxes -->
                <textarea id="textarea2" rows="5" placeholder="Comment"></textarea>
                <input style="float:right; margin-right:20px" type="submit" class="submit" value="Submit">
                <img alt=""src="img/drop.png" width="104px" height="137px" style="float:right; margin-top:-560px; margin-left:750px;"><!--drop end -->
            </form> <!-- appointment form end -->

enter image description here

carlossevi comentado Dic 17, 2015

¿Dispones de un servidor SMTP para en envío de los correos?

wroque comentado Dic 17, 2015

claro, al parecer usas php, puedes revisar si el postfix este funcionando, o bien establecer una configuración con gmail, solo para realizar pruebas.

1 Respuesta

1voto

MitsuGami Puntos7990
  1. Envías el formulario al backend.
  2. Recibes y validas los datos enviados.
  3. Usas PHPMailer para enviar el email de forma sencilla. Solo necesitas un servidor SMTP; Google tiene uno gratuito con un límite bastante alto de emails diarios, solo necesitas una cuenta gmail.
$('form#sendEmail').on('submit', function(e) {
    $.ajax({
        url: '/url/al/script',
        method: 'post',
        data: $(this).serializeArray()
    }).success(function(response) {
        // hacer algo luego de enviar el email
    }).fail(function (jqxhr, text, error) {
        // manejo de errores
    });
});
<?php
require 'PHPMailerAutoload.php';

$remitente = $_POST["remitente"];
$asunto = $_POST["asunto"];
$mensaje = $_POST["mensaje"];

$mail = new PHPMailer;

$mail->isSMTP();
$mail->Host = 'smtp1.example.com;smtp2.example.com';

$mail->Username = [email protected]';
$mail->Password = 'tucontrasena';
$mail->SMTPSecure = 'tls';
$mail->Host = "smtp.gmail.com";
$mail->Port = 587;

$mail->setFrom([email protected]', $remitente);
$mail->addAddress([email protected]', 'John Doe');

$mail->istHTML = true; // envía el mail como HTML
$mail->Subject = $sujeto;
$mail->Body    = $mensaje;
$mail->AltBody = 'Mensaje en caso no se admita HTML';

$mail->send();

También puedes enviar adjuntos con PHPMailer.

Por favor, accede o regístrate para responder a esta pregunta.

¿Conoces alguien que puede responder?
¡Comparte esta pregunta!


Actividad Reciente

¿Eres Usuario Apple?

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta