Cannot get Netlify to recognize form in Angular app

Hi, all. I am trying to complete my first website with Angular and have gotten very, very stuck on this issue. I am trying to build a contact page and simply cannot get Netlify to recognize the form in the html file. I’ve Googled diligently and have tried multiple solutions. Currently, my html form looks like this:

<form subject='A Message From Personal Website' netlify="true" name="contact" id='contact-form' method="post" action="/thanks/" data-netlify-honeypot="bot-field">
  <input type="hidden" name="form-name" value="contact" />
  <p style='display: none;'>
    <label>Don’t fill this out if you're human: <input name="bot-field" /></label>
  </p>
  <p class='form-row'>
    <label>Your Name: </label><input type='text' name='name' required/>
  </p>
  <p class='form-row'>
    <label>Email Address: </label><input type='email' name='email' required/>
  </p>
  <p class='form-row'>
    <label>A Favorite Work of Art: </label><input type='text' name='art'/>
  </p>
  <p class='form-row'>
    <label>Your Message: </label><textarea id='message' name='message' required></textarea>
  </p>
  <p id='button-row'>
    <button id='submit-button' type='submit'>Contact Me!</button>
  </p>
</form>

So you can see I already know about the hidden input solution that seems to be necessary with static site generators. Right now, I have “netlify=‘true’” on my form element, however I have also tried “data-netlify=‘true’”, “data-netlify=‘true’” with simply a “netlify” attribute, and combinations of those three things, none of which worked. I have also tried the exact form listed in the Netlify form documentation on the contact view of my app, which also did not produce a form recognized by Netlify. I have included a screenshot of the forms tab from my overview page (no forms present).

Here is the url of the netlify instance (struggling to get this to work as a hyperlink for some reason): https://focused-yalow-c0a534.netlify.com/ Just click on the contact tab in the top right corner to see the form.

I have a feeling this is either an Angular specific issue or I am doing something fundamentally wrong regarding the handling of forms. Thanks for any insight you all can provide.

1 Like

Hi @huntzinger92! Welcome to netlify community.

I’m not sure if your issue is related to Angular or not. Check out this post for basic forms troubleshooting first and let us know if anything here helps solve it: [Support Guide] Form problems, form debugging, 404 when submitting

1 Like

Thanks for replying. I’ve done everything on that list except for this: “6) Make sure that you POST your form request (not GET) with a Content-Type of application/x-www-form-urlencoded in most cases. However, if and only if you are submitting the form with a file upload then the Content-Type needs to be multipart/form-data instead.”

I thought Netlify automatically handled the form simply by adding the correct form attributes in the html. The only way I know of to do that particular step is to manually set up my own post request with that particular header. Do I need to set up my own post request with code or should the html markup be enough for Netlify’s bots? If I do need to set my own up, where do I send it? Just “/”? Sorry if this is a silly question, I’m pretty new to web development.

I’ve gotten Netlify to recognize the form’s existence by including a hidden form in the index.html file and adding a hidden input with the “form-name” attribute in the Angular component html file. Unfortunately, it’s still not sending submissions. Clicking the contact button doesn’t send the user to the success page and there is no network activity when it’s pressed. My current code/html looks like this:

Hidden form:

<form name="contact" netlify netlify-honeypot="bot-field" hidden>
  <input type="text" name="name" />
  <input type="email" name="email" />
  <input type="text" name="art" />
  <textarea name="message"></textarea>
</form>

Html from “contact” Angular component:

<form subject='A Message From Personal Website' name="contact" id='contact-form' method="post">
  <input type="hidden" name="form-name" value="contact" />
  <p style='display: none;'>
    <label>Don’t fill this out if you're human: <input name="bot-field" /></label>
  </p>
  <p class='form-row'>
    <label>Your Name: </label><input type='text' name="name" required/>
  </p>
  <p class='form-row'>
    <label>Email Address: </label><input type='email' name="email" required/>
  </p>
  <p class='form-row'>
    <label>A Favorite Work of Art: </label><input type='text' name="art"/>
  </p>
  <p class='form-row'>
    <label>Your Message: </label><textarea id='message' name="message" required></textarea>
  </p>
  <p id='button-row'>
    <button id='submit-button' type='submit'>Contact Me!</button>
  </p>
</form>

I’m guessing that this is an issue with the POST request the form is supposed to be sending, but it’s hard for me to nail down. I tried deploying the React contact form listed in the docs here and it worked for me, so this seems to be Angular specific. Anyone got an idea?

I’ve got the solution. Unfortunately, the type of solution shown in Netlify’s form docs for React doesn’t work in Angular because something seems to go wrong with sending the form data; you have to send the form data as a post request manually. Netlify gives an example of how to do this in jQuery in their docs, but the Angular solution looks pretty different. I never found a clear, Angular-specific explanation for making forms work with Netlify, so I’ll try to write a complete and succinct one here.

  1. We have to add a duplicate, hidden version of the form in a plain html file (i.e., not one rendered by a component) so that Netlify’s bots can see it and then link that one with our visible, component-rendered form. In Angular, that means the hidden, duplicate form needs to go in our index.html file and linked with your “real” form via a hidden input html element with a name=“form-name” attribute. This part is covered in Netlify’s docs here.
  1. We need to make our component form a reactive form.

  2. Send the tracked form values to our index.html file (or wherever you put the hidden, duplicate form in your html) with a post request. In Angular, this means we need to import the HttpClientModule in our app.module.ts file and then HttpClient and HttpParams in our relevant form component. Unless you’ve put the hidden form somewhere besides index.html or changed the route for index.html, we need to send the post request to “/”. It is essential that we add a header of “‘Content-Type’: ‘application/x-www-form-urlencoded’” to the post request.

Here is a link to the contact form component code in my GitHub repository that shows how to set up the reactive form (make sure you check the contact component html to the see form as well), import the relevant Http and Form modules, and send the post request.

Hope that helps! I found little chunks of the information I needed scattered in multiple places, but hopefully it’s helpful for somebody to have it all together.

2 Likes

This is awesome and super helpful, @huntzinger92, thank you very much! I’ll work on an example using your intel and get a post out plus work with our docs team to see the best way to incorporate the info you’ve provided. Thanks, again!

3 Likes

Thank, it worked.

I don’t know if it can help someone but :slight_smile:

1 Like

Thanks for the tip @bboris! You can also add this information to a netlify.toml file. Or run ng add netlify-schematics to add a toml file with the redirects already in place (currently it will rewrite your existing toml file though, i’m working on that!).

netlify.toml (in root directory)

[build]
  command="ng build --prod && npm run scully"
  publish="dist/static"
[[redirects]]
  from ="/*"
  to="/index.html"
  status=200

Also, if your form is pretty simple like the one listed above, you could use Scully to pre-render it and add the hidden input. I’ve got this working on this project but feel free to ping me with any questions.

I’m hoping to release a post on this soon!

Thanks!

Hi,
Thanks a lot! it worked for me too!
Have you tried the file upload yet using the same strategy?
Wondering if anyone has.

I have an app hidden behind login screen so I couldn’t prerender the pages at first. Did a cool trick to prerender my forms in an open lazy loaded route so Scully could prerender hidden forms during the build. While running on client side route automatically redirects to login screen, so it feels like there’s no ‘collection’ route available. This way Netlify recognizes the forms and I’m able to run simple POST methods within any Angular route. Cool little trick keeping ng app pretty much intact :smile:

1 Like

Hi, @huntzinger92 ! I want to take a look at github, for this topic, but the provided link is not active anymore. Is there a way that I can check it, please? I need for my project, where I have exactly the same problem as you did