MailPoet email address collection form WordPress
- SOLVED
I have an email address collection form that came designed in a widget at the very, very bottom of this site: http://ellencelli.com/
The code in this widget looks like this:
<div class="col-sm-10 col-lg-offset-2 col-md-offset-2 ">
<div class="newsletter-content">
<div class="img pull-left">
<img src="/wp-content/uploads/2014/09/newsletter_ring_135px.png">
</div>
<div class="box form-newsletter pull-right">
<div class="box-left pull-left">
<div class="box-heading no-margin">
<strong>become a subscriber</strong>
</div>
<p class="description">& learn about our special offers</p>
</div>
<div class="input-group">
<input type="text" class="inputNew" placeholder="Your email ..." value="" size="18" name="email">
<span class="input-group-btn">
<button type="submit" name="submitNewsletter" class="btn btn-custom">Subscribe<span class="fa-fw fa fa-long-arrow-right"></span></button>
</span>
</div>
</div>
</div>
</div>
My Mailing List plugin is MailPoet. I have a list started and this handy plugin supplies a couple versions of code (HTML and PHP, etc) that you can insert in your widget to collect addresses.
The problem is that I would like to use the design that came with my theme, but I'm not sure how to make the code work with my MailPoet list?
Here's the HTML code MailPoet supplies:
<!--START Scripts : this is the script part you can add to the header of your theme-->
<script type="text/javascript" src="http://ellencelli.com/wp-includes/js/jquery/jquery.js?ver=2.6.11"></script>
<script type="text/javascript" src="http://ellencelli.com/wp-content/plugins/wysija-newsletters/js/validate/languages/jquery.validationEngine-en.js?ver=2.6.11"></script>
<script type="text/javascript" src="http://ellencelli.com/wp-content/plugins/wysija-newsletters/js/validate/jquery.validationEngine.js?ver=2.6.11"></script>
<script type="text/javascript" src="http://ellencelli.com/wp-content/plugins/wysija-newsletters/js/front-subscribers.js?ver=2.6.11"></script>
<script type="text/javascript">
/* <![CDATA[ */
var wysijaAJAX = {"action":"wysija_ajax","controller":"subscribers","ajaxurl":"http://ellencelli.com/wp-admin/admin-ajax.php","loadingTrans":"Loading..."};
/* ]]> */
</script><script type="text/javascript" src="http://ellencelli.com/wp-content/plugins/wysija-newsletters/js/front-subscribers.js?ver=2.6.11"></script>
<!--END Scripts-->
<div class="widget_wysija_cont html_wysija"><div id="msg-form-wysija-html543324f878588-1" class="wysija-msg ajax"></div><form id="form-wysija-html543324f878588-1" method="post" action="#wysija" class="widget_wysija html_wysija">
<p class="wysija-paragraph">
<label>Email <span class="wysija-required">*</span></label>
<input type="text" name="wysija[user][email]" class="wysija-input validate[required,custom[email]]" title="Email" value="" />
<span class="abs-req">
<input type="text" name="wysija[user][abs][email]" class="wysija-input validated[abs][email]" value="" />
</span>
</p>
<input class="wysija-submit wysija-submit-field" type="submit" value="Subscribe!" />
<input type="hidden" name="form_id" value="1" />
<input type="hidden" name="action" value="save" />
<input type="hidden" name="controller" value="subscribers" />
<input type="hidden" value="1" name="wysija-page" />
<input type="hidden" name="wysija[user_list][list_ids]" value="1" />
</form></div>
--
I have a child theme setup so if I need to add CSS or something I can do that easily. I just don't know what to write!
Thanks!
Liz
Answers (2)
Hariprasad Vijayan answers:
Hello Liz,
Try this html in your widget,
<div class="col-sm-10 col-lg-offset-2 col-md-offset-2 ">
<div class="newsletter-content">
<div class="img pull-left"> <img src="/wp-content/uploads/2014/09/newsletter_ring_135px.png"> </div>
<div class="box form-newsletter pull-right">
<div class="box-left pull-left">
<div class="box-heading no-margin"> become a subscriber </div>
<p class="description">& learn about our special offers</p>
</div>
<div class="widget_wysija_cont html_wysija">
<div id="msg-form-wysija-html543324f878588-1" class="wysija-msg ajax"></div>
<form id="form-wysija-html543324f878588-1" method="post" action="#wysija" class="widget_wysija html_wysija">
<div class="input-group">
<input type="text" name="wysija[user][email]" class="inputNew wysija-input validate[required,custom[email]]" title="Email" placeholder="Your email ..." size="18" value="" />
<span class="abs-req">
<input type="text" name="wysija[user][abs][email]" class="inputNew wysija-input validated[abs][email]" placeholder="Your email ..." size="18" value="" />
</span> <span class="input-group-btn">
<button type="submit" name="submitNewsletter" class="btn btn-custom wysija-submit wysija-submit-field">Subscribe<span class="fa-fw fa fa-long-arrow-right"></span></button>
</span>
<input type="hidden" name="form_id" value="1" />
<input type="hidden" name="action" value="save" />
<input type="hidden" name="controller" value="subscribers" />
<input type="hidden" value="1" name="wysija-page" />
<input type="hidden" name="wysija[user_list][list_ids]" value="1" />
</div>
</form>
</div>
</div>
</div>
</div>
Let me know if you have trouble. Am available in skype if you required. My skype id: phpsmashcode
Regards,
Hariprasad
Liz comments:
Wow! This is almost perfect. The button and email address box are a little misaligned. You can see it here:
http://ellencelli.com/
Do you mind revising?
Thanks,
Liz
Hariprasad Vijayan comments:
Hi Liz,
Add following CSS in your style sheet.
.wysija-submit{
margin: 0!important;
}
Let me know if you have trouble.
Regards,
Hariprasad
Arnav Joy answers:
please check this , let me know if that not works.
<div class="col-sm-10 col-lg-offset-2 col-md-offset-2 ">
<!--START Scripts : this is the script part you can add to the header of your theme-->
<script type="text/javascript" src="http://ellencelli.com/wp-includes/js/jquery/jquery.js?ver=2.6.11"></script>
<script type="text/javascript" src="http://ellencelli.com/wp-content/plugins/wysija-newsletters/js/validate/languages/jquery.validationEngine-en.js?ver=2.6.11"></script>
<script type="text/javascript" src="http://ellencelli.com/wp-content/plugins/wysija-newsletters/js/validate/jquery.validationEngine.js?ver=2.6.11"></script>
<script type="text/javascript" src="http://ellencelli.com/wp-content/plugins/wysija-newsletters/js/front-subscribers.js?ver=2.6.11"></script>
<script type="text/javascript">
/* <![CDATA[ */
var wysijaAJAX = {"action":"wysija_ajax","controller":"subscribers","ajaxurl":"http://ellencelli.com/wp-admin/admin-ajax.php","loadingTrans":"Loading..."};
/* ]]> */
</script><script type="text/javascript" src="http://ellencelli.com/wp-content/plugins/wysija-newsletters/js/front-subscribers.js?ver=2.6.11"></script>
<!--END Scripts-->
<div class="newsletter-content">
<div class="img pull-left">
<img src="/wp-content/uploads/2014/09/newsletter_ring_135px.png">
</div>
<div class="box form-newsletter pull-right">
<div class="box-left pull-left">
<div class="box-heading no-margin">
become a subscriber
</div>
<p class="description">& learn about our special offers</p>
</div>
<div class="input-group">
<div class="widget_wysija_cont html_wysija"><div id="msg-form-wysija-html543324f878588-1" class="wysija-msg ajax"></div>
<form id="form-wysija-html543324f878588-1" method="post" action="#wysija" class="widget_wysija html_wysija">
<input type="text" name="wysija[user][email]" class="inputNew wysija-input validate[required,custom[email]]" title="Email" value="" />
<span class="abs-req">
<input type="text" name="wysija[user][abs][email]" class="inputNew wysija-input validated[abs][email]" value="" />
</span>
<span class="input-group-btn">
<input class="btn btn-custom wysija-submit wysija-submit-field" type="submit" value="Subscribe" />
<!--<button type="submit" name="submitNewsletter" class="btn btn-custom">Subscribe<span class="fa-fw fa fa-long-arrow-right"></span></button>--><input type="hidden" name="form_id" value="1" />
<input type="hidden" name="action" value="save" />
<input type="hidden" name="controller" value="subscribers" />
<input type="hidden" value="1" name="wysija-page" />
<input type="hidden" name="wysija[user_list][list_ids]" value="1" />
</span>
</form>
</div>
</div>
</div>
</div>
Liz comments:
Thank you for your effort! The alignment was a bit off on the email address and button (the button was listed beneath the blank). I am planning to use the other person's code.