- We submit the form values to a custom API route first. The API route
- then submits the form to Drupal using the{" "}
-
- Webform REST
+ This example uses the{" "}
+
+ Next.js Webform
{" "}
+ library to render and submit forms built using the Drupal Webform
module.
-
- This is useful if we need to hide client IDs and secrets or our
- Drupal implementation.
-
See Example
diff --git a/examples/example-webform/pages/server-side.tsx b/examples/example-webform/pages/server-side.tsx
index 28afe26f2..0e3185731 100644
--- a/examples/example-webform/pages/server-side.tsx
+++ b/examples/example-webform/pages/server-side.tsx
@@ -2,39 +2,57 @@ import * as React from "react"
import { GetStaticPropsResult } from "next"
import Head from "next/head"
import Link from "next/link"
-import { getResourceCollection, DrupalTaxonomyTerm } from "next-drupal"
-import { useForm } from "react-hook-form"
-import * as yup from "yup"
-import { yupResolver } from "@hookform/resolvers/yup"
-
-import { contactFormSchema } from "../validations/contact"
-
-type FormData = yup.TypeOf
+import withCustomStyles from "../components/withCustomStyles"
+import {
+ resolveWebformContent,
+ Webform,
+ components,
+ WebformProps,
+} from "nextjs-drupal-webform"
+import { drupal } from "basic-starter/lib/drupal"
+import classNames from "classnames"
+import WebformButton from "../components/WebformButton"
interface WebformPageProps {
- teams: DrupalTaxonomyTerm[]
+ webform: WebformProps
}
-export default function WebformPage({ teams }: WebformPageProps) {
- const [status, setStatus] = React.useState<"error" | "success">()
- const { register, handleSubmit, formState, reset } = useForm({
- resolver: yupResolver(contactFormSchema),
- })
-
- // This makes a POST to a custom API route.
- // The Drupal base URL and the webform_id are NOT exposed.
- async function onSubmit(data: FormData) {
- const response = await fetch(`/api/contact`, {
- method: "POST",
- body: JSON.stringify(data),
- })
-
- if (response.ok) {
- reset()
- return setStatus("success")
- }
-
- return setStatus("error")
+export default function WebformPage({ webform }: WebformPageProps) {
+ const labelProps = {
+ className: classNames(["block", "text-sm", "font-medium", "text-gray-700"]),
+ }
+ const fieldProps = {
+ className: classNames([
+ "relative",
+ "block",
+ "w-full px-3",
+ "py-2 mt-1 text-gray-900",
+ "placeholder-gray-500",
+ "border border-gray-300",
+ "rounded-md appearance-none",
+ "focus:outline-none",
+ "focus:ring-black",
+ "focus:border-black",
+ "focus:z-10",
+ "sm:text-sm",
+ ]),
+ }
+ const wrapperProps = {
+ className: classNames(["space-y-3"]),
+ }
+ const buttonProps = {
+ className: classNames([
+ "px-4",
+ "py-2",
+ "text-sm font-medium",
+ "text-white",
+ "bg-black",
+ "border border-transparent",
+ "rounded-md",
+ "shadow-sm",
+ "hover:bg-black",
+ ]),
+ "data-cy": "btn-submit",
}
return (
@@ -47,123 +65,52 @@ export default function WebformPage({ teams }: WebformPageProps) {
Next.js for Drupal
Webform Example - Server Side
- We submit the form values to a custom API route first. The API route
- then submits the form to Drupal using the{" "}
-
- Webform REST
+ This example uses the{" "}
+
+ Next.js Webform
{" "}
+ library to render and submit forms built using the Drupal Webform
module.
-
- This is useful if we need to hide client IDs and secrets or our
- Drupal implementation.
-