PHP e finestre modali di Bootstrap

In questo tutorial vedremo come gestire i link mailto con PHP e le finestre modali di Bootstrap.

Vogliamo fare in modo che quando viene cliccato uno di questi link si apra una finestra modale di Bootstrap con un form per l'invio dell'e-mail.

La nostra finestra modale avrà questa struttura HTML:

<div class="modal" tabindex="-1" role="dialog" id="modal-contact">
            <div class="modal-dialog" role="document">
                <form action="" method="post" id="modal-contact-form" novalidate>
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Send Message</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="to">To</label>
                            <input type="text" name="to" id="to" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="subject">Subject</label>
                            <input type="text" name="subject" id="subject" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="message">Message</label>
                            <textarea name="message" id="message" class="form-control" rows="7"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Send</button>
                    </div>
                </div>
                </form>
            </div>
        </div>

Il form verrà inviato con AJAX. Definiamo quindi il codice PHP che andrà a gestire la richiesta.

header('Content-Type: application/json');

$to = trim($_POST['to']);
$subject = trim($_POST['subject']);
$message = trim($_POST['message']);

$output = [];
$errors = [];

if(empty($subject)) {
    $errors[] = ['param' => 'subject', 'msg' => 'Required field.'];
}

if(!filter_var($to, FILTER_VALIDATE_EMAIL)) {
    $errors[] = ['param' => 'to', 'msg' => 'Invalid e-mail.'];
}

if(empty($message)) {
    $errors[] = ['param' => 'message', 'msg' => 'Required field.'];
}

if(count($errors) > 0) {
    $output['errors'] = $errors;
} else {
    mail($to,
        strip_tags($subject),
        strip_tags($message),
        "From: Site <info@site.tld>\r\n");
    $output['success'] = 'Message successfully sent.';
}

echo json_encode($output);
exit;

Il codice restituisce un oggetto JSON che conterrà un array di messaggi di errore in caso di validazione fallita o un messaggio di avvenuto invio.

Con jQuery dobbiamo fare in modo che al click su un link, il campo to del form riceva il valore corretto e che venga mostrata la finestra modale.

var $modal = $( "#modal-contact" );
var $form = $( "#modal-contact-form" );
var $emailLinks = $( "a[href^='mailto:']" );

$emailLinks.click(function() {
  var $a = $( this );
  $form.find( "#to" ).val( $a.attr( "href" ).replace( "mailto:", "" ) );
  $modal.modal( "show" );
  return false;
});

Quindi intercettiamo l'evento di chiusura della finestra per resettare il form.

$modal.on( "hidden.bs.modal", function () {
   $form[0].reset();
   $form.find( ".alert" ).remove();
});

Infine, gestiamo l'invio della richiesta e la risposta ricevuta da PHP.

$form.on( "submit", function( e ) {
  e.preventDefault();
  $form.find( ".alert" ).remove();
  $.post( "ajax.php", $form.serialize(), function( res ) {
      if( res.errors ) {
          $.each( res.errors, function( i, err ) {
              $( "#" + err.param ).after( '<div class="alert alert-danger mt-4">' + err.msg + '</div>' );
          });
      } else if( res.success ) {
          $form.find( ".modal-body" ).append( '<div class="alert alert-success mt-4">' + res.success + '</div>');
      }
  });
});