Designs By Nick the Geek

Genesis Based WordPress Development and Tutorials for Everyone

Genesis Simple Aweber Form AKA Aweber Box

Since the Generate theme came out people have wanted to integrate Aweber forms into the Generate Box. This is NOT an easy task as the Aweber forms tend to have extra fields and HTML markup that simply will not work well with Generate, or any of the other newer child themes that have a really beautiful subscription conversion interface.

I am in the final steps of building a plugin that will make this much easier. It will still require some CSS edits, but it is minimal and gives gorgeous results, often with no additional markup required.

As you can see here, the Generate box allows the Aweber form with name and email field to fit well. This required only 23 lines of code in the CSS file, which I will provide at the end of this article.
Aweber Box

The interface is nearly identical to the eNews and Updates widget, with the addition of some key fields.

Genesis Simple Aweber Widget Settings

  • Aweber List ID: Replaces the Feedburner ID to target your Aweber list
  • Name Text: Let’s you set the default text for the name field
  • Thank You Page: Lets you select from a drop down list of basic Aweber thank you pages including:
    • Basic Version
    • Audio Version
    • “Smart” Video Version
    • Custom Page
  • Custom URL: Optional field that allows you to specify a custom URL for the thank you page when the “Custom Page” option is selected

Generate Box Recommended CSS

Here is the promised CSS. I will be working up recommended CSS for other child themes as needed. I suggest that this be pasted into the Generate Child theme style.css file at the bottom of the Generate Box section. 

#generate-box .aweber .email, 
#generate-box .aweber .name {
	display: inline;
	margin: 0 2px;
	width: 170px;
}

#generate-box .aweber .name {
	width: 90px
}

#generate-box .aweber #subbox {
	background: none repeat scroll 0 0 transparent;
	border: 0 none;
	box-shadow: none;
	float: left;
	margin: 0;
	padding: 0;
	width: 350px;
}

#generate-box .aweber #subbutton {
	margin: 2px 0;
}

Please note, this plugin and the Generate Theme require the Genesis Theme Framework.

Related Posts

Comments

  1. Nick! You are the man! I love this! I can’t wait to see which other child themes will get this love. Maybe Balance or Decor? Allegra

    • I will be releasing some recommended CSS for the other themes that have “fancy opt-in boxes” like Streamline 2.0, Balance, and Décor. In my initial test, Décor actually does pretty good ot of the box, so I’m not sure if it will need any extra CSS.

      • Hi Nick,

        I am planning on using the Balance theme for a future launch, but I want to put up a coming soon landing page with an aweber opt in to begin. Is this possible with the Balance theme now or do I need something else… a different plug in? The idea is to build a list before the site officially launches. Thanks in advance. I stumbled on your site today and truly happy to find you. It’s especially nice to see Christians doing such great work on the web. 🙂

        Susan

  2. Oooh! I just added it to my Decor site and you’re right, it’s beautiful without any additional edits. Thank you.

  3. Oh, I can’t wait for this to work on the Balance Theme!!! I’ve been trying to get aweber to work on my theme for a week 🙁 Please let me know once you have the tutorial for the balance theme!

    Great job, Nick! And thanks in advance 🙂

    Khairy

    • I’ve worked up the code, I just need to write the tutorial and get a screen shot. I’m on vacation till Monday but it should be up pretty soon after I get back. I tried getting it scheduled before I left, but there was just too much to get done first.

      • have you been able to get the plugin for “balance” working?? I sooooo could use that right now.

        I hired a designer to create a blog design from scratch, after weeks and weeks of back and forth emails, she finally sent me the design…minus the optin forms.

        She wanted to use feedburner and i wanted to use aweber.

        Well she said its close to impossible to include and aweber form with a custom designed opt in box.

        So i just said screw and bought “balance” which is awesome, I’ll have a designer customize it later on but for now, it’ll do just fine. ESPECIALLY if we can get that aweber plugin…

  4. Hi Nick, thanks a lot for the guide !

    I have just started yesterday to work with Genesis Framework.
    I purchased also the Generate Child Theme and with Theme Test Drive,
    I am understanding how I can make my site better.
    One question :
    how can I add an image to the Generate Box?
    See image of my site screenshot below :
    http://imgur.com/msWhP

    Thanks for your help, Nick!
    I really appreciate it.
    🙂

  5. Hi again, is there a quick way for me to edit the plugin so that it only shows the box for the email address? The new Adorable theme box only has space for email, not the name. THANKS in advance.

  7. Nick Your the man!!!

    Thank you I was going crazy trying to figure this out… it would have been nice if Studio press your plugin on the sticky home page of the theme.

    • It might be added to the list of community plugins after it is moved into the WordPress repo and I finish the beta testing on it

  9. Hi,
    This plugin is fantastic, but suddenly it stopped working. Not sure how to tell what’s going on. Now whenever a subscriber tries to subscribe, they get :
    Mailing List Not Active
    This mailing list is not currently active.

    I’ve tried multiple forms.
    Do you think it might be a plugin conflict?
    Any help would be appreciated. (had to restore an old clunky – and far less beautiful – optin form using the text widget.)

      • Hey Nick,

        I’ve searched and searched and can’t find a reference to the answer to Mary’s question.

        I’m having the same problem with the “list not active” and I’ve put in the list id exactly into the “aweber list id” field.

        Could you help me out?

  10. Hey Nick, thanks so much for this man! I have a question – as I have been trying to set this up, I am finding that my “badge” image does not show up anymore on the right-hand side of the box. Is there something I am doing wrong? It shows up with the regular generate plugin.

    • You have to add a text widget with the image html and the title before the Aweber widget. Do not put a title in the Aweber widget.

  11. Thanks so much Nick, for this brilliant kindness to all Genesis users! I installed your plugin in a Generate theme I’m building for a client, and it is a miracle! 🙂

    I followed all the instructions (put the generate badge image code in a text widget with no title) but I’m still have trouble with the positioning of the generate badge image (I’ve already put in a request for help on the support forum) and I’m wondering if this is something that could be integrated into a revised version of your plugin at some point?

    I think StudioPress needs to buy the widget from you and integrate it into the theme so you are paid for your work and their customers are able to make the theme work properly! In the meantime, many desperate people (including me 🙂 would pay for such a plugin.

    • Make sure you put a text widget with the img tag and title into the Generate Box sidebar, then the Aweber Form widget without a title.

  12. Nick this is awesome. It really helped save me tons of time.

    I do however have a similar problem to Amy. Unlike your example picture above, my option box seems to be much wider and thus overlaps the badge on the right. In your example the name field is much shorter.

    Any ideas why that might be?

    Thanks in advance

    Dee J Kumar

  13. Hi Nick, first I like to thanks for the information you provide but after I copy and paste the code into the style.css. It doesn’t work and I can find the widget like the above. And I have tried to the eNew and Update widget but it still doesn’t work, please help!

    Thanks – Ferb – got recommend from SoZo in StudioPress forum.

    • Ferb,

      Please read the entire article. I know it is easy to get distracted by code and pictures so that you miss the download link at the top of the page, but it is there and you must use the plugin you get from the download link to get the widget.

  14. Nick

    Thanks for the plugin. It’s fantastic. Just added it to a site that I’m building and it worked straight off the bat.

    Is there a way of removing the name box from the form?

  15. Nick

    Just seen that you’ve already answered my question in an earlier comment. Not a problem. I’m just pleased that I can use my Aweber account with the Generate theme.

    Awesome stuff, thank you.

  16. Nick — we love the simple aweber plugin, but can’t get it to work with any client side validation … would prefer jquery validate plugin .. how do we use validate.js to check the two text fields on submit? thank you.

    • I can look into jquery validation for a future release but I’m not sure what steps are required for that. I don’t really use Aweber, so I’m not 100% familiar with every detail. Just enough to get basic form submission to work.

  18. Hi Nick, thank you so much for developing this. I freaked out when I bought the theme and realised it wasn’t automatically set up for use with AWeber, so thank God we have Nick The Geek around!!! I’ve installed it, all working as you said it would, I’m having a little problem with the image alignment on the right which sat nicely in position before but now with the new plugin it’s dropped down. Do you have any advice on how to re-position it? You can see it here: http://www.nickellison.net
    Thanks in advance
    Nick

    • you could update the theme css to adjust the position and z-index here

      #generate-box img.alignright {
	position: absolute;
	right: -30px;
	top: 0;
}

  19. Just to add to my last comment, when I first installed the plugin and set it up the image generatebox-badge.png didn’t show at all, so I basically put a text widget above the aweber widget and copied the code from the original default generate box code and pasted it in. That’s how it’s currently set up, if that helps in anyway I don’t know! 🙂

    Text widget:

  20. Hi Nick. Thanks for that, I can’t get it to work unfortunately. What I’ve done is remove the text widget I added because I think that was me just forcing an image in place rather than the original badge showing up.

    So basically since the update the generatebox-badge.png image doesn’t actually show with the header. Any ideas you have would be much appreciated! I’m a bit stuck.
    Thanks
    Nick

  21. Oh, boy, Nick. I am SO confused on this. I have aweber, downloaded the plug in and entered my info in the widget and I get nothing like the screenshot above.

    I am so not computer literate when it comes to css and coding. I can not find ANY where, where I am supposed to enter the code above that you created.

    I purchased the Generate theme mostly for that awesome opt in box at the top, but, as you can see from my website, it looks nothing like the above screenshot.

    Would you, or anyone here, mind helping me with this? I would truly appreciate it.

    Thank you so much in advance. 🙂

    Jhanna

  23. Hey Nick,
    I’m just trying to add an aWeber sign up form to my Generate box on my homepage: http://shyguydatingadvice.com. I’m not currently using the aWeber plugin you created, but I notice that when my homepage loads the text boxes look well styled to match the Generate theme, but when the page finishes loading the text boxes change. What do I need to edit in order that they remain nicely styled? I’ve just added my embedded video and aWeber code directly into a Text widget.
    Thanks for your help!
    Tyler

  24. Hi Nick, I really appreciate your work with the generate box, and linking it up to aweber! I’ve changed the design significantly (I think), but am having a layout / formatting problem that I just can’t figure out.

    If you look at my site (http://megwinget.com)(right now it’s Jan 16 @ 8:22PM – it might change subsequently) you’ll see immediately what the problem is. How can I get the pink box to the bottom of the generate box space? I’ve tried changing the margin and nothing whatsoever makes it move from 20px from the top of the generate box. Is it possible to move it to the bottom?

    I’ll update if I end up figuring it out, but I don’t have high hopes! 🙁

    Thanks for looking at it!

    –Meg

  25. Thanks Nick for great out of the box plug in .. so easy!

    Anyway we can ‘centre’ align the title ? (not the image)

    cheers

      • Hi Nick,
        Thanks for a great plugin. This thing is sweet!
        I have the same request as a few others – how to remove the “Name” field for the optin form.
        From your response on June 8th it sounds like that is not possible with your plugin and we should use a completely separate plugin. Is that correct?
        Thanks!
        Drew

  27. Nick I tried using the genesis simple form beta however the text box isn’t aligned properly.? How can I edited that? Let me know.

  28. Hey Nick

    I used your plugin to use it with aweber in and it works, however the sign in box isn’t properly fitting in the outside borders of the box. How do I go about correcting this?

  29. Thank you very much for the plug-in. I had an issue with the badge not showing up. I fixed it after reading your comments. Perhaps, you could update the post with the badge instructions. It would be useful and could prevent minor heart attacks for people like me. :-).

  31. Hi, Nick

    Great plugin and theme btw, absolutely love it. I have changed the text hyperlinks colour on my website but the opt-in box stands out and doesn’t fit in with my theme. Is there a way I change the hexadecimal code from orange to red for the box? Thanks.

    Yvonne.

  32. Thanks so much, Nick, for your excellent solution. I’m not a coder at all and I was so surprised that the Generate theme I purchased did not come ready-to-go and capable of handling the Generate Box that is shown in the demo. Yikes. I spent a lot of time trying to figure it out, and other people have blogs/videos saying what to do, and for months I have had problems getting the submit button to be on the same line as the email address box (I use aweber). I found your solution today. Now, with great relief and thanks to you, I have a Generate Box that looks good and that works great. Whew! Thank you!