How to add opt-in forms in WordPress using widgets

One common goal for bloggers and online businesses, is to grow their email list. It helps you with so many other goals, and it’s crucial to making money online.

People sign up for your list through opt-in forms. One simple way to get more sign-ups, is to add forms in multiple places. Have an opt-in form on your about page, in your blog sidebar, in your header, underneath blog posts. Apart from adding the form in page content (e.g. when you add it to your About page), to add opt-in forms anywhere on your site, you need to add Widget areas to your theme.

FTP

First, we’ll get started with setting up your FTP so you can easily edit & upload your theme files. It is possible to edit the functions.php file from the WordPress backend, but doing so often leads to what’s called ‘The White Screen of Death’ in the WordPress community. Editing the functions.php from the WordPress backend adds extra whitespace to the file, which causes the issue of your site only showing a blank, white screen. Using FTP, you can download the file to your computer, edit it, then upload the edited file to your site.

I recommend using FileZilla.

You’ll need a hostname, username and password to login to your site with FTP. The hostname is usually yourdomain.com or ftp.yourdomain.com. The username & password you’ll need to get from your hosting company. Everything you need for FTP, you should have received from your hosting company when you first got your hosting & domain set up, and you can also usually find it in your hosting control panel.

Creating a child theme

Login to your site using FTP. First of all, create a child theme if you haven’t already.

Register widget areas

Most themes already have some widget areas, so check which widget areas you have and see if you can use those or need to add one or more widget areas.

To add a widget area, first you need to ‘register’ the widget area. Open the functions.php file of your child theme.

// Create widget areas
if ( function_exists( 'register_sidebar' ) ) {
 register_sidebar(
 array(
 'name' => __( 'Sidebar'),
 'id' => 'sidebar-1',
 'description' => '',
 'before_widget' => '<aside id="%1$s" class="widget %2$s">',
 'after_widget' => '</aside>',
 'before_title' => '<h1 class="widget-title">',
 'after_title' => '</h1>',
 )
 )
}

If you want to create multiple widget areas, you can do so like this:

// Create widget areas
if ( function_exists( 'register_sidebar' ) ) {
     register_sidebar(
          array(
               'name'=>'Header',
          )
     );
     register_sidebar(
          array(
               'name'=>'Sidebar',
          )
     );
     register_sidebar(
          array(
               'name'=>'Footer',
          )
     );
}

Add the widget area where you want it

Once you’ve registered a widget area, you can insert the area where you want it to be. For example, a header widget area needs to be added to header.php, a sidebar area to sidebar.php, for a widget area underneath single blog posts, add it to single.php. Copy the file you want to add your widget area to, from the parent theme to your child theme, then add the widget area using the code below. Replace ‘Header’ with the name of your widget area.

<?php  // widget if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Header') ) : ?>
/* you can add some text or html to show if there are no widgets in the widget area or if there's some problem with your widget area. */
<?php endif; ?>

Once you’ve made your changes, activate your child theme by going to your WordPress backend, go to Appearance > Themes. Your child theme will be listed here, click Activate.

Now you will be able to see the widget areas you’ve created in the WordPress backend, in Appearance > Widgets. You can add your opt-in forms using the HTML code you can find in your mailing list service, or use a plugin for it.

Add your opt-in form

If you’re using MailChimp, you can find the HTML code by going to Lists and selecting the list you want the form for. Then go to Sign up forms and select Embedded forms, change the options & edit the form to get it how you want it to be. Finally, select the Copy/Paste text area and copy and paste it to your widget area.
Pretty much all other mailing list services also offer a similar way to get the HTML code for your form.

You can also use a plugin to add your opt-in forms. For MailChimp, I like the MailChimp for WordPress plugin.

When you’ve added your form, it may look very plain, you can spruce it up with CSS in your child theme’s style.css file.