TinyLetter WordPress Plugin

While I haven’t tested it, a commenter below states that TinyLetter is forcing a captcha on all new signups, which would make this tutorial no longer valid.

Okay so right off the bat this is not a WordPress plugin. What follows is a simple tutorial on how you can use jQuery to easily implement a nice confirmation message for TinyLetter form submissions. In fact, this would work on any site, it doesn’t even have to be WP-powered.

If enough support comes through in the comments and Google+, though, I will put this all into a plugin. Free of charge. But I don’t want to mess around with something if people won’t be able to use or find it.

Anyway, here we go. This tutorial should be easily followable by anyone who can edit their theme’s files, and will approach things from a very thorough standpoint. If you’re comfortable writing HTML, CSS and jQuery, just check out the summary below.

Your TinyLetter Form

Your TinyLetter form code will look something like this when you grab it from your account (FYI, login to TinyLetter, click “Share” and that’s where you get the code):

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="https://tinyletter.com/USERNAME" method="post" target="popupwindow" onsubmit="window.open('https://tinyletter.com/USERNAME', 'popupwindow', 'scrollbars=yes,width=800,height=600');return true">
<p><label for="tlemail">Enter your email address</label></p>
<p><input type="text" style="width:140px" name="email" id="tlemail" /></p>
<input type="hidden" value="1" name="embed"/>
<input type="submit" value="Subscribe" />
<p><a href="https://tinyletter.com" target="_blank">powered by TinyLetter</a></p>
</form>

Let’s simplify that a bit:

<form action="https://tinyletter.com/USERNAME" method="post" target="popupwindow" onsubmit="window.open('https://tinyletter.com/USERNAME', 'popupwindow', 'scrollbars=yes,width=800,height=600');return true">
<label>Signup for Our Newsletter</label>
<input type="email" placeholder="Your Email Address" name="email" />
<input type="hidden" value="1" name="embed"/>
<button type="submit">Subscribe</button>
</form>

Why? Well, we don’t need to have TinyLetter add styles and extraneous stuff like a link back to their website to our form. Your theme should handle styling forms, and even if it doesn’t, the likelihood that TinyLetter’s styles are going to match your site is pretty slim. Feel free to play around with the CSS on your own.

Next, we’ll modify our form even further:

<form action="https://tinyletter.com/USERNAME" method="post" target="tinyletterhider" class="tinyletter-form">
<label>Signup for Our Newsletter</label>
<input type="email" placeholder="Your Email Address" name="email" />
<span class="tinyletter-confirmation">You're almost done! Check your email to confirm subscription.</span>
<input type="hidden" value="1" name="embed"/>
<button type="submit">Subscribe</button>
</form><iframe class="tinyletterhider" name="tinyletterhider"></iframe>

Outside of the form itself, I’ve created an iframe here:

<iframe class="tinyletterhider" name="tinyletterhider"></iframe>

The iframe allows us to submit the form, without the popup but still have everything go through as necessary.

Here I’ve changed target="popupwindow" from the original form to target="tinyletterhider". This works with the iframe mentioned above so we can avoid the popup window with the TinyLetter confirmation displayed inside.

Next, I’ve removed this entirely:

onsubmit="window.open('https://tinyletter.com/USERNAME', 'popupwindow', 'scrollbars=yes,width=800,height=600');return true"

We’ve also given the form itself a class of “tinyletter-form” via class="tinyletter-form"

Finally, I add in some confirmation text with <span class="tinyletter-confirmation">You're almost done! Check your email to confirm subscription.</span>.

Okay so that’s our HTML all modified up. Next we need a little CSS. You can add this in your theme’s style.css file.

.tinyletterhider {width:1px; height:1px; overflow:hidden; position:absolute; left:-99999em; visibility:hidden; top:0;}
.tinyletter-confirmation {display:none; float: left; margin:20px 0; background: green; padding: 20px; color: white; text-shadow: 1px 0 0 black; border-radius: 2px;}

There we hide the iframe we’ve added in the .tinyletterhider {} CSS. You can edit anything in the .tinyletter-confirmation {} CSS except for display:none;.

Our CSS is all set, now let’s look at the jQuery we need.

First, make sure your site is calling jQuery somewhere in the source code (ie, View Source in your browser, and then search for jquery.js and/or jquery.min.js). If it isn’t, here’s how to load jQuery correctly within WordPress.

Then, you’ll need to add a few lines of jQuery code. If you knew what you were doing, you could add this to an existing file serving up jQuery. If you don’t, open up your footer.php file and, below the call to wp_footer(), add the following:

<script type="text/javascript">jQuery(document).ready(function($) {
$( '.tinyletter-form' ).submit(function() {
$('.fieldtogglization').hide();
$('.tinyletter-confirmation').slideDown();
});
});</script>

To Summarize

Okay so the quick version of how to do this.

1. Use this HTML:

<form action="https://tinyletter.com/USERNAME" method="post" target="tinyletterhider" class="tinyletter-form">
<label>Signup for Our Newsletter</label>
<input type="email" placeholder="Your Email Address" name="email" />
<span class="tinyletter-confirmation">You're almost done! Check your email to confirm subscription.</span>
<input type="hidden" value="1" name="embed"/>
<button type="submit">Subscribe</button>
</form><iframe class="tinyletterhider" name="tinyletterhider"></iframe>

2. Use this CSS:

.tinyletterhider {width:1px; height:1px; overflow:hidden; position:absolute; left:-99999em; visibility:hidden; top:0;}
.tinyletter-confirmation {display:none; float: left; margin:20px 0; background: green; padding: 20px; color: white; text-shadow: 1px 0 0 black; border-radius: 2px;}

3. Use this jQuery:

jQuery(document).ready(function($) {
$( '.tinyletter-form' ).submit(function() {
$('.fieldtogglization').hide();
$('.tinyletter-confirmation').slideDown();
});
});

Up Next: Woocommerce Tax Rates for Allegheny County and Pittsburgh, Pennsylvania