No form submission (React via Reagent)

Support
1

Link: yet-another-epiphany.netlify.app

Custom domain: playblackbelt.com

I’ve tried the form on both sites and when I press Enter to submit the form it just goes to Page Not Found. I have also gone through the support guide but it still isn’t working. I’m using React (via Reagent) btw.

When I inspect my site, the form’s HTML appears like this:

<form name="email-address" method="POST" netlify="" data-netlify="true" data-netlify-honeypot="bot-field" action="/">
  <label class="text-base">E-mail address: 
    <input type="email" name="email" style="background-color:var(--bg-color); border-bottom:1px solid var(--fg-color-light);" id="front-form" class="w-full">
  </label>
</form>

What’s strange is I am only setting netlify="" in my code and yet both it and data-netlify appear in the inspector. The support guide says the attributes should disappear after processing, so I shouldn’t be seeing either, right?

Here’s a copy of my Hiccup/Reagent code which might be useful:

[:form {:name "email-address"
                 :method "POST"
                 :enctype "application/x-www-form-urlencoded"
                 :netlify ""
                 :on-submit (fn [] (reset! submitted? true))}
          [:label "E-mail address: "
           [:input {:type "hidden" :value "email-address" :name "some-form-name"}]
           [:input#front-form {:type "email" :name "email"}]]]
2

Hi,

So you must first add an hidden form with the same name email-address and same structure directly in your HTML file.

 <form name="email-address" netlify netlify-honeypot="bot-field" hidden>
    <input type="hidden" name="some-form-name" value="email-address">
    <input type="email" name="email" id="front-form">
</form>

Then in your hiccup code, you must add an hidden input like this:

image
image696×303 29.7 KB

More information here: How to Integrate Netlify’s Form Handling in a React App

1 Like
3

That did it! Thank you very much!

PS I also had to remove the redundant hidden [:input] under [:label] for this to work.

1 Like
4

Yes and you can also remove the unused :netlify "" in the hiccup form.

1 Like
5

awesome! glad you helped each other to find the solution :smiley:

1 Like