Question

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

Comments

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

---

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

Answer 1

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.