Form Handling about nextjs-wordpress-starter HOT 4 CLOSED

Updates 12/28 & 12/29

I did some research on how to integrate this feature and paired up with @ravewebdev on getting some of the infrastructure setup.

Here is what I have in place so far

1. Formik will be our primary form solution for handling field input state, validation, and overall form experiences.
2. We're using Yup for field validation so that we can easily define requirements on fields. See demo below.
3. Currently, we're using wp-graphql-gravity-forms to get GravityForm data from the Rest Endpoint in GraphiQL
4. I have a structure in place for how we'll handle GravityForm fields.

Handling GravityForm Fields

• Block level component Block/BlockGravityForms which handles mapping block data to the Form component
• Form molecule component is a generic form in charge of handling input state, form submissions, and rendering fields.
• The GravityFormFields takes field data from the block and loops through each field input.
• Each field will get mapped to a GravityForms field component (named after the type) which will map props to an input. For now this structure looks like the following Ex: <Field.Text />.

Challenges

There are still some challenges around the following areas that are in progress of being solved

• Setting up validation per GravityForm field. This is easy on a custom field, but will require some craftiness.
• Putting a list of starting GF Fields to focus on. Due to the amount of fields and form settings this is something that will need to be iterated on.
• Form submissions will require some research

Demos

Example of Yup in progress

from nextjs-wordpress-starter.

I got a lot features ready and have setup a draft PR for this ticket.

See #53

from nextjs-wordpress-starter.

Status Updates

Basic form support and Text field support have been setup. See #53 for details around what was included in that setup.

From here there is a new direction course that we can focus on.

1. Refactor dynamic validation into a class. This feature is quiet large and will need to utilize various Yup schema types. The way it's setup now will not scale well as we build out more fields.
2. Begin work on adding more fields. Since the layout / structure is in place more fields need to be intregrated.
3. Wire up additional GF form settings.
4. Wire up the GF Form submit.

from nextjs-wordpress-starter.

Closing this issue out in favor of smaller issues.

from nextjs-wordpress-starter.