Community Forums › Forums › Archived Forums › Design Tips and Tricks › Integrate custom Mailchimp into 411 Theme
Tagged: 411, css, email form integration, MailChimp
- This topic has 4 replies, 2 voices, and was last updated 9 years, 11 months ago by brett924.
-
AuthorPosts
-
April 29, 2014 at 8:09 pm #103021brett924Member
So... I have to get this sign-up form: http://bestfiletmignon.us7.list-manage2.com/subscribe?u=b405d70ef5c48e87e601fb979&id=7de4abbbf7
Into this page (as you see, I just cut and paste the code from the form page which obviously won't work).
I know this is probably a simple fix, i.e. change the background to black, widen the post area a bit, get rid of whatever is causing the dead space above the form, but I'm not a code person.
If there are obvious and simple suggestions, please shoot them my way. If I'm basically asking for a completely reworked stylesheet, then maybe it's more than what this forum is for.
http://www.bestfiletmignonblog.com/email-subscribe/May 1, 2014 at 10:32 pm #103283TomParticipantBrett, place this code in the bottom of your style.css file. This will style the form itself. "Widen the post area a bit" is not really a trivial exercise, especially when the context of the site and content is unknown.
.submit_container .button { height: 65px; width: 100%; font-size: 20px; } .field-group { border-radius: 4px; width: 100%; height: 65px; } .field-group input, .field-group textarea { font-size: 26px !important; padding: 10px !important; } .mergeRow label { font-size: 20px; } .mergeRow p{ margin-bottom: 0px !important; } .mergeRow { margin-bottom: 50px; } /* optional */ .poweredBy { display: none !important; }
You can catch me on Twitter for an address to mail the steaks :).
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]May 2, 2014 at 9:45 am #103332brett924MemberThanks Tom!
I'll make sure to keep you on the list of 'folks who deserve steak' when I start getting paid. 🙂
So that code should actually address issues in the Mailchimp form itself?
What's driving me batty is the space between the top of the form and the top of the post area. I figure there's some code bloat in the Mailchimp form that is causing it, but I'm not sure what is allowed to be removed to keep the integrity of the Mailchimp code together.
That said, I don't have any steak to give, so I'm going to keep on playing with it to see what I can come up with.
thanks again for taking a look and working out all that CSS for the form. I think we hacks (not hackers, obviously), don't quite get what's involved. We see too much drag and drop and assume it's all pretty simple.
May 2, 2014 at 11:29 am #103342TomParticipantI don't see a problem with the top spacing. I do see that I missed the asterisk for required fields.
You should add this to the CSS above.
label .asterisk { top: 10px !important; }
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]May 2, 2014 at 12:54 pm #103352brett924MemberI'll add that.
I actually cut a huge chunk of code out of the form's code and that did away with the top spacing (it was still there after I cut and paste the CSS you gave me) I'm not sure if cutting the code (just below) will screw up the Mailchimp list subscribes. I pasted it under all the CSS/html related to the form. It's starting to look a little messy.
One quick question: The CSS you gave me - I put it in the little 'edit CSS' box, not at the bottom of the style.css file. I also put it in the actual text editor of the post (I'm guessing I should delete it out of one of those places.
(got the code from the 'View Page Source' in Chrome for: http://eepurl.com/Ttlzb
<html dir="ltr">
<head>
<title>Best Filet Mignon Email Subscription List</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">blah blah blah.... down to...
empty: function(element) {
if ( $('#MERGE0_mailcheck').length > 0 ){
$('#MERGE0_mailcheck').remove();
}
return;
}
});
});
} catch(e){ console.log(e); }
});
</script> -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.