Jump to content

Archived

This topic is now archived and is closed to further replies.

josh1178

Email signup (Mailchimp)

Recommended Posts

josh1178

I'd like to do a signup like th one on the pagelines DMS demo (without the fancy sliding, but...I just want a nice looking horizontal form). Is there a section for this or can I do it with some css and the standard mailchimp form code? Can someone point me in the right direction?

 

I want something like the attached pic.

 

Thanks !

Share this post


Link to post
Share on other sites
Danny

Hi Josh,

 

MailChimp, as far as I can remember provide their very own code for you to implement such a form. So you should just be able to use their code which may require additional CSS and changes to make it a horizontal and then copy that code into a MediaBox section.

 

Another alternative and one I have used in the past is to use a form plugin, the best one in my opinion is Gravity Forms which also include an add-on for MailChimp.

 

http://www.gravityforms.com/

http://www.gravityforms.com/add-ons/mailchimp/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
josh1178

Thanks Danny! I will check out gravity forms and/or css styling Mailchimp though I was hoping not to spend time on it if I didn't have to. :)

 

I definitely think a section that does this easily would be of interest to people and a nice monthly freebie for the shop. 

Share this post


Link to post
Share on other sites
Danny

I've bookmarked your topic and will bring your suggestion to our developers attention.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
josh1178

Good news. The code below seems to work with no CSS modifications needed. Only problem is the submit button is grey.

 

http://imgur.com/nWTkQvk

 

Any idea on how to get the button to be colored on overlay? I used "btn btn-small slider-btn btn-link-color", but it's grey until you hover over it whereas elsewhere a similar button is always cyan and the opacity changes when hovering over it (my link color).  


<br />
<!– Begin MailChimp Signup Form –></p>
<div id="mc_embed_signup">
<form class="validate" id="mc-embedded-subscribe-form" action="http://YOUR MAIL CHIMP URL FORM ADDRESS" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
<div class="mc-field-group"><input class="required email" id="mce-EMAIL" type="email" name="EMAIL" placeholder="Email Address" value="" /> <input class="required" id="mce-FNAME" type="text" name="FNAME" placeholder="First Name" value="" /> <input type="hidden" name="b_8c2fdee11f59dc4d7adf9bcbf_83dec78335" value=""><input class="btn btn-small slider-btn btn-link-color" id="mc-embedded-subscribe" type="submit" name="subscribe" value="SUBSCRIBE" /></div>
</form>
</div>
<p><!–End mc_embed_signup–><br />

Share this post


Link to post
Share on other sites
Danny

Can you provide a link to where this form is active please.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
josh1178

Sorry, it's only local at the moment.

 

It's just using raw Skeleton DMS child theme with no mods or plugins. If you were to insert that into a DMS  section I'd expect you'd see the same thing.

Share this post


Link to post
Share on other sites
Danny

Try changing the last input for the submit button from <input> to <button> for example:

 

<button class="btn btn-small slider-btn btn-link-color" id="mc-embedded-subscribe" type="submit" name="subscribe" value="SUBSCRIBE">SUBSCRIBE</button>


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
josh1178

Thanks Danny. Just about perfect, but now the size is a problem.

 

Now it looks the wrong height. It looks best using 'large', but the height of the form fields is different from the button. I tried using max-height: and setting that to the approx 33px (the size of the input areas is 32.55px so I'm guessing this is a bad idea) but that just offsets the button and the text. Any clue on how to get it to be the same height as the input fields?

 

Thanks!

 

Normal:

http://imgur.com/l9sQew4

 

With "max-height: 33px;"

http://imgur.com/tfMV91F

Share this post


Link to post
Share on other sites
Danny

You will need to use custom CSS. I apologise, but we can not provide support to third party code which this is. 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
josh1178

No prob. I'll try to find a way and will report back any results. Thanks

Share this post


Link to post
Share on other sites
Danny

Cool, I am positive other users will appreciate that.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
josh1178
This code is a bit better, but it's not perfect/ideal as the other inputs are a percent and my fix adjusts by pixel.
 
The offset was caused by the margins in the inputs. I've added the margin to the button, changed the padding to padding: 06px 25px; and set the width to 27% for the button.
 
The proper way to do this would be to find the code for the input classes in DMS and copy it inline to the button. Where can one find all the css for the default DMS inputs etc.? That would help.
 
 
<!– Begin MailChimp Signup Form –><div id="mc_embed_signup"><form style="margin: 0 0 0px !important;"class="validate" id="mc-embedded-subscribe-form" action="http://YOUR MAIL CHIMP URL FORM ADDRESS" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank"><div class="mc-field-group"><input style="margin-bottom: 4px !important;" class="required email" id="mce-EMAIL" type="email" name="EMAIL" placeholder="Email Address" value="" /> <input style="margin-bottom: 4px !important;" class="required" id="mce-FNAME" type="text" name="FNAME" placeholder="First Name" value="" /> <input type="hidden" name="b_8c2fdee11f59dc4d7adf9bcbf_83dec78335" value=""><button style="margin-bottom: 4px !important; width: 27%;padding: 06px 25px;" class="btn btn-large slider-btn btn-link-color" id="mc-embedded-subscribe" type="submit" name="subscribe" value="SUBSCRIBE">SUBSCRIBE</button>
</div></form></div>

Share this post


Link to post
Share on other sites
Danny

If you want no margins, add the following class names to your button class attribute

 

zmb zmt

 

so it looks something like this:

 

<button class="btn btn-small slider-btn btn-link-color zmt zmb" id="mc-embedded-subscribe" type="submit" name="subscribe" value="SUBSCRIBE">SUBSCRIBE</button>

 
This should remove all margin top and bottom from the button.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
josh1178

Thanks Danny. Good tip and more elegant, though not quite what is needed. The problem is with the button size which I've corrected by adjusting the padding in pixels, when in reality should be a % to match the other forms.  

 

Where/how are the button sizes (height in particular) determined? I found the Less file with button code but there is nothing there about height. Basically I need to match the height from the two form input entries and the button, so I'm trying to learn where those input form fields get their size info. 

 

Thanks!

Share this post


Link to post
Share on other sites
greenfly

Is this still an issue? Is this live anywhere so we can see the buttons? 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
josh1178

I haven't fixed it yet. I will try to make a live demo site and post a link here shortly.

 

It would be great to know where the height for the built-in buttons and form inputs are determined in any case.  Thanks in advance.

Share this post


Link to post
Share on other sites
greenfly

thanks for letting us know - we will take a look when we can see you demo :) 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
josh1178

Here ya go:

http://virtualtactile.com/

 

As you can see, the button is wrong height compared to the form input fields. In looking at the code, the form fields are a percentage. So I'm not sure how to dial in that same value for that specific instance of the submit button. Thanks!

Share this post


Link to post
Share on other sites
Danny

The issue isn't really the button, its because the input has 4px !important assigned to them, you will need to remove them, and then reduce the padding of the button. Once you have removed the margin-bottom: 4px !important; from the input which you must have added, add the code below and it should resolve your issue.

 

button#mc-embedded-subscribe {
padding: 7px 25px;
}
 
Please be aware that we have gone beyond our support policy here, as this isn't related to DMS, but third party code. Therefore, if you run into any other issues, you will need to consult the author of the code or sign up to a CSS specific forum.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
josh1178

Fair enough Danny, though the code doesn't work (have a look) and I'd suggest you not mark it as a best answer as it's not correct.

http://virtualtactile.com/

 

If anyone wants to tell me where the styles for these are located it may help me get a solution.

media="all"

textarea,input[type="text"],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="number"],input[type="email"],input[type="url"],input[type="search"],input[type="tel"],input[type="color"].uneditable-input {

 

Thanks

Share this post


Link to post
Share on other sites
Danny

The code does work. However, your issue is that you haven't done as I suggested above and removed margin bottom on your input fields for Email address and Name. You need to remove this like I mentioned above, and then reduce the padding of your button, which you haven't done either.

 

https://cloudup.com/cmQjfzYHatw

 

If you're still having issues with this, then you will need to speak to the author of the code or sign up to a CSS specific forum.

 

 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
josh1178

I'm sorry Danny, I did do that but I must have not hit publish. I removed my margin code and added the fix you suggested, but it still didn't look right. It's fine if you don't wish to help anymore, but I'd rather resolve this here if possible to help the poor soul who is going to read this message and not get an answer. Below is the correct code, thanks for the clue.

 

The problem here I was seeing was that the compiled core css (which is dms correct?) outputs a margin for the input fields even though I removed the margin I added to the code, which is why I asked where those media button sizes were defined (it's DMS, not my code, right?). You're insisting that's custom code, but it appears not to be. If you fixed it with firebug, that explains why it would work for you and not for me by simply removing the margins. I've added a style="margin: 0 0 0px !important; to the fields to ensure that it works simply removing what I had didn't. Below is the working code. Thank you for the clue.

 

So I may learn more about DMS, it would be great if you could tell me though, where the compiled css I see in chrome dev comes from. I don't have any custom CSS so I know it's not my code and I didn't add any for this form.

 

Anyways, here is the working code for those who want it. It's not pixel perfect (form inputs are 32.55px and button is 33px for example) but we can live with that.


<!– Begin MailChimp Signup Form –><div id="mc_embed_signup"><form style="margin: 0 0 0px !important;"class="validate" id="mc-embedded-subscribe-form" action="http://YOUR MAIL CHIMP URL FORM ADDRESS" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank"><div class="mc-field-group"><input style="margin: 0 0 0px !important; class="required email" id="mce-EMAIL" type="email" name="EMAIL" placeholder="Email Address" value="" /> <input style="margin: 0 0 0px !important; class="required" id="mce-FNAME" type="text" name="FNAME" placeholder="First Name" value="" /> <input type="hidden" name="b_8c2fdee11f59dc4d7adf9bcbf_83dec78335" value=""><button style="width: 27%; padding:7px 25px;" class="btn btn-large slider-btn btn-link-color zmt zmb" id="mc-embedded-subscribe" type="submit" name="subscribe" value="SUBSCRIBE">SUBSCRIBE</button>
</div></form></div>

 

Share this post


Link to post
Share on other sites

×