WebForm

Installation

  1. Install the Vactory Decoupled Webform module: drush en vactory_decoupled_webform

  2. Create your custom webform dynamic field widget

Here's an example :

./modules/custom/your_custom_module/widgets/webform/settings.yml

name: 'Simple'
multiple: FALSE
category: 'Formulaires'
enabled: TRUE
fields:
  webform:
    type: webform_decoupled
    label: 'Formulaire'
    options:
      '#required': TRUE
      '#default_value':
        webform_id: your_webform_id
  1. Create a new page and integrate the recently created webform widget.

Client Side

Next, visit the page created on the NextJs app.

⚠️
As usual, you will come across a warning indicating the need to create a mapping file. Follow the steps outlined in the "Static Templates" section to proceed.

./components/widgets/formulaires/WebformWidgetContainer.jsx

export const config = {
    id: "vactory_custom_module:webform",
}


export const WebformWidgetContainer = ({ data }) => {
    console.log({data})
    return <>Webform</>
}

In order to display the webform using our widget, we need to follow a series of steps

  1. Import the Form component from webform module (Vactory NextJs module).
const Form = dynamic(() => import("@/form").then((mod) => mod.Form), {
    ssr: false,
    loading: () => <p>Loading...</p>,
})```


2. Retrieve the webform information from the widget data by extracting it.


```jsx
const webform_id = get(data, "components.0.webform.id", null)
const elements = get(data, "components.0.webform.elements", null)
let style = get(data, "components.0.webform.style", {})
let buttons = get(data, "components.0.webform.buttons", {})

Next show the webform using the Form component.

<Form 
    webformId={webform_id} 
    schema={elements} 
    styles={style} 
    buttons={buttons} 
/>

Here is an example of how our webform widget code might look like:

./components/widgets/formulaires/WebformWidgetContainer.jsx

import get from "lodash.get"
const Form = dynamic(() => import("@/form").then((mod) => mod.Form), {
    ssr: false,
    loading: () => <p>Loading...</p>,
})


export const config = {
    id: "vactory_custom_module:webform",
}


export const WebformWidgetContainer = ({ data }) => {
    const webform_id = get(data, "components.0.webform.id", null)
    const elements = get(data, "components.0.webform.elements", null)
    let style = get(data, "components.0.webform.style", {})
    let buttons = get(data, "components.0.webform.buttons", {})


    if (style !== "") {
        style = JSON.parse(style)
    }


    if (buttons !== "") {
        buttons = JSON.parse(buttons)
    }


    return (<>
        {elements && (
            <Form 
                webformId={webform_id} 
                schema={elements} 
                styles={style} 
                buttons={buttons} 
            />
        )}
    </>)
}


export default WebformWidgetContainer

Override the webform schema

The Form component contains a property known as render.

This render property serve to let developers to customize each field as desired.

Here is an example that demonstrates the usage of the render property.

<Form
    webformId={webform_id} 
    schema={elements} 
    styles={style} 
    buttons={buttons} 
    render={(resetForm, isLoading, isSuccess, isError) => {
        return (
            <div className="flex flex-col gap-y-[32px]">
                <div>
                    <div className="mt-1">
                        <RenderField field={["name", schema.name]} />
                    </div>
                </div>
                <div>
                    <div className="mt-1">
                        <RenderField field={["mail", schema.mail]} />
                    </div>
                </div>
                <div className="grid grid-cols-2 gap-x-[32px]">
                    <Button
                        className="col-start-2 self-end"
                        disabled={isLoading}
                        type="submit"
                    >
                        Send
                    </Button>
                </div>
            </div>
        )
    }}
></Form>

Make sure you have imported the RenderField component

import { RenderField } from "@/form"

The webform default values

There are two methods to set default values for webform elements.

First method :

  1. Visit the build page of your webform on drupal Side : /admin/structure/webform/manage/your_webform_id

  2. To provide a default value for each webform element, you need to edit the settings of each respective element.

Set your default value and save changes.

Second method :

The Form component contains a property known as runtimeDefaultValues.

The purpose of the runtimeDefaultValues property is to enable developers to define default values for individual fields according to their preferences.

Here is an example that demonstrates the usage of the runtimeDefaultValues property.

runtimeDefaultValues = {
    name: 'khalid',
    mail: 'k.bouhouch@void.fr'
}


return (<>
    {elements && (
        <Form 
            webformId={webform_id} 
            schema={elements} 
            styles={style} 
            buttons={buttons} 
            runtimeDefaultValues={runtimeDefaultValues}
        />
    )}
</>)
BannerSearch Page