This tutorial provides the steps which enable you to add your Aweber signup form anywhere in any theme and style it like you see in the following screenshot on the left.
Using your customizer, you can choose to display an intro description plus email signup form or “Call to Action” buttons which can be modified using custom settings added to your customizer.
No coding required.
Customizer Settings
Custom settings are also added to your customizer to enable the user to choose between displaying 2 buttons side by side ( as seen in the image on the right ) or a email opt-in form.
In this case, we use Aweber and show you ( in the following Demo Video ) how to create a reusable block using code you can copy & paste from the Aweber Raw HTML Version on your Signup Forms page in your Aweber account.
Demo Video
Shows you how to easily create a custom signup form using a free Aweber account so you can copy & paste the form code into a reusable block and use your customizer settings to display the form below your entry header title.
Tested using the Twenty Twenty default theme for WordPress however will work in any WordPress theme if you paste the following function call where you want to display your hero elements.
aweber_intro_description();
Installation Steps
There’s 2 steps :
# Child Theme : Install the folder named twentytwenty-child. This child theme includes custom functions added to the functions.php file, custom CSS added to the style.css file and a modified entry-header.php in the template-parts folder to output the custom functions.
# Reusable Block : Signup for a free Aweber account so you can create a reusable block with Aweber Raw HTML form code pasted as Custom HTML as seen in the demo video. Make sure you name the reusable block Aweber Inline Form without variation.
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 :
# 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.
# 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.
# Copy & paste the CSS to the end of your Essence Pro themes style.css file and clear caching.
Note : This solution assumes you’re using MailChimp API keys in the Genesis Blocks > Settings > Newsletter Block settings.
You can access your reusable blocks page using these steps :
#Find your MailChimp audience I.D and edit the newsletter-optin.json file with the 10 digit mailingList number. On your Reusable blocks page, import the newsletter-optin.json file. Once imported, edit the block to grab the post id from the address bar which you’ll need in step 2.
# Edit the file named blocks.php on line 66 replacing the 83 with the id for your reusable block as seen using the 1st red arrow in the screenshot in step 1. You can then upload the file to your Essence Pro themes blocks folder.