Magento CE 1.8.1 - duplicated newsletter subscription forms not posting

Question

This is really puzzling me. I have 2 newsletter subscription forms on my site. On the home page, there is one at the top, below the banner, and the other is on every page located in the footer. I am also using the Ultimo theme from ThemeForest, and I had set the newsletter block from its default location in the footer like so in my layout/local.xml

<reference name="footer">
    <!-- Move newsletter to the footer -->
    <!--<block type="newsletter/subscribe" name="newsletter" as="newsletter" template="newsletter/subscribe.phtml"/>-->
    ....
</reference>

I then copied /app/design/frontend/ultimo/template/newsletter/subscribe.phtml into my subtheme twice, calling one subscribe_head.phtml and the other subscribe_footer.phtml.

subscribe_head.phtml

<div id="subscribe-form-head" class="clearer">
    <form action="<?php echo $this->getFormActionUrl() ?>" method="post" id="newsletter-head-validate-detail">
        <div class="inner">
            <h5>Newsletter<span class="hide-c"> Signup</span></h5>
            <p>Sign up to get all the latest deals and earn 100 points</p>
            <div class="input-box">
                <button type="submit" title="<?php echo $this->__('Subscribe') ?>" class="button btn-inline"><span><span><?php echo $this->__('Subscribe') ?></span></span></button>
                <input type="text" name="email" id="newsletter" class="input-text required-entry validate-email" />
            </div>            
        </div>
    </form>
</div>
<script type="text/javascript">
//<![CDATA[
    var newsletterSubscriberFormDetail = new VarienForm('newsletter-head-validate-detail');
    new Varien.searchForm('newsletter-head-validate-detail', 'newsletter', '<?php echo $this->helper('newsletter')->__('Enter your email address') ?>');
//]]>
</script>

subscribe_footer.phtml

<div id="subscribe-form-footer" class="clearer">
    <form action="<?php echo $this->getFormActionUrl() ?>" method="post" id="newsletter-footer-validate-detail">
        <div class="inner">
            <div class="input-box">
                <button type="submit" title="<?php echo $this->__('Subscribe') ?>" class="button btn-inline"><?php echo $this->__('Subscribe') ?></button>
                <input type="text" name="email2" id="newsletter-bottom" class="input-text required-entry validate-email" />
            </div>            
            <p>Catch up on all of the latest products and deals for the products you want! Sign up now and stay informed</p>
        </div>
    </form>
</div>
<script type="text/javascript">
//<![CDATA[
    var newsletterSubscriberFormDetail = new VarienForm('newsletter-footer-validate-detail');
    new Varien.searchForm('newsletter-footer-validate-detail', 'newsletter-bottom', '<?php echo $this->helper('newsletter')->__('Your email here...') ?>');
//]]>
</script>

Even though they look similar, you will see the layouts are slightly different, hence the template duplication. In static blocks, they are called as {{block type="newsletter/subscribe" template="newsletter/subscribe_head.phtml"}} and {{block type="newsletter/subscribe" template="newsletter/subscribe_footer.phtml"}} respectively.

NOW...subscribe_head.phtml works as it should - validation fires, and it posts fine. However, subscribe_footer.phtml does nothing. If left blank and the submit button is clicked, nothing happens, and I see a CSS class validation-passed being added to the input box in Chrome Inspector. Also, if I type any garbage into the box and submit the form, the page just posts back to itself with no error messages or notifications.

I've tried my best to keep both these templates unique, but nothing has worked out thus far for the footer form.

I really would appreciate any help with this. Many thanks!

---

EDIT: subcribe_head still works, and subscribe_footer now at least posts successfully. I found out that the Newsletter Signup controller requires the name email to be present in the POST variable. However, JavaScript validation does not seem to be firing on the subscribe_footer form.

Answer 1

As you now have most of it working other than the validation. I would imagine that for the validation to work on both forms you need "var newsletterSubscriberFormDetail" to be different on each form e.g

var newsletterSubscriberFormDetailHeader 

&

var newsletterSubscriberFormDetailFooter

Answer 2

My first suggestion is that you are using the same JavaScript variable for both forms:

var newsletterSubscriberFormDetail = new VarienForm('newsletter-head-validate-detail');
var newsletterSubscriberFormDetail = new VarienForm('newsletter-footer-validate-detail');

Though it seems odd that the header works and not the footer, since I would suggest that it would take the form that is loaded last.

Answer 3

 {{block type="newsletter/subscribe" template="newsletter/subscribe_head.phtml"}}
 {{block type="newsletter/subscribe" template="newsletter/subscribe_head.phtml"}}

You should have a name property for block definition. This is how magento uniquely identifies your block. Most probably this may cause the problem.

So try this in your static blocks

 {{block type="newsletter/subscribe" name="top.newsletter"  template="newsletter/subscribe_head.phtml"}}
 {{block type="newsletter/subscribe" name="bottom.newsletter" template="newsletter/subscribe_head.phtml"}}