Shopify custom form create customer not working

[pinepower]

Hey, im trying to create an e-book page that sends an email to a customer with an ebook once they fill in the form and click the button, but when i test my form it doesn't even create a new customer. does anyone have an idea what is wrong with my code? 

{% layout 'page' %}

<div class="ebook-form-container" style="background-image: url({{'marmer_bg.jpg' | asset_url}}); background-size: cover; background-position: top;">
  <div class="ebook-image">
    <img src="{{ 'pinepower-ebook.png' | asset_url }}" width="700" height="700" style="object-fit: cover;" alt="pinepower_ebook" />
  </div>
  
  {% form 'customer' %}

    {{ form.errors | default_errors }}
    <div class="form-inner-wrapper">
      <h1>Download hier je gratis E-Book</h1>
      <div class="input-wrapper">
        <div class="field">
          <label for="ebook_first_name">Voornaam:</label>
          <input type="text"  name="contact[first_name]" placeholder="Voornaam" required>
        </div>
        <div class="field">
          <label for="ebook_last_name">Achternaam:</label>
          <input type="text"  name="contact[last_name]" placeholder="Achternaam" required>
        </div>
        <div class="field">
          <label for="ebook_email">Email:</label>
          <input type="email"  name="contact[email]" placeholder="Email" required>
        </div>
      </div>
      <input type="hidden" name="contact[tags]" value="ebook_download">
      <button type="submit">Verstuur gratis E-Book</button>
    </div>
    
  {% endform %}
</div>

[tim]

Hmm. The code looks proper.

Just tested your code by pasting the {% form %} code into Custom Liquid section in my test Dawn theme and was able to submit and actually register a new customer.

So it's something else -- say you may have a JS handler in theme code for this type of form?

Can you share a preview link?

[pinepower]

Hey sorry for the late reply, I didn't expect to get an awnser so soon. I am not using the dawn theme but a custom theme instead i think. not completely sure on that because i am not the one who developed the website. I am just doing this page. but with a js handler i think you mean this: 

document.getElementById('ebook-form').addEventListener('submit', function(event) {
    event.preventDefault();
    
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;
    
    if (name && email) {
        this.submit();
    } else {
        alert('Vul alle velden in.');
    }
});

just a little varification is al. but i dont think this does anything because i dont have an id assinged to my form. further for the preview link, i think you mean this https://a16ouka3bi2hi1cf-79398338909.shopifypreview.com/pages?preview_key=9a7a05aeba2be3ffdfe520308b... but i dont know for how long it is active and while it is not published it won't work anyway because of the shopify ReCaptcha restrictions. If there is anything else you need, just let me know. Thanks for the help!

[tim]

Yes, that's what I meant -- the code works in my theme, which is different from yours, so the code is not 100% wrong by itself.

There seem to be no submit handler in theme and I was able to actually submit the form using your primary domain. The error content is because the original page is not published and preview parameter is lost during submission, but you can see that it was submitted fine by the green message (even though it's a different form element, but it's the same type of form). 

I'd recommend you to actually publish the page -- keeping it unpublished will make debugging more complex.

You may rather use another theme copy instead and preview it to show the actual content on the page while keeping the page empty on live theme if  publishing is not desirable.

[pinepower]

Hey Tim, I tried it on public but that didn't work. it didn't display any error messages in the frontend or the chrome dev console. Could it have something to do with that there is another customer form in the footer of my theme for the newsletter? b.t.w it seems that you send a submission in to the premade newsletter form wich i didn't build and already worked. I put the page on public so you can view it here and try it for yourself. https://pinepower.nl/pages/e-book thanks a lot

[tim]

Nope, I first tried with my full e-mail, tairli@yahoo.com  via top custom form. Then I've tried a couple of submissions with less letters before @ in the lower, theme own section, to compare the behaviour.
Just now I've tried custom form again with my gmail.com address and also received green confirmation in the standard form.

Can you see the customer records for these addresses?

Confirmation in a wrong form happens because when you submit the form Shopify kinda marks it "customer form posted successfully" and sets the flag posted_successfully? on a form object for customer forms. Then theme code in standard section renders confirmation message based on this property.

So far my experience was that if you have 2 forms of the same type on one page, they are both marked with posted_successfully?  when re-rendered after successful submission of one of them.

Never paid much attention to it because then i was adding JS to submit them via ajax and was aware which form I'm submitting ...

[pinepower]

Oh I see the problem. While testing I made the mistake of not deleting past customer accounts with my email so thats why it apearred to me as tho the site was just refreshing. Do you know a fix for having the conformation apear in the wrong form? Also, I just tested my email automation in flow where i used the flowmail extension, but i never got the email is set up. Do you have advise for how to set up a free custom mail when someone submits the form because the way I'm doing it doesn't seem te work. Thanks a lot for the help so far, I really apreciate it!

[tim · Accepted solution]

As I said, just submit form with JS and then you'd know which form initiated JS code and where to show confirmation.

That'd be my choice and better UX without page reload.

As for sending e-mails -- I have not tried the App you've mentioned. Often clients have something like Klaviyo which has Flow integration.

Otherwise an App by Shopify https://apps.shopify.com/shopify-email would be my first suggestion (and it integrates with Flow).

[pinepower]

Thanks a lot and have  great day!