Generate And Preview Images Before Submission

Frontend image generation requires Premium or Agency.

Configure The Feed #

1. Add an optional File Upload field for the generated image.
2. Create an AI Image feed and choose Frontend button.
3. Build a prompt with merge tags from fields the visitor completes before generation.
4. Choose the target File Upload field, size, quality, and format.
5. Choose public or administrator-only frontend access.
6. Save the feed and note its numeric ID.

Add The Button And Preview #

Place these inside the form, replacing 456:

[goaif_image_button feed_id="456" label="Generate image"]
[goaif_image_preview feed_id="456" aspect="3/2"]

Use the same feed ID for both. Add an optional placeholder_url to the preview when the design needs an initial image. The placeholder and generated image fill the preview’s aspect ratio; images with different proportions are cropped from the center.

What Happens Before Submission #

The visitor selects the button. The plugin obtains a single-use token, sends the current prompt values to OpenAI, stores a temporary verified generation session, and displays the result. The temporary image is not yet an ordinary entry upload.

For a single-file target, generation stops before contacting OpenAI when the visitor has already selected or temporarily uploaded a file. Remove that file before generating. This avoids submitting two files to a field whose limit is one and preserves the visitor’s upload by default. Multi-file targets can contain both manual and generated files, subject to the field’s configured file limit.

When the form is submitted, the plugin verifies the generation session and passes the file through the target File Upload field handling. The saved entry can then distinguish a temporary generated image from the verified attached file.

If conditional logic hides the target field at submission, the feed attaches the verified image after Gravity Forms creates the entry. This behavior is enabled by default and can be disabled with the feed’s Conditionally Hidden Target setting. The fallback does not alter the field’s conditional logic.

The form must submit a value from at least one other visible field when the target is hidden. If the generated image is the only field with a value, Gravity Forms rejects the submission as empty before an entry exists, so the plugin has nowhere to attach the image. In that case Gravity Forms displays At least one field must be filled out.

If the visitor generates another image, confirm the desired preview is visible before submission. Avoid multiple previews with the same feed ID unless they are intentionally showing the same result.

If another field fails validation, the verified image session and preview are restored when Gravity Forms rerenders the form. The image remains temporary and can still expire if the visitor leaves the form open for more than one hour.

Developers who intentionally want a generated image to replace an occupied single-file target can opt in with the following filter. Replacement discards the visitor’s selected or temporary upload after image generation succeeds, so use it only where that behavior is clearly communicated:

add_filter(
    'goaif_frontend_image_existing_file_policy',
    static function ( $policy, $feed ) {
        return 456 === absint( $feed['id'] ?? 0 ) ? 'replace' : $policy;
    },
    10,
    2
);