Horizontal Aweber Form | Using CSS

Here is a quick little CSS snippet to create a horizontal Aweber form:

.af-form, .af-form .quirksMode{
	width: 100%;

	min-height: 50px;

	float: left;
	width: 28%;
        min-height: 50px;


Add this to your stylesheet and you will get a horizontal Aweber form.

You can use this CSS with the Aweber html form version or the javascript snippet. Works with both! Enjoy your horizontal Aweber form.

Want a plugin to do this? I have created my own plugin Simple Aweber Integration. I have also added in some extra functionality like adding a horizontal Aweber form at the end of each post. The one right below this text is displayed with the Simple Aweber Integration Plugin.

Subscribe to comments and subscribe to newsletter – Part 2

This is part 2 of my series subscribe to comments and subscribe to newsletter. Check out part 1 subscribe to comments if you havent read it.

Subscribe to Newsletter

I am a big fan of email list building and Aweber. I have written my own plugin Simple Aweber Integration to allow you to easily input your Aweber form in all sorts of shapes and forms into your WordPress site, either automatically at end of posts or pages or with a shortcode wherever you please. I give it away for free

Anyway, one thing that Simple Aweber Integration is missing is the option for readers and people commenting to simply subscribe when they fill out the comment form. After all they are already providing me with name and email there, why not subscribe to my newsletter? The first plugin I tried was: AWeber Web Form Plugin. All nice and good, but the subscribe to newsletter checkbox was not working. I did however find another plugin that almost did the trick:

Aweber Comment Optin

The plugin Aweber Comment OptIn worked almost flawless, except for the positioning of the checkbox and the auto ticking of the checkbox. To fix to these problems was almost identical as to the subscribe to comments. I will walk you trough it step by step.

Automatically checking checkbox in Aweber Comment OptIn

To automatically change the checkbox to a checked default, change line 548 in aweber-comment-optin.php:

$checked_status = (( ! empty( $_COOKIE[‘tgm_aw_checkbox_’ . COOKIEHASH] ) && ‘checked’ == $_COOKIE[‘tgm_aw_checkbox_’ . COOKIEHASH] )or(empty( $_COOKIE[‘tgm_aw_checkbox_’ . COOKIEHASH] ) )) ? true : false;

Aligning Checkbox of Aweber Comment OptIn

I did the same as in the instructions to subscribe to comment: I changed the p-tag to a div-tag and rearranged the label- and input-tag. This all happens on line 552-566:

if ( ‘admin’ == $status ) {
echo ‘<div ‘ . $clear . ‘>’ . $tgm_aw_options[‘admin_text’] . ‘</div>';
elseif ( ‘subscribed’ == $status ) {
echo ‘<div ‘ . $clear . ‘>’ . $tgm_aw_options[‘subscribed_text’] . ‘</div>';
elseif ( ‘pending’ == $status ) {
echo ‘<div ‘ . $clear . ‘>’ . $tgm_aw_options[‘pending_text’] . ‘</div>';
else {
echo ‘<div ‘ . $clear . ‘>';
echo ‘<label for=”tgm_aw_get_subscribed”> <input type=”checkbox” name=”tgm_aw_get_subscribed” id=”tgm-aw-get-subscribed” value=”‘ . esc_attr( $tgm_aw_options[‘check_text’] ) . ‘” style=”width: auto;” ‘ . $checked . ‘ />';
echo  $tgm_aw_options[‘check_text’] . ‘</label>';
echo ‘</div>';

And use the following css in my style.css file from my template to round it up:

margin-top: 50px;
top: -110px;
.tgm-aw-subscribe label[for=tgm_aw_get_subscribed]{
margin: 0;
width: 400px;
.tgm-aw-subscribe input {
margin-right: 10px;

Please note that I included p.form-submit a second time in this part. If you are following from part 1, please just skip the code for p.form-submit.

Voila, we are all done! Please let me know what you think about this post series in the comments below (and sign up while you comment…). If you really enjoyed my post subscribe to newsletter, consider signing up for my newsletter, I will be posting very similar blog posts in the near future.