Aweber Email Form Styled Like Genesis Newsletter Block

This tutorial provides the code which enables you to add your Aweber email signup form in the header hero section on Essence Pro theme front page like this :

The code creates a reusable block which you can use in any theme and position anywhere using the block or PHP code.

In this example, the button is positioned within the right hand side of the forms input field using a tiny bit of CSS added in step 3 of installation.

Note : You will need to create a free or premium Aweber account before starting the installation steps.

Demo Video

Shows you how to use your Aweber email form in the Essence Pro child theme by StudioPress.

Also includes the PHP code to display your reusable Aweber form block in any WordPress theme.

Installation Steps

There’s 3 steps :

  1. # Login to your Aweber account, navigate to signup forms and create a new form deleting the elements for the header, footer, footer links and name field. Save your form and copy the Raw HTML Version of the code and create a new reusable block from a Custom HTML block or directly on the Reusable Blocks Edit page as seen in the Demo Video.
  2.  

  3. # Upload the blocks.php file to the Essence Pro themes page-templates folder and swap out the page id for your reusable block in the code on line 66. You can find your page ID for your block in this video.
  4.  

  5. # Copy & paste the CSS to the end of your Essence Pro themes style.css file and clear caching.
  6.  

Download Folder

Usage In Any Theme

Swap out the ID with the ID for your reusable block which you can grab from the address bar when you edit your reusable block.

Related Tutorials

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.