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?