Headstartwp - demo contact form 7

Blocks.js

import { BlocksRenderer, YoutubeLiteBlock, ImageBlock, DebugBlock } from '@headstartwp/core/react';
import { TwitterBlock, ImageComponent, LinkBlock } from '@headstartwp/next';

import React from 'react';

import { css } from '@linaria/core';
import PropTypes from 'prop-types';

const ContactFormBlock = ({tagName, classList, domNode, style, children, html: html}) => {
    const { id } = JSON.parse ( domNode.attribs['data-wp-block'] );
	const headlessWpUrl = process.env.NEXT_PUBLIC_HEADLESS_WP_URL;

	const inputsPattern = '<p><label.*\n.*label>';
	const labelPattern = '<label>(.*?)<';
	const namePattern = '<(input|textarea).*?name=\"([^"]+)[^>]*>'; 
	const typePattern = '<(input|textarea).*?type=\"([^"]+)[^>]*>'; 

	const metchs = html.matchAll(inputsPattern); 
	let inputs = [];

	Array.from(metchs).forEach(metch => {

		const label = metch[0].match( labelPattern );
		const name = metch[0].match( namePattern );
		const type = metch[0].match( typePattern );

 		if( ! name[2].startsWith('_wpcf7') ) {
			const required = metch[0].includes('wpcf7-validates-as-required'); 

			inputs.push({
				required,
				name: name[2],
				tag: name[1],
				type: type?.[2],
				label: label[1]
			});	
		}	 
	});

    return (
		<>
			<form method="POST" action={headlessWpUrl + '/wp-json/contact-form-7/v1/contact-forms/' + id + '/feedback'} encType="multipart/form-data">
				{ inputs.map( ( { required, name, tag, type, label}, index ) => {
					return (
						<div key={index}>
							<label htmlFor={name}>{label}
								{ React.createElement(tag, { type:type, name, required, id:name}) }
							</label>
						</div>
					);
				})}
			
				<button type="submit">Submit</button>
			</form>
		</>
    );
};

export const Blocks = ({ html }) => {
	return (
		<div
			className={css`
				position: relative;
			`}
		>
			<BlocksRenderer html={html}>
				<ImageBlock component={ImageComponent} />
				<LinkBlock />
				<TwitterBlock />
				<YoutubeLiteBlock />
				<ContactFormBlock tagName="div" classList="wp-block-contact-form-7-contact-form-selector" html={html} />
			</BlocksRenderer>
		</div>
	);
};

Blocks.propTypes = {
	html: PropTypes.string.isRequired,
};

export default Blocks;