<input type="text" id="mf-input-text-f7bca72" 
				name="mf-listing-fname" 
				placeholder="${ parent.decodeEntities(`Your Name`) } "
				onInput=${ parent.handleChange }
									aria-invalid=${validation.errors['mf-listing-fname'] ? 'true' : 'false'}
					ref=${ el => parent.activateValidation({"message":"This field is required.","minLength":1,"maxLength":"","type":"none","required":false,"expression":"null"}, el) }
							/>
							<${validation.ErrorMessage}
					errors=${validation.errors}
					name="mf-listing-fname"
					as=${html``}
					/>
			<input 
				type="email" 
				defaultValue="" 
				class="mf-input " 
				id="mf-input-email-43ef69d" 
				name="mf-email" 
				placeholder="${ parent.decodeEntities(`Email Address`) } " 
				onBlur=${parent.handleChange} onFocus=${parent.handleChange} aria-invalid=${validation.errors['mf-email'] ? 'true' : 'false' } 
				ref=${el=> parent.activateValidation({"message":"This field is required.","emailMessage":"Please enter a valid Email address","minLength":1,"maxLength":"","type":"none","required":false,"expression":"null"}, el)}
							/>
						<${validation.ErrorMessage} 
				errors=${validation.errors} 
				name="mf-email" 
				as=${html``}
			/>
			<${props.Flatpickr}
					name="mf-date"
					className="mf-input mf-date-input mf-left-parent "
					placeholder="${ parent.decodeEntities(`Select Your Date`) } "
					options=${{"minDate":"","maxDate":"","dateFormat":"m-d-Y","enableTime":"","disable":[],"mode":"single","static":true,"disableMobile":true,"time_24hr":false}}
					value=${parent.getValue('mf-date')}
					onInput=${parent.handleDateTime}
					aria-invalid=${validation.errors['mf-date'] ? 'true' : 'false'}
					ref=${el => props.DateWidget(
							el, 
							'', 
							{"message":"This field is required.","required":false},  
							register, 
							parent 
						)}
					/>
							<${validation.ErrorMessage}
					errors=${validation.errors}
					name="mf-date"
					as=${html``}
					/>
			<${props.Flatpickr}
					name="mf-time"
					className="mf-input mf-date-input mf-time-input mf-left-parent "
					placeholder="${ parent.decodeEntities(`Select Time`) } "
					options=${{"enableTime":true,"dateFormat":"h:i K","noCalendar":true,"time_24hr":false,"static":true}}
					value=${parent.getValue('mf-time')}
					onInput=${parent.handleDateTime}
					aria-invalid=${validation.errors['mf-time'] ? 'true' : 'false'}
					ref=${
						el => {
							if( el && el.node.nextSibling ) {
								if( el.props.value.trim().length ) {
									el.node.nextSibling.classList.add('value-found');
								}else {
									el.node.nextSibling.classList.remove('value-found');
								}
							}
							register({ name: "mf-time" }, parent.activateValidation({"message":"This field is required.","required":false}))
						}
					}
					/>
							<${validation.ErrorMessage}
					errors=${validation.errors}
					name="mf-time"
					as=${html``}
					/>
			<input
				type="text"
				class="mf-input "
				id="mf-input-text-c88785c"
				name="mf-text"
				placeholder="${ parent.decodeEntities(`About Yourself`) } "
									onInput=${parent.handleChange}
					onBlur=${parent.handleChange}
					aria-invalid=${validation.errors['mf-text'] ? 'true' : 'false'}
					ref=${el =>{
												parent.activateValidation({"message":"This field is required.","minLength":1,"maxLength":"","type":"none","required":false,"expression":"null"}, el)
					}}
								/>
							<${validation.ErrorMessage}
					errors=${validation.errors}
					name="mf-text"
					as=${html``}
					/>
							<button type="submit" id="">
					${ parent.decodeEntities(`SUBMIT MESSAGE`) } 
				</button>