Forms do not appear in dashboard - Astro - React - SSG

Support
1

Site: infopageprimer.com
Form in public dir: [https://6333723b99cc0b0008e6228a--info-pageprimer.netlify.app/hero-form.html)

TLDR; forms are already in html format in public directory. Interactive forms are [statically generated] by Astro. I use the “@astrojs/netlify/functions” pluggin. I use Solid Js (react, basically) for the components.

Greetings. I have been attempting for a couple of days to get forms recognized by netlify systems. I have followed this blog. I’ve also combed through the forum. My forms are Sever Side Rendered as static html with some interactive islands. I have included html copies of these forms in my public directory. I believe they have all the correct tags. I previously had two of the same form (with different id’s etc) on the same page, but I’ve already tried with just the one. It seems no matter what I try, the forms are not scanned by the bots.
Any help is greatly appreciated. Thank you.

form in question

<form data-netlify="true" netlify-honeypot="hero-bot-field" name="hero-inquiry" method="POST" action="/" class="lead-form astro-LU2IJ532">
    <p class="hidden astro-LU2IJ532">
      <label class="astro-LU2IJ532">
        Do not fill this out if you are human: <input name="hero-bot-field" class="astro-LU2IJ532">
      </label>
    </p>

    <input type="hidden" name="form-name" value="hero-inquiry" class="astro-LU2IJ532">

    <div class="form__container astro-LU2IJ532">
      <div style="width: 100%;" class="md:!w-[48%] astro-LU2IJ532">
        <label id="hero-inquiry-form-first-name-label" for="hero-inquiry-form-first-name" class="lead-label astro-LU2IJ532">First Name</label>
        <input id="hero-inquiry-form-first-name" type="text" name="hero-inquiry-form-first-name" aria-labelledby="hero-inquiry-form-first-name-label" class="astro-LU2IJ532">
      </div>

      <div style="width: 100%;" class="md:!w-[48%] astro-LU2IJ532">
        <label id="hero-inquiry-form-last-name-label" for="hero-inquiry-form-last-name" data-required="true" class="astro-LU2IJ532">Last Name</label>
        <input id="hero-inquiry-form-last-name" type="text" name="hero-inquiry-form-last-name" aria-labelledby="hero-inquiry-form-last-name-label" required class="astro-LU2IJ532">
      </div>
    </div>

    <div class="astro-LU2IJ532">
      <label id="hero-inquiry-form-email-label" for="hero-inquiry-form-email" data-required="true" class="astro-LU2IJ532">Email</label>
      <input id="hero-inquiry-form-email" type="email" name="hero-inquiry-form-email" aria-labelledby="hero-inquiry-form-email-label" required class="astro-LU2IJ532">
    </div>

    <div class="astro-LU2IJ532">
      <label id="hero-inquiry-form-message-label" for="hero-inquiry-form-message" data-required="true" class="astro-LU2IJ532">What would you like to accomplish?</label>
      <textarea id="hero-inquiry-form-message" wrap="soft" name="hero-inquiry-form-message&#34;" aria-labelledby="hero-inquiry-form-message-label" required class="astro-LU2IJ532"></textarea>
    </div>

    <div class="submit-container astro-LU2IJ532">
      <button type="submit" class="lead-button astro-LU2IJ532">Send Message</button>
    </div>
  </form>

html file form inside public dir

<form action='/' class='astro-5I22QLQQ lead-form' method='POST' name='hero-inquiry'>
   <p class="astro-5I22QLQQ hidden"><label class=astro-5I22QLQQ>Do not fill this out if you are human: <input class=astro-5I22QLQQ name=hero-bot-field /></label></p>
   <input class=astro-5I22QLQQ name=form-name type=hidden value=hero-inquiry />
   <div class="astro-5I22QLQQ form__container">
      <div class="astro-5I22QLQQ md:!w-[48%]"style=width:100%><label class="astro-5I22QLQQ lead-label"for=hero-inquiry-form-first-name id=hero-inquiry-form-first-name-label>First Name</label> <input class=astro-5I22QLQQ name=hero-inquiry-form-first-name aria-labelledby=hero-inquiry-form-first-name-label id=hero-inquiry-form-first-name /></div>
      <div class="astro-5I22QLQQ md:!w-[48%]"style=width:100%><label class=astro-5I22QLQQ for=hero-inquiry-form-last-name id=hero-inquiry-form-last-name-label data-required=true>Last Name</label> <input class=astro-5I22QLQQ name=hero-inquiry-form-last-name aria-labelledby=hero-inquiry-form-last-name-label id=hero-inquiry-form-last-name required/></div>
   </div>
   <div class=astro-5I22QLQQ><label class=astro-5I22QLQQ for=hero-inquiry-form-email id=hero-inquiry-form-email-label data-required=true>Email</label> <input class=astro-5I22QLQQ name=hero-inquiry-form-email aria-labelledby=hero-inquiry-form-email-label id=hero-inquiry-form-email required type=email /></div>
   <div class=astro-5I22QLQQ><label class=astro-5I22QLQQ for=hero-inquiry-form-message id=hero-inquiry-form-message-label data-required=true>What would you like to accomplish?</label> <textarea aria-labelledby=hero-inquiry-form-message-label class=astro-5I22QLQQ id=hero-inquiry-form-message name=hero-inquiry-form-message&#34; required wrap=soft></textarea></div>
   <div class="astro-5I22QLQQ submit-container"><button class="astro-5I22QLQQ lead-button"type=submit>Send Message</button></div>
</form>
2

Hi @fjoaquin.pageprimer, thanks for posting.

Have you tried to add the attributes action="/" and data-netlify="true" to the form?
Add it and then redeploy your site to see if it works.
Let me know the outcome.
Thanks.

3

Thanks for the replay @clarnx , the form you quoted is the one in the public dir. It seems netlify catches that form and strips the values from it. The form still doesn’t show up in the dashboard. I’ve updated my post with the new deploy; new deploy with actions=“/”

4

Hi @fjoaquin.pageprimer thanks for the feedback.
I tried the form on the new deploy and the form does not get submitted but the page refreshes.
If possible can you share the repository of the site you are trying to deploy for me to help with the debugging.
Thanks.

5

I’m afraid the repo is private. If you’re familiar with Astro, it’s just html (albeit SSR). The top post shows the html in question. It does not ship javascript, unless you want a component to (which this one does not). I have cloned the repo from the example here. I’m working on reverse engineering why this one works, and mine does not. I even replaced my form, copy paste, with their example. It’s bizarre.

6

If the form is rendered server-side when requested, and not at build time, then Netlify has no way of knowing it exists.

In the repository you linked, the form is available at build time, so Netlify detects it.

7

Hey @coelmay, I may have mispoken. I meant statically generated, and the islands are SSR (which this component is not). Does SSG count as the same thing? This is how I’m rendering my content:

 <Defaults.PresentationGrid>
       <NetlifyForm
         classes="hero-form-anime relative top-5 opacity-5 md:left-5 md:top-0"
       />
 </Defaults.PresentationGrid>

All of these are astro components as well with no js. eg:

---
// Presentation.astro
const { style = "", classes = "", minWidth = 340 } = Astro.props;
---

<div
  class={`presentation-grid flex flex-col flex-1 max-w-md w-full  ${classes}`}
  style={{ ...style, "min-width": `${minWidth}px` }}
>
  <slot />
</div>

The example repo uses this technique to render their form, just a bit more simplified. I’ve tried copying their form directly into where I previously brought in <NetlifyForm />. I’ve tried the plain html file in public dir. I’ve tried switching from data-netlify=“true” and “netlify”, attributes. I’m a bit a a loss. I will try reproducing with minimal code on a separate page.

edit- after this I tried removing the "@astrojs/netlify/functions” and changing my astro.config output to static (from server). The site still renders, but this did not change anything. latest deploy

8

If you can create a minimal repository with the form as you are doing it in your private repository, and still have the same issue, please share it. From there the community at large can better assist.

2 Likes
9

final build: https://sweet-bunny-44d769.netlify.app

TL;DR: My suggestion, if you’re having trouble picking up your form with [ these ] technologies, is to create a build with [ just ] your form so that netlify picks it up. Then put the rest of you code back in. This seems to work (even multiple forms on the same page :man_facepalming:).

I never figured out why my build was not picking up the forms. I stripped the app down to the bare minimum and [eventually] the forms for were picked up by netlify. I tried to pinpoint the code that was preventing the desired outcome, but it still illudes me. The interesting thing is that the build above was transferred directly into the none working build (minus the git file) and it [ still ] wouldn’t pickup the form. Seems to me that it’s some sort of finicky behavior. The more complicated your apps gets, the harder it is for netlify to pick it up? I’m not kidding, the final build is almost line for line identical to what I started with when I opened this thread. Apologies for not providing that minimal code, I just kept building on it until it worked again and I’m tired of this. Thank you everyone who suggested I build with minimal code. Cheers.