Mailtrap is awesome for development and testing, that provides a fake SMTP server for your development team to test, view and share emails sent from the pre-production environments and test with real data without the risk of spamming real customers.
Various pricing options but of course we’re gonna just speak the free one that allows us to use just one in boxes that all we need a maximum of fifty messages insight per inbox no team member so where’d you only one that he can use this and two emails in boxes so we could have potentially two different emails to test.
1. Register via https://mailtrap.io/register/signup?header
Verify if necessary
2.After login with sign in details access your inboxes via https://mailtrap.io/inboxes
3.Store the SMTP credentials somewhere safe (Select SMTP settings->Integrations->WordPress)
4.You can configure WordPress SMTP by using this code at WordPress active theme functions.php file.
|
1 2 3 4 5 6 7 8 9 10 |
function mailtrap($phpmailer) { $phpmailer->isSMTP(); $phpmailer->Host = 'smtp.mailtrap.io'; $phpmailer->SMTPAuth = true; $phpmailer->Port = 2525; $phpmailer->Username = '617ecd7a5cebb7'; $phpmailer->Password = 'b1bb301c05b593'; } add_action('phpmailer_init', 'mailtrap'); |
5. Here sample simple ajax contact from with WordPress and MailTrap example.
i. Create new file named “mycontact.php” at WordPress active theme directory Ex : /wp-content/themes/twentyseventeen/mycontact.php and add below code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<form id="myContactForm" action="#" method="post" data-url="<?php echo admin_url('admin-ajax.php'); ?>"> <div class="form-group"> <textarea name="message" id="message" class="form-control" placeholder="Your Message"></textarea> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <script type="text/javascript"> jQuery(document).ready( function($){ /* contact form submission */ $('#myContactForm').on('submit', function(e){ alert("myContactForm"); e.preventDefault(); var form = $(this), message = form.find('#message').val(), ajaxurl = form.data('url'); if( message === '' ){ alert("A Message is Required"); //return return false; } $.ajax({ url: ajaxurl, type: 'post', data: { message: message, action: 'send_contact' }, error: function (response) { alert("Error while sending message to admin"); }, success: function (response) { alert("Successfully sent message to admin"); } }); }); }); </script> |
ii.Now add below code to send an email to WordPress admin at active theme functions.php file Ex: /wp-content/themes/twentyseventeen/functions.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
// Contact Form shortcode function my_contact_form( $atts, $content = null ) { //[contact_form] //get the attributes $atts = shortcode_atts( array(), $atts, 'contact_form' ); //return HTML ob_start(); include 'mycontact.php'; return ob_get_clean(); } //add short code add_shortcode( 'contact_form', 'my_contact_form' ); //ajax sent email add_action('wp_ajax_nopriv_send_contact', 'send_contact'); add_action('wp_ajax_sunset_send_contact', 'send_contact'); //send contact function send_contact( $atts, $content = null ) { $title ='Test user'; // send here from contact form $email ='demo@demo.com'; // send here from contact form //init $message = wp_strip_all_tags($_POST['message']); $to = get_bloginfo('admin_email'); $subject = 'My Contact Form - '.$title; //set headers $headers[] = 'From: '.get_bloginfo('name').' <'.$to.'>'; // 'From: Alex <me@alecaddd.com>' $headers[] = 'Reply-To: '.$title.' <'.$email.'>'; $headers[] = 'Content-Type: text/html: charset=UTF-8'; //send email wp_mail($to, $subject, $message, $headers); //exit exit(1); } function mailtrap($phpmailer) { $phpmailer->isSMTP(); $phpmailer->Host = 'smtp.mailtrap.io'; $phpmailer->SMTPAuth = true; $phpmailer->Port = 2525; $phpmailer->Username = '617ecd7a5cebb7'; $phpmailer->Password = 'b1bb301c05b593'; } add_action('phpmailer_init', 'mailtrap'); |
iii. Now add “[contact_form]” shortcode to wordpress page/post.
iv. Now access the contact page and send message. Ex : http://localhost/wordpress/index.php/contact/
v. Its appear in mailtrap demo account.
