Netlify forms and web components

Support
1

Site: hockey-etc.netlify.app

Our contact form uses web-components from lion. The components are imported via js and then used in an eleventy njk file.

I kind of expected to just be able to write the form normally, as i’m not completely rendering it with JS but I had to end up going the duplicated form method to get submissions pulling through properly.

Is that expected?

My code:

<form name='contact' netlify-honeypot="bot-field" netlify hidden>
			<input name="bot-field"/>
			<input type='text' name='first_name' />
			<input type='text' name='last_name' />
			<input type='email' name='email' />
			<select name="department">
				<option selected hidden value>Select department/team</option>
				...
			</select>
			<textarea name='message'></textarea>
		</form>
		<div class="...">
			<lion-form class="...">
				<form name="contact" class="..." method="POST" onsubmit="this._submit()" netlify>
					<input type='hidden' name='contact' value='contact' />
					<input type="hidden" name="subject" value="... Contact Us Submission" />
					{% set required_m = 'required_m' | getDatasourceForLangByName(locale) %}
					{% set required_f = 'required_f' | getDatasourceForLangByName(locale) %}

					<etc-input name="first_name" label="{{ 'first_name' | getDatasourceForLangByName(locale) }}" class="..." required>
						<span slot="help-text">({{ required_m }})</span>
					</etc-input>

					<etc-input name="last_name" label="{{ 'last_name' | getDatasourceForLangByName(locale) }}" class="..." autocomplete="family-name" required>
						<span slot="help-text">({{ required_m }})</span>
					</etc-input>

                                         ...
				</form>
			</lion-form>
		</div>
2

hi there, could you say a little more about what you mean by “duplicated form method”? if you have describing having to include a HTML cleartext version of your form, yes, that is still necessary. Our form parser reads through the HTML at build time and sets up your form handling - the only way, at present, to make it framework agnostic if for us to handle forms in this way. If you meant something else, do please let us know!

3

Ah no, that is what I meant haha. Thank you!

I just was seeing if there was a simpler solution for when I have to create a longer form someday, as copy/pasting and editing all the fields would be not super fun.

I can probably build a custom plugin for our CMS that lets me output the appropriate markup though.

Thanks again!

1 Like
4

Wanted to offer another approach I ended up using.

I created an HTML contact form using web components. Netlify detected the submissions but they were empty, even though I saw POST data in the network tab of developer tools. I’m guessing because Netlify couldn’t parse the form fields at build time.

I tried the duplicate/hidden form approach but started getting 404s on submission. Perhaps I didn’t have the right combination of attributes on the hidden & visible forms. Instead, I removed the hidden form and added duplicate (plain HTML) inputs in the visible form that were hidden and disabled. Hidden so the user doesn’t see them and disabled so they’re not included in the request payload. Netlify was then able to parse the fields and i no longer got empty submissions or 404s.

<form name="Contact" method="POST" data-netlify="true" netlify-honeypot="bot-field" data-netlify-recaptcha="true">
  <!-- these inputs allow Netlify to parse form fields but aren't seen by user/included in request payload --> 
  <input type="text" name="name" hidden disabled />
  <input type="email" name="email" hidden disabled />
  <textarea name="message" hidden disabled></textarea>
  <!-- these are the visible form fields (web components) with the data -->
  <sl-input label="Name" name="name" required></sl-input>
  <sl-input label="Email" name="email" required></sl-input>
  <sl-textarea label="Message" name="message"></sl-textarea>
  <div data-netlify-recaptcha="true"></div>
  <sl-button type="submit">Submit</sl-button>
</form>

Granted, I might have done the hidden form approach wrong. But i tried it several different ways without success. This approach seemed nicer since it only involves 1 form and doesn’t require me to brute-force different combinations of attributes across 2 forms, each followed by a deploy in hopes that it works.

1 Like
5

Sweet, thanks for providing that. I’ll have to try that out on our next build! I ended up not using web components for my form on this for time consideration.

I’d love to use shoelace on the next one.

Thanks