Netlify forms and web components

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>

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!

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