There are some forum posts about customizing ajax registration of Newsletter plugin but these solutions aren’t complete (for example activation emails aren’t supported). Here you can find my code with instructions.
Now back to the business… Copy the content of the four files pasted on my gist to your (child) template files and install Newsletter plugin.
Files you’ll need to edit or create:
- style.css – add form styles, tweak it to your needs.
- main.js – add ajax support for your form.
- functions.php – add vars needed by ajax form and ajax hook to register new subscriber.
- newsletterForm.php – create this file in your template directory, use <?php get_template_part( ‘newsletterForm’ ); ?> to include it in your selected place.
My template with all files:
Download on Github.
Source code:
<?php
/** @constant string THEME_NAME **/
define( 'THEME_NAME', get_option('stylesheet') );
/**
* Custom script
*/
function my_scripts_method() {
wp_enqueue_script(
'custom-script',
get_stylesheet_directory_uri() . '/js/main.js',
array( 'jquery' ),
'1.2'
);
if ( !is_admin() ) {
/** */
wp_localize_script( 'custom-script', 'ajax', array(
'url' => admin_url( 'admin-ajax.php' ),
'ajax_nonce' => wp_create_nonce( 'noncy_nonce' ),
'assets_url' => get_stylesheet_directory_uri(),
) );
}
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
/**
* Ajax newsletter
*
* @url http://www.thenewsletterplugin.com/forums/topic/ajax-subscription
*/
function realhero_ajax_subscribe() {
check_ajax_referer( 'noncy_nonce', 'nonce' );
$data = urldecode( $_POST['data'] );
if ( !empty( $data ) ) :
$data_array = explode( "&", $data );
$fields = [];
foreach ( $data_array as $array ) :
$array = explode( "=", $array );
$fields[ $array[0] ] = $array[1];
endforeach;
endif;
if ( !empty( $fields ) ) :
global $wpdb;
// check if already exists
/** @var int $count **/
$count = $wpdb->get_var( $wpdb->prepare("SELECT COUNT(*) FROM {$wpdb->prefix}newsletter WHERE email = %s", $fields['ne'] ) );
if( $count > 0 ) {
$output = array(
'status' => 'error',
'msg' => __( 'Already in a database.', THEME_NAME )
);
} elseif( !defined( 'NEWSLETTER_VERSION' ) ) {
$output = array(
'status' => 'error',
'msg' => __( 'Please install & activate newsletter plugin.', THEME_NAME )
);
} else {
/**
* Generate token
*/
/** @var string $token */
$token = wp_generate_password( rand( 10, 50 ), false );
$wpdb->insert( $wpdb->prefix . 'newsletter', array(
'email' => $fields['ne'],
'status' => $fields['na'],
'http_referer' => $fields['nhr'],
'token' => $token,
)
);
$opts = get_option('newsletter');
$opt_in = (int) $opts['noconfirmation'];
// This means that double opt in is enabled
// so we need to send activation e-mail
if ($opt_in == 0) {
$newsletter = Newsletter::instance();
$user = NewsletterUsers::instance()->get_user( $wpdb->insert_id );
NewsletterSubscription::instance()->mail($user->email, $newsletter->replace($opts['confirmation_subject'], $user), $newsletter->replace($opts['confirmation_message'], $user));
}
$output = array(
'status' => 'success',
'msg' => __( 'Thank you!', THEME_NAME )
);
}
else :
$output = array(
'status' => 'error',
'msg' => __( 'An Error occurred. Please try again later.', THEME_NAME )
);
endif;
wp_send_json( $output );
}
add_action( 'wp_ajax_realhero_subscribe', 'realhero_ajax_subscribe' );
add_action( 'wp_ajax_nopriv_realhero_subscribe', 'realhero_ajax_subscribe' );
File: main.js
————-
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
};
jQuery(function($){
// now you can use jQuery code here with $ shortcut formatting
// this executes immediately – before the page finishes loading
/**
* Newsletter support
*/
$('#newsletter')
.attr('novalidate', true)
.each( function() {
var $this = $(this),
$input = $this.find( 'input[name="ne"]'),
$noti = $input.prev(),
$submit = $this.find( 'input[type="submit"]'),
showNoti = function(txt) {
var $msg = $noti.clone();
$noti.before($msg);
$noti.remove();
$msg.text( txt ).addClass('vaporize').attr('aria-hidden', 'false');
},
success = function() {
$this
.fadeOut('slow', function() {
$this.replaceWith( '<p class="appear-nicely dynamic-msg">Thank you!</p>' );
});
};
// Submit handler
$this.submit( function(e) {
var serializedData = $this.serialize();
$noti = $input.prev();
console.log( 'INFO: Form submit.' );
e.preventDefault();
// validate
if( validateEmail( $input.val() ) ) {
var data = {};
// Prepare ajax data
data = {
action: 'realhero_subscribe',
nonce: ajax.ajax_nonce,
data: serializedData
}
// send ajax request
$.ajax({
method: "POST",
url: ajax.url,
data: data,
beforeSend: function() {
$input.prop( 'disabled', true );
$submit.val('Wait').prop( 'disabled', true );
},
success: function( data ) {
if( data.status == 'success' ) {
success();
console.log( 'INFO: OK!' );
} else {
$input.prop( 'disabled', false );
$submit.val('Submit').prop( 'disabled', false );
showNoti( data.msg );
console.log( 'INFO: Bad response.' );
}
}
});
console.log( 'INFO: Email ok.' );
} else {
showNoti( 'Enter valid e-mail address!' );
};
});
});
});
File: newsletterForm.php
————————
<aside id="newsletter-form">
<div>
<h1 class="widget-title">Newsletter</h1>
<div class="widget">
<p>Be upddated!</p>
</div><!–
–><div class="widget">
<form id="newsletter" role="form" method="get" class="search-form" action="http://domain.com/">
<label>
<span class="screen-reader-text">E-mail:</span>
<span class="notification" aria-hidden="true"></span>
<input class="email-field" placeholder="Type your e-mail" value="" name="ne" type="email">
</label>
<input type="hidden" name="na" value="S">
<input type="hidden" name="nhr" value="<?php echo get_bloginfo( 'url' ) ?>">
<input class="email-submit" value="Submit" type="submit">
</form>
</div>
</div>
</aside><!– #newsletter-form –>
File: style.css
—————
/**
* Newsletter form
*/
@keyframes appear-nicely {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.appear-nicely {
animation: appear-nicely 2s forwards ease-out;
}
#wolontariat #newsletter-form {
background-color: #24282d;
padding: 32px 40px;
margin-left: -40px;
box-sizing: content-box;
width: 100%;
color: White;
text-align: center;
position: relative;
}
#wolontariat #newsletter-form > div {
max-width: 1000px;
margin: 0 auto;
}
#wolontariat #newsletter-form h1 {
color: White;
}
#wolontariat #newsletter-form .widget {
float: none;
width: 100%;
display: inline-block;
margin: 0 0;
padding: 16px;
box-sizing: border-box;
vertical-align: middle;
}
#wolontariat #newsletter-form .widget p img {
vertical-align: middle;
}
#wolontariat #newsletter-form .widget .disclaimer {
padding: 0 0;
margin: 10px 0 0 0;
font-size: .625rem;
}
#wolontariat #newsletter-form .email-submit {
min-width: 100%;
margin-top: 16px;
}
@keyframes vaporize {
0% {
opacity: 1;
}
100% {
opacity: 0;
top: -80px;
}
}
#wolontariat #newsletter-form .notification[aria-hidden="true"] {
display: none;
}
#wolontariat #newsletter-form .notification[aria-hidden="false"] {
display: block;
position: absolute;
top: -25px;
left: 0px;
}
.vaporize {
animation: vaporize 1.5s forwards ease-out;
}
</code></pre>
<p>
Thank you so much for this!! It helped me a lot
I’m very thankful for this solution. Unfortunately, it isn’t completely flawless; it adds subscribers to the database but it doesn’t send confirmation e-mails to these subscribers if double opt-in is enabled. Is there any solution to this? My PHP knowledge is too limited to figure this out myself (despite trying). 🙁
Hi! I don’t remember how I did this but I believe that also e-mails worked for me. I’ll try to find source code of this website and help you.
Thanks. Just for the records: I don’t see any server errors in the log file; and as far as I can analyze it I could trace it down to this section in the PHP code:
if ($opt_in == 0) {
$newsletter = Newsletter::instance();
$user = NewsletterUsers::instance()->get_user( $wpdb->insert_id );
NewsletterSubscription::instance()->mail($user->email, $newsletter->replace($opts['confirmation_subject'], $user), $newsletter->replace($opts['confirmation_message'], $user));
}
I have double opt-in activated and it does return zero, so the function should fire. But from there on I’m clueless.
And it doesn’t make a difference whether SMTP in the Newsletter plugin is active or inactive.
As said, it works if I use the standard form that comes with the Newsletter plugin, but not with this AJAX form, so there must be something to it.
OK, I found something else: looking at the debug log after registering for a newsletter I see this entry:
Also, looking at this line:
NewsletterSubscription::instance()->mail($user->email, $newsletter->replace($opts['confirmation_subject'], $user), $newsletter->replace($opts['confirmation_message'], $user));
am I right in assuming that it isn’t even sending the email through SMTP?
Cześć chłopaki!
Czy problem z e-mailem aktywacyjnym wciąż istnieje?
Hej,
Ja niestety nie miałem czasu już podjąć tematu więc nie sprawdzałem… Ale jak masz rozwiązanie to podeślij, opublikuję i napiszę kto jest autorem (z linkiem).
This is lovely, but couldn’t this be achieved using a simple JS script to AJAXify the form + enabling the Newsletter API?
Seems like a simpler solution to the issue.