ACF Frontend Form docs: create/update modes + styling; dev server auto-reload

Rewrite the ACF Frontend Form widget doc for the new Update/Create modes,
redirect option, reliable submissions, live editor tabs and the new style
controls. Switch the container to the Docusaurus dev server so editing docs
auto-updates the live site with no rebuild or restart.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

docker-compose.yaml

@@ -10,17 +10,19 @@ services:
     restart: always
     environment:
       SITE_URL: ${SITE_URL}
-      NODE_ENV: production
+      NODE_ENV: development
     volumes:
-      # The markdown source content — edit files here, then
-      # `docker compose up -d --build` (or just `restart`) to rebuild and
-      # pick up the changes. Organised as one folder per plugin.
+      # The markdown source content — edit files in here and the running dev
+      # server picks them up automatically: no rebuild, no restart. Organised
+      # as one folder per plugin.
       - ./docs:/app/docs
-    # Rebuilds the static site fresh on every container start (picking up
-    # whatever is currently in ./docs and the current SITE_URL), then serves
-    # the result. A few seconds slower to start than pre-built static files,
-    # but means editing docs never requires touching the image.
-    command: sh -c "npm run build && npm run serve -- --host 0.0.0.0 --port ${PORT}"
+    # Runs the Docusaurus dev server, which watches ./docs and recompiles on
+    # every change, so editing a doc updates the live site with no container
+    # restart or rebuild. `--poll` makes file-change detection reliable across
+    # the bind mount. For a truly live browser refresh (HMR) enable
+    # "Websockets Support" on this host in Nginx Proxy Manager; without it an
+    # already-open tab still updates on the next manual refresh.
+    command: sh -c "npm run start -- --host 0.0.0.0 --port ${PORT} --no-open --poll 1000"
     networks:
       - proxy
     # No host port published — Nginx Proxy Manager reaches this container

docs/dotjuice-elementor-tools-pro/widgets/acf-frontend-form.md

@@ -4,29 +4,67 @@ Found in the Elementor panel under **Dotjuice → ACF Frontend form**. Requires
 
 ## How it works
 
-Place this widget on a template that renders a single post or page — it displays an editable form for **whichever post is currently being viewed**, using ACF's own native form rendering. This widget only works on singular posts/pages (a single product, a single post, a single custom post type entry); it doesn't render anything on archive pages, the homepage, or similar listing pages.
+This widget renders an editable form using ACF's own native form rendering (so tabs, repeaters, and every field type look and behave exactly as they do in the WordPress dashboard). It can work in one of two modes:
+
+- **Update current post** — edits **whichever post is being viewed**. Place it on a single-post/product/page template in the Elementor Theme Builder.
+- **Create new post** — creates a **brand-new post** of a type you choose. Place it on a normal page (e.g. a "Submit a Case Study" page).
+
+You pick the mode explicitly in the widget settings — see below.
 
 ## Content settings
 
 | Setting | What it does |
 |---|---|
+| **Form Mode** | **Update current post** edits the post/page being viewed (use in a single-post template). **Create new post** makes a new post of the type below (use on a normal page). |
+| **New Post Type** | *(Create mode only)* The post type the new entry is created as — any public post type on your site. |
+| **New Post Status** | *(Create mode only)* The status the new post is saved with: Draft, Pending Review, Published, or Private. Draft or Pending is recommended for public submission forms so you can review before it goes live. |
+| **Redirect After Submit** | Optional. Where to send the visitor after a successful submit — leave blank to stay on the page. You can use the tokens `%post_url%` (the created/edited post) and `%post_id%`. |
 | **ACF Field Groups** | Choose which of your site's ACF field groups should be editable in this form. Nothing renders until at least one is selected. |
 | **Enable Title** | Includes the post title as an editable field. |
 | **Enable Content** | Includes the main content editor as an editable field. |
-| **Submit Button Label** | The text on the form's submit button (default "Update"). |
+| **Submit Button Label** | The text on the form's submit button. |
+
+## Which mode should I use?
+
+Note that a normal WordPress **Page** counts as a "single" item, so the widget can't reliably guess your intent — that's why the mode is an explicit choice rather than automatic.
+
+- Building an **edit form** inside a Single Post / Single Product / Single CPT template? → **Update current post**.
+- Building a **submission form** on a standalone page (front-end post creation)? → **Create new post**, and set the post type + a Draft/Pending status.
+
+## Styling
+
+The style tab targets ACF's real markup, and the tabs render live in the Elementor editor so you can see your changes as you make them (see "Live editing" below).
+
+**ACF Tabs** — typography, tab padding, gap between tabs, tab border radius, a border around each tab button (handy for removing the white borders ACF outputs by default), an underline colour/width for the tab bar, and Normal / Hover / Active colour states (text + background) for the tab buttons.
+
+**Fields & Labels**
+- *Labels* — colour and typography.
+- *Field Separator* — colour and width of the top border ACF draws between stacked fields.
+- *Inputs* — border, radius and padding, plus **Normal** and **Active / Focus** states, each with their own text colour and background. The Focus state adds a border colour and an optional glow/outline ring so the active field stands out.
+
+**Submit Button** — typography, padding, radius, border, and Normal / Hover colours.
+
+Several of ACF's default structural borders and fills (the tab-bar border and background, the divider between side-by-side fields, and the box around taxonomy checkbox lists) are removed automatically to give a clean starting point.
+
+## Live editing
+
+The ACF tab bar is normally built by ACF's own JavaScript, which doesn't run inside the Elementor editor. This widget loads ACF's scripts into the editor preview and re-initialises the form when Elementor renders it, so the tabs appear as real tabs and your tab/field styling updates live. On first open there may be a brief flash of a plain list before it becomes tabs — that's normal and only happens in the editor.
 
 ## Setting it up
 
-1. Place the widget on a Single Post, Single Product, or other singular template in your Elementor Theme Builder.
-2. Select the ACF field group(s) you want editable.
-3. Decide whether the post title and/or content should be editable too.
-4. Publish and test by viewing an actual individual post/page that uses this template.
+1. Add the widget to the appropriate template or page.
+2. Set **Form Mode** — Update for an edit form in a single template, or Create for a submission form on a page (then choose the new post type and status).
+3. Select the ACF field group(s) you want in the form.
+4. Decide whether the post title and/or content should be editable too.
+5. Optionally set a redirect for after submit.
+6. Publish and test with a real submission.
 
 ## ⚠ Important: this widget has no built-in access restriction
 
-Anyone who can view the page this widget is placed on can submit changes through the form — there's no automatic login requirement or capability check. If you only want logged-in users, specific roles, or the post's author to be able to edit, you'll need to add that restriction yourself: placing the widget inside a members-only page, using a membership/restriction plugin, or a conditional visibility rule in Elementor Pro. Don't place this widget on a fully public page unless open editing is genuinely what you want.
+Anyone who can view the page this widget is placed on can submit the form — there's no automatic login requirement or capability check. This matters for **both** modes: on an Update form it means anyone could edit the post; on a Create form it means anyone could create posts. If you only want logged-in users, specific roles, or the post's author to use it, add that restriction yourself — a members-only page, a membership/restriction plugin, or an Elementor Pro conditional-visibility rule. Don't place this widget on a fully public page unless open editing/submission is genuinely what you want.
 
 ## Good to know
 
-- This widget only renders a form when viewing an actual singular post or page — on archives, the homepage, or search results, it won't display anything.
-- The uploader for image/file fields uses a simple file picker rather than the full WordPress media library browser.
+- Submissions are processed early (before the page renders), so saving and the after-submit redirect work reliably — including when the widget lives in a Theme Builder template.
+- In **Update** mode the widget only renders on an actual singular post/page; on archives, the homepage, or search results it won't display. **Create** mode works on any page.
+- Remotely fetched images/files use ACF's basic uploader (a simple file picker) rather than the full WordPress media library browser.