# ACF Frontend Form

Found in the Elementor panel under **Dotjuice → ACF Frontend form**. Requires Advanced Custom Fields (ACF).

## How it works

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. |

## 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. 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 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

- 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.