[{"data":1,"prerenderedAt":569},["ShallowReactive",2],{"navigation_docs":3,"-advanced-topics-drupal-forms":221,"-advanced-topics-drupal-forms-surround":565},[4,27,77,123,157,207],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":26},"Get started","majesticons:rocket-3-start-line","\u002Fget-started","1.get-started",[10,14,18,22],{"title":11,"path":12,"stem":13},"How it works","\u002Fget-started\u002Fhow-it-works","1.get-started\u002F10.how-it-works",{"title":15,"path":16,"stem":17},"Play online","\u002Fget-started\u002Fplay-online","1.get-started\u002F20.play-online",{"title":19,"path":20,"stem":21},"Create a new project","\u002Fget-started\u002Fcreate-new-project","1.get-started\u002F30.create-new-project",{"title":23,"path":24,"stem":25},"First steps","\u002Fget-started\u002Ffirst-steps","1.get-started\u002F40.first-steps",false,{"title":28,"icon":29,"path":30,"stem":31,"children":32,"page":26},"Guide","mdi:book-open-page-variant-outline","\u002Fguide","2.guide",[33,37,41,45,49,53,57,61,65,69,73],{"title":34,"path":35,"stem":36},"Customized API Output","\u002Fguide\u002Fcustomized-api-output","2.guide\u002F05.customized-api-output",{"title":38,"path":39,"stem":40},"Pages & Routing","\u002Fguide\u002Fpages-routing","2.guide\u002F10.pages-routing",{"title":42,"path":43,"stem":44},"Site layout & Menus","\u002Fguide\u002Fsite-layout-menus","2.guide\u002F20.site-layout-menus",{"title":46,"path":47,"stem":48},"Authentication","\u002Fguide\u002Fauthentication","2.guide\u002F40.authentication",{"title":50,"path":51,"stem":52},"Metatags & Local tasks","\u002Fguide\u002Fmetatags-local-tasks","2.guide\u002F50.metatags-local-tasks",{"title":54,"path":55,"stem":56},"Breadcrumbs & Messages","\u002Fguide\u002Fbreadcrumbs-messages","2.guide\u002F60.breadcrumbs-messages",{"title":58,"path":59,"stem":60},"Redirects","\u002Fguide\u002Fredirects","2.guide\u002F65.redirects",{"title":62,"path":63,"stem":64},"Editorial previews","\u002Fguide\u002Feditorial-previews","2.guide\u002F70.editorial-previews",{"title":66,"path":67,"stem":68},"Layout builder","\u002Fguide\u002Flayout-builder","2.guide\u002F80.layout-builder",{"title":70,"path":71,"stem":72},"Drupal Canvas","\u002Fguide\u002Fcanvas","2.guide\u002F90.canvas",{"title":74,"path":75,"stem":76},"Drupal CMS","\u002Fguide\u002Fdrupal-cms","2.guide\u002F95.drupal-cms",{"title":78,"icon":79,"path":80,"stem":81,"children":82,"page":26},"Advanced topics","bi:diagram-3","\u002Fadvanced-topics","3.advanced-topics",[83,87,91,95,99,103,107,111,115,119],{"title":84,"path":85,"stem":86},"Multi-frontend","\u002Fadvanced-topics\u002Fmulti-frontend","3.advanced-topics\u002F05.multi-frontend",{"title":88,"path":89,"stem":90},"Listings, Views","\u002Fadvanced-topics\u002Flistings-views","3.advanced-topics\u002F10.listings-views",{"title":92,"path":93,"stem":94},"Searches","\u002Fadvanced-topics\u002Fsearches","3.advanced-topics\u002F20.searches",{"title":96,"path":97,"stem":98},"JSON-API & GraphQL","\u002Fadvanced-topics\u002Fjsonapi-graphql","3.advanced-topics\u002F30.jsonapi-graphql",{"title":100,"path":101,"stem":102},"Caching","\u002Fadvanced-topics\u002Fcaching","3.advanced-topics\u002F40.caching",{"title":104,"path":105,"stem":106},"Error pages","\u002Fadvanced-topics\u002Ferror-pages","3.advanced-topics\u002F50.error-pages",{"title":108,"path":109,"stem":110},"Drupal forms","\u002Fadvanced-topics\u002Fdrupal-forms","3.advanced-topics\u002F60.drupal-forms",{"title":112,"path":113,"stem":114},"Site Templates","\u002Fadvanced-topics\u002Fsite-templates","3.advanced-topics\u002F65.site-templates",{"title":116,"path":117,"stem":118},"Block layout","\u002Fadvanced-topics\u002Fblock-layout","3.advanced-topics\u002F70.block-layout",{"title":120,"path":121,"stem":122},"Debugging API requests","\u002Fadvanced-topics\u002Fdebugging","3.advanced-topics\u002F80.debugging",{"title":124,"icon":125,"path":126,"stem":127,"children":128,"page":26},"Drupal","simple-icons:drupal","\u002Fdrupal","4.drupal",[129,133,137,141,145,149,153],{"title":130,"path":131,"stem":132},"Key modules","\u002Fdrupal\u002Fkey-modules","4.drupal\u002F10.key-modules",{"title":134,"path":135,"stem":136},"Custom elements","\u002Fdrupal\u002Fcustom-elements","4.drupal\u002F20.custom-elements",{"title":138,"path":139,"stem":140},"Routes","\u002Fdrupal\u002Froutes","4.drupal\u002F30.routes",{"title":142,"path":143,"stem":144},"Providing blocks","\u002Fdrupal\u002Fproviding-blocks","4.drupal\u002F40.providing-blocks",{"title":146,"path":147,"stem":148},"Custom Element Processors","\u002Fdrupal\u002Fcustom-element-processors","4.drupal\u002F50.custom-element-processors",{"title":150,"path":151,"stem":152},"Adding Drupal forms","\u002Fdrupal\u002Fadd-drupal-forms","4.drupal\u002F60.add-drupal-forms",{"title":154,"path":155,"stem":156},"Providing themes","\u002Fdrupal\u002Fthemes","4.drupal\u002F70.themes",{"title":158,"icon":159,"path":160,"stem":161,"children":162,"page":26},"Nuxt","simple-icons:nuxtdotjs","\u002Fnuxt","5.nuxt",[163,167,171,175,179,183,187,191,195,199,203],{"title":164,"path":165,"stem":166},"Introduction","\u002Fnuxt\u002Fintroduction","5.nuxt\u002F10.introduction",{"title":168,"path":169,"stem":170},"Setup","\u002Fnuxt\u002Fsetup","5.nuxt\u002F20.setup",{"title":172,"path":173,"stem":174},"Rendering Custom Elements","\u002Fnuxt\u002Frender-custom-elements","5.nuxt\u002F30.render-custom-elements",{"title":176,"path":177,"stem":178},"Default components","\u002Fnuxt\u002Fdefault-components","5.nuxt\u002F32.default-components",{"title":180,"path":181,"stem":182},"Composables","\u002Fnuxt\u002Fcomposables","5.nuxt\u002F35.composables",{"title":184,"path":185,"stem":186},"Custom Routes","\u002Fnuxt\u002Fcustom-routes","5.nuxt\u002F40.custom-routes",{"title":188,"path":189,"stem":190},"Page Layouts","\u002Fnuxt\u002Fpage-layouts","5.nuxt\u002F50.page-layouts",{"title":192,"path":193,"stem":194},"Component Previews","\u002Fnuxt\u002Fcomponent-previews","5.nuxt\u002F55.component-previews",{"title":196,"path":197,"stem":198},"Rendering modes","\u002Fnuxt\u002Frendering-modes","5.nuxt\u002F60.rendering-modes",{"title":200,"path":201,"stem":202},"Deployment options","\u002Fnuxt\u002Fdeployment","5.nuxt\u002F70.deployment",{"title":204,"path":205,"stem":206},"Resources","\u002Fnuxt\u002Fresources","5.nuxt\u002F90.resources",{"title":208,"icon":209,"path":210,"stem":211,"children":212,"page":26},"Deployment","solar:server-square-cloud-linear","\u002Fdeployment","6.deployment",[213,217],{"title":214,"path":215,"stem":216},"Deployment Strategies","\u002Fdeployment\u002Fdeployment-strategy","6.deployment\u002F10.deployment-strategy",{"title":218,"path":219,"stem":220},"Unified Hosting","\u002Fdeployment\u002Funified-hosting","6.deployment\u002F20.unified-hosting",{"id":222,"title":108,"body":223,"description":439,"extension":559,"links":560,"meta":561,"navigation":562,"path":109,"seo":563,"stem":110,"__hash__":564},"docs\u002F3.advanced-topics\u002F60.drupal-forms.md",{"type":224,"value":225,"toc":542},"minimark",[226,235,240,249,259,263,274,279,300,304,315,318,322,325,342,346,349,368,381,385,394,402,406,409,413,419,423,433,538],[227,228,229,230,234],"note",{},"At the moment Drupal forms are only supported with server-side ",[231,232,233],"a",{"href":197},"rendering mode",".",[236,237,239],"h2",{"id":238},"overview","Overview",[241,242,243,244,248],"p",{},"The \"Lupus Decoupled Form\" sub-module makes it easy to support Drupal forms in a decoupled frontend. The form HTML is rendered by Drupal and wrapped in a ",[245,246,247],"code",{},"\u003Cdrupal-form>"," custom element, such that the frontend can easily add some styling or custom JS-enhancements.",[241,250,251,252,258],{},"At the moment, progressive form submissions are supported, which work without JavaScript. JavaScript enhanced form submissions are currently not a priority, but can be achieved with some additional JavaScript code, see Issue ",[231,253,257],{"href":254,"rel":255},"https:\u002F\u002Fwww.drupal.org\u002Fproject\u002Flupus_decoupled\u002Fissues\u002F3471135",[256],"nofollow","#3471135"," for some code to get started.",[236,260,262],{"id":261},"how-does-it-work","How does it work?",[241,264,265,266,269,270,273],{},"Generally, Drupal renders the form as usual. The resulting HTML markup is wrapped into a ",[245,267,268],{},"\u003Cdrupal-form-{FORM-ID}>"," component, which simply shows the server-rendered HTML of the form. When the form is submitted, the frontend takes care of forwarding the POST request to the backend, where it's processed as usual. After form processing the request is rendered in a custom element response again: Either the page response contains a reloaded form or a redirect. Any messages for form validation fails or success are handled as usual via the ",[231,271,272],{"href":55},"Drupal message system"," and sent as part of the next page response. Thus, subsequently the frontend takes care of rendering the response appropriately in a new page or redirect response - just as it does for any other server-render page.",[275,276,278],"h3",{"id":277},"frontend-support","Frontend support",[280,281,282,291],"ul",{},[283,284,285,286],"li",{},"For the Nuxt frontend, The Nuxtjs Drupal-CE Connector module ships with a suitable default component: ",[231,287,290],{"href":288,"rel":289},"https:\u002F\u002Fgithub.com\u002Fdrunomics\u002Fnuxtjs-drupal-ce\u002Fblob\u002F2.x\u002Fplayground\u002Fcomponents\u002Fglobal\u002Fdrupal-form--default.vue",[256],"drupal-form--default.vue",[283,292,293,294,299],{},"There is ",[231,295,298],{"href":296,"rel":297},"https:\u002F\u002Fgithub.com\u002Fdrunomics\u002Fnuxtjs-drupal-ce\u002Fblob\u002F4d8c9e43d8a3ed1f1f6480425b25016b82e57579\u002Fsrc\u002Fruntime\u002Fserver\u002Fmiddleware\u002FdrupalFormHandler.ts",[256],"server middleware"," which takes care of handling the POST request and renders the response.",[236,301,303],{"id":302},"rendering-forms-in-the-frontend","Rendering forms in the frontend",[241,305,306,307,310,311,314],{},"Generally, the ",[245,308,309],{},"drupal-form--default"," component may be used to add form styles and JavaScript as needed, either generally for all forms via the default component, or individually by customizing things in a per-form component ",[245,312,313],{},"drupal-form--{FORM-ID}",". Any Drupal CSS or JavaScript assets for the form elements won't be included in the decoupled frontend, thus the frontend needs to take care of providing suitable replacement style and scripts as necessary.",[241,316,317],{},"In order to change the HTML markup of forms, the form elements need to be themed in Drupal.",[275,319,321],{"id":320},"theming-form-elements","Theming form elements",[241,323,324],{},"Since the markup is generated by Drupal, the HTML of individual form elements can be altered only by adjusting the Drupal markup with the help of a Drupal theme:",[280,326,327,336,339],{},[283,328,329,330,335],{},"For having a clean, semantic output of forms, the ",[231,331,334],{"href":332,"rel":333},"https:\u002F\u002Fwww.drupal.org\u002Fproject\u002Flupus_stark",[256],"lupus-stark theme"," has been created - which\nadds suitable Drupal twig files to do away with unnecessary Drupal-isms. That way decent markup is\ngenerated and necessary style adaptions are made possible by targeting elements using the\nreasonable default classes.",[283,337,338],{},"Generally, the active Drupal theme can be customized by setting the theme as site-wide standard theme. If the form is on a Drupal admin page, the Admin Theme will be applied though.",[283,340,341],{},"The module adds support for a special '_theme' key in route definitions, which allows Drupal developers to switch themes to the given theme-name specifically for the form routes, as preferred.",[236,343,345],{"id":344},"supported-drupal-forms","Supported Drupal forms",[241,347,348],{},"Lupus Decoupled ships with further sub-modules that enable support for further Drupal-forms as desired:",[280,350,351,358],{},[283,352,353,357],{},[354,355,356],"strong",{},"Lupus Decoupled Contact Forms"," - Adds support for the contact forms provided by the core contact module.",[283,359,360,363,364,367],{},[354,361,362],{},"Lupus Decoupled User Forms"," - Enables using Drupal user login and user password reset forms in the frontend. That way, user may login while getting a separate frontend cookie. Please refer to the ",[231,365,366],{"href":47},"Authentication page"," for details.",[241,369,370,371,376,377,380],{},"If you miss support for some Drupal form, please open an issue in the ",[231,372,375],{"href":373,"rel":374},"https:\u002F\u002Fwww.drupal.org\u002Fproject\u002Fissues\u002Flupus_decoupled?categories=All",[256],"Lupus Decoupled issue queue"," to add it! Please refer to the page ",[231,378,379],{"href":151},"Adding Drupal Forms"," for documentation on how this is done.",[236,382,384],{"id":383},"webforms","Webforms",[241,386,387,388,393],{},"The Lupus Decoupled Webform module provides support for ",[231,389,392],{"href":390,"rel":391},"https:\u002F\u002Fwww.drupal.org\u002Fproject\u002Fwebform",[256],"Webform","\nmodule (version 6.0 or later), a popular module for building forms using the UI.",[241,395,396,397,401],{},"Webforms integration utilizes the Lupus Decoupled Forms\nfunctionality (see ",[231,398,400],{"href":399},"#how-does-it-work","How it work?"," section), thus\na webforms get a custom elements API endpoint.",[275,403,405],{"id":404},"limitations","Limitations",[241,407,408],{},"Drupal JavasScript are currently not provided by the webform API response,\nthus any webform elements relying on JavaScript are missing the Drupal JavaScript.",[275,410,412],{"id":411},"confirmation-types","Confirmation types",[241,414,415,416],{},"Inline and page (default) confirmations are supported, but for page\nconfirmation type the user (or anonymous) needs to have access to \"view own\nwebform submissions\" set on webform settings configured at\n",[245,417,418],{},"admin\u002Fstructure\u002Fwebform\u002Fmanage\u002F{webform}\u002Faccess",[275,420,422],{"id":421},"submission-example","Submission example",[241,424,425,426,429,430,234],{},"A curl request example to submit a custom webform (with ",[245,427,428],{},"test_ce_webform"," id).\nNote that the submission webform id is ",[245,431,432],{},"webform_submission_test_ce_webform_add_form",[434,435,440],"pre",{"className":436,"code":437,"language":438,"meta":439,"style":439},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","curl -k -X POST --url https:\u002F\u002Flupus-decoupled.ddev.site\u002Fce-api\u002Fform\u002Ftest_ce_webform -F 'first_name=John' -F \"last_name=Doe\" -F \"checkbox=1\" -F \"op=Submit\" -F \"form_build_id=form-\u003Cform-build-id>\" -F \"form_id=webform_submission_test_ce_webform_add_form\" -H \"Accept: application\u002Fjson\"\n","bash","",[245,441,442],{"__ignoreMap":439},[443,444,447,451,455,458,461,464,467,470,474,477,480,482,485,488,491,493,495,498,500,502,504,507,509,511,513,516,518,520,522,525,527,530,532,535],"span",{"class":445,"line":446},"line",1,[443,448,450],{"class":449},"sBMFI","curl",[443,452,454],{"class":453},"sfazB"," -k",[443,456,457],{"class":453}," -X",[443,459,460],{"class":453}," POST",[443,462,463],{"class":453}," --url",[443,465,466],{"class":453}," https:\u002F\u002Flupus-decoupled.ddev.site\u002Fce-api\u002Fform\u002Ftest_ce_webform",[443,468,469],{"class":453}," -F",[443,471,473],{"class":472},"sMK4o"," '",[443,475,476],{"class":453},"first_name=John",[443,478,479],{"class":472},"'",[443,481,469],{"class":453},[443,483,484],{"class":472}," \"",[443,486,487],{"class":453},"last_name=Doe",[443,489,490],{"class":472},"\"",[443,492,469],{"class":453},[443,494,484],{"class":472},[443,496,497],{"class":453},"checkbox=1",[443,499,490],{"class":472},[443,501,469],{"class":453},[443,503,484],{"class":472},[443,505,506],{"class":453},"op=Submit",[443,508,490],{"class":472},[443,510,469],{"class":453},[443,512,484],{"class":472},[443,514,515],{"class":453},"form_build_id=form-\u003Cform-build-id>",[443,517,490],{"class":472},[443,519,469],{"class":453},[443,521,484],{"class":472},[443,523,524],{"class":453},"form_id=webform_submission_test_ce_webform_add_form",[443,526,490],{"class":472},[443,528,529],{"class":453}," -H",[443,531,484],{"class":472},[443,533,534],{"class":453},"Accept: application\u002Fjson",[443,536,537],{"class":472},"\"\n",[539,540,541],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":439,"searchDepth":543,"depth":543,"links":544},2,[545,546,550,553,554],{"id":238,"depth":543,"text":239},{"id":261,"depth":543,"text":262,"children":547},[548],{"id":277,"depth":549,"text":278},3,{"id":302,"depth":543,"text":303,"children":551},[552],{"id":320,"depth":549,"text":321},{"id":344,"depth":543,"text":345},{"id":383,"depth":543,"text":384,"children":555},[556,557,558],{"id":404,"depth":549,"text":405},{"id":411,"depth":549,"text":412},{"id":421,"depth":549,"text":422},"md",null,{},true,{"title":108,"description":439},"LbhDuSFuzQtpde0Rh5bKS2Dl_6yuRIeL38gTEo6ZiNo",[566,567],{"title":104,"path":105,"stem":106,"description":439,"children":-1},{"title":112,"path":113,"stem":114,"description":568,"children":-1},"Drupal CMS supports site templates: pre-configured starting points that combine Drupal recipes, a theme, design elements, and default content into a fully functional website ready to use from day one. See the Drupal blog post on site templates for the broader vision.",1776084717867]