E-mail sign-up banners

[chrislines]

Hi,

I want to create e-mail sign up sections on specific pages of my site.

Examples: at the top here: http://jilllynndesign.com/ or half way down the page here: http://connectwithcopy.com/

Any idea how I would achieve this? I don't really know where to start. I'm assuming I need to create the areas in functions.php

I have the mail chimp sign up code, I just need the sections/widgets to paste the code into?

Thanks for any guidance.

http://www.chrislines.net

[JanHoek]

You can combine mailchimp with . You can use this as a widget.

---

Hi, my name is Jan Hoek. Sure, they all say I have a big head, but I like to think it’s way too small for all my ideas.

[Badlywired]

You can use the plugin https://wordpress.org/plugins/genesis-enews-extended/ with mailchimp (instructions are on the plugin page) and then place the widget in the sidebar you have created for the purpose.

To create / place the sidebar you can code the sidebar into functions.php following various tutorial / eaxmples or you can use this plugin https://wordpress.org/plugins/genesis-simple-sidebars/ I have never used it (as I am a developer so writing a few lines of code is no bother to me) but I hear it is good.

---

My techy blog WordPress and stuff badlywired.com

[desireejester]

Carrie Dils has a great tutorial (link below) for adding a widget area ( that she uses for a email signup form) below the navigation, but you can replace the Genesis hook to display it other places.

http://www.carriedils.com/add-widget-area-below-nav/

[chrislines]

Thanks desireejester. That's a great tutorial. Much appreciated. I managed to get that set up on my site.

Would you mind if I asked, where would be a good place to start learning how to populate the widget with code to create the examples I gave above (Examples: at the top here: http://jilllynndesign.com/ or half way down the page here: http://connectwithcopy.com/)

I've tried just inserting mailchimp code but it doesn't look how I want and I'd like the widget sign up to look a bit more stylish.

Thanks.

[desireejester]

I love using the Genesis E-News Extended plugin for newsletter sign-ups. The forms it displays are prettier out of the box than the Mailchimp code. There is a spot in each instance of the widget settings to place HTML both before and after the form itself, and there are default classes for the plugin built into the Genesis theme CSS that make it super easy to style it however you would like.

http://genesisgoodies.com/add-email-list-signup/

[chrislines]

Thanks again. I have tried Genesis E-News Extended plugin but I just end up with the forms looking like this: http://www.chrislines.net/test/

How do I set the size of the e-mail form etc? Do you think this would be down to the mailchimp code or Carrie's Widget areas?

Many thanks.

[desireejester]

Within the CSS of your child theme, there should be a section under Plugins called Genesis eNews Extended. For instance, in the One Pager theme that I am working with, the code looks like this:

/* Genesis eNews Extended
--------------------------------------------- */

.enews-widget {
	color: #999;
}

.enews-widget .widget-title {
	color: #fff;
}

.enews-widget input {
	margin-bottom: 16px;
	margin-bottom: 1.6rem;
}

.enews-widget input:focus {
	border: 1px solid #ddd;
}

.enews-widget input[type="submit"] {
	background-color: #f15123;
	color: #fff;
	margin: 0;
	width: 100%;
}

.enews-widget input:hover[type="submit"] {
	background-color: #fff;
	color: #333;
}

To control the size of the form, you can set max height/widths to the .enews-widget class. To style the before and after form text, you can create CSS classes of your own when you write your HTML in the Before Form and After Form boxes and style them accordingly in your CSS file.

[chrislines]

Thanks for your help. I tried to alter code in the CSS and I couldn't make much sense of it. I think this is a bit beyond me. Thanks anyway.

[Author]

Posts