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