Horizontal Genesis eNews E-Mail Opt In Subscribe Box Inline

In this tutorial, i’ll provide a very simple beginners guide about how to make a horizontal email subscribe box like this basic example:

There’s only 2 classes you should ever need to modify to display your subscribe box inline with the button.

1. Input Field ( For email address )

.enews-widget input {
    width:  40%;
}

2. Submit Button

.enews-widget input[type="submit"] {
    width: 30%;
}

Generally, you’ll only need to modify the width for the email input field depending on which theme you use.

The CSS above affects every eNews widget on your site.

Lets take a look at the CSS which only modifies the eNews widget after single posts.

After Entry Horizontal Form

.after-entry .enews-widget input {
    width:  40%;
}

.after-entry .enews-widget input[type="submit"] {
    width: 30%;
}

Next, we’ll look at the CSS which only affects the eNews widget in the primary sidebar.

Primary Sidebar Horizontal Form

.sidebar-primary .enews-widget input {
    width:  49%;
}

.sidebar-primary .enews-widget input[type="submit"] {
    width: 49%;
}

Notes

• This tutorial assumes you have installed the Genesis eNews Extended plugin.
• Mobile CSS not included.