Fluent Forms Photo and Submit Upload Fields: Configuration, Purview, and Use Cases

Some kinds can’t do their work with message alone. A job application needs a return to, a support request requires a screenshot, and a sponsorship kind requires a logo design.

Fluent Forms manages this with two fields: Photo Upload and Submit Upload area. I’ll show you just how to set up every one, choose limits that keep junk off your web server, choose where data are saved, and design the upload location so it fits the remainder of your type.

TL; DR

• File Upload accepts photos, sound, video clip, PDFs, records, archives, and CSV data. Picture Upload approves pictures only and adds optional chopping.
• Both areas sustain WebP and AVIF photos, and both need Fluent Forms Pro.
• Establish a max documents dimension, a max file count, and just the file types you need. Your web server’s very own upload restriction still uses ahead.
• Data can most likely to Fluent Types’ default storage space or your WordPress Media Collection, per area or site-wide.
• Style the upload switch or dropzone from Preview & Layout → Photo or File Switch Design , with different Regular and Hover states.
• To keep big data off your holding, Cloud Storage space Manager for Fluent Forms sends uploads to Google Drive, Dropbox, Amazon S 3, OneDrive, or Cloudflare R 2

Submit Upload vs Image Upload: Which One Do You Required?

Usage Data Upload when you require papers or mixed documents types. Use Image Upload when you only desire pictures and respect their shape or size.

Attribute	Submit Upload	Photo Upload
Accepted styles	Images, audio, video clip, PDF, records, zip archives, executables, CSV	JPG, PNG, GIF, WebP, AVIF
Publish interface	Switch (default) or Dropzone	Button (default) or Dropzone
Image chopping	No	Yes (optional)
Limitation file size and file matter	Yes	Yes
Storage selection (Fluent Forms Default or Media Collection)	Yes	Yes
Best for	Resumes, contracts, press sets, spreadsheets, audio or video samples	Logos, headshots, item pictures, account pictures

A quick rule: if a visitor might require to send a PDF, choice Documents Upload. If every submission ought to be an image, pick Photo Upload so you can crop it and restrict styles extra snugly. Both fields need Fluent Forms Pro

How to Add a Data Upload Field

When you have Fluent Forms Pro set up and active,

1. Most likely to Fluent Forms → All Kinds and open up the form you intend to edit, or produce a new one from Fluent Forms → Brand-new Form
2. In the Input Fields panel on the right, discover Submit Upload and drag it into your form.
3. Click the field in the editor to open Input Personalization
4. Set the label, switch text, interface, and limitations (discussed listed below).
5. Click Save Kind

Submit upload setups

General Setups:

• Component Label: The field title visitors see, like “Submit your return to.”
• Switch Text: The message on the upload button or inside the dropzone. “Pick Data” by default.
• Submit Button Interface: Button (the default) is a compact button, and the Dropzone is a larger location. Both enable visitors to drag documents and open the documents picker if clicked.
• Tag Placement: Position the label at the Top, Right, Base, or Left, conceal it, or keep the kind’s default.
• Admin Area Tag: A different name revealed only in your entries and e-mails. Beneficial when the public label is long.
• Needed: Blocks entry till a file is attached.
• Max Documents Dimension: The largest single file enabled, embeded in KB or MB.
• Max Record Count: The highest possible variety of files one site visitor can affix to this field. Raise it above 1 for multi-file submissions.
• Allowed Data: Tick the file classifications you’ll approve. The choices are Photos (jpg, jpeg, gif, png, bmp, plus WebP and AVIF), Sound, Video Clip, PDF, Docs (Word, Excel, PowerPoint, OpenDocument, RTF, and TXT files), Zip Archives, Executable Documents, and CSV.
• Global Mistake Message: Each limit (dimension, matter, type) has its own toggle. Leave it on use the site-wide message, or toggle it off to write a personalized message certain to this area, like “Please upload a PDF under 5 MB.”

Advanced options:

Scroll down and expand Advanced Options Image Upload has the exact same set, so I’ll cover them as soon as below.

• Container Course: Adds a CSS course to the field’s wrapper for customized styling.
• Component Class: Includes a CSS class to the upload input itself.
• Help Message: A short tip shown near the area, such as the accepted layouts and dimension limit.
• Call Characteristic: The area’s interior name (as an example, file-upload Leave it as is unless you’re referencing the area in code or link specifications.
• Conditional Logic : Show the field just when one more answer matches, for example only when a person chooses “I have a profile.” Field-level show and hide is available on Fluent Types’ free plan
• Submit Location Type: Where this field’s documents are saved.

Picture Upload functions similarly, with a few distinctions.

Just how to Add a Photo Upload Area

Including the area adheres to the same course: drag Photo Upload from the Input Fields panel right into your form, click it, and readjust its settings under Input Modification

Picture upload settings

Component Tag, Switch Text, Upload Switch User Interface, Label Placement, Admin Area Tag, Called For, Max Data Size, and Max Files Matter work exactly as they do on Documents Upload. Here’s what’s various:

• Submit Place Type: Beings in the main settings panel rather than under Advanced Options.
• Allowed Images: Tick the photo formats you accept: JPG, PNG, GIF, WebP, and AVIF. WebP and AVIF are smaller sized than JPG at similar top quality, which helps if you prepare to display the pictures on your site later.
• Worldwide Error Message: A different message for mismatched photo types (“Permitted picture kinds does not match” by default), together with the dimension and count messages.

Crop images before upload

Cropping is the main factor to select Image Upload over Data Upload. Tick Enable plant , and site visitors see a crop window after they pick a picture, prior to it submits.

• Facet ratio: Free (no limitation), 1: 1, 4: 3, 16: 9, 3: 4, or 9: 16 Use 1: 1 for account images and 16: 9 for banners.
• Dealt with dimensions: Need a specific size and height in pixels, for example 400 × 400 for a directory headshot.

The crop is likewise implemented on the server, so just the chopped photo is approved. A site visitor can not skip the crop home window and send an uncropped documents instead.

Just How to Establish Upload Limits

Setting limits keep your inbox and web server tidy without obstructing submissions.

• Match documents dimension to the task: A return to seldom requires greater than 5 MEGABYTES; a logo design or headshot, 2 MB. Video and audio samples require extra.
• Enable just the kinds you’ll open up: For a return to, tick PDF and Docs. For a logo design, tick Pictures. Don’t select any type of added group.
• Leave Executable Files unticked: There’s seldom a factor to accept.exe files via a public kind, as they carry apparent threat.
• Set a file matter: One file is the default. Increase it just when the type needs several, like a portfolio or a collection of receipts.
• Examine your server’s upload limitation: Your hosting sets a maximum upload size in PHP (usually displayed in WordPress under Media → Include New Media Documents If your field allows 50 Megabytes however the web server caps uploads at 8 MEGABYTES, data over 8 MB will fail. Ask your host to increase it if required.
• Write clear error messages: “Recognition stops working for maximum data size” is accurate however not helpful. “Documents must be under 5 MB. Try pressing your PNG.” tells the site visitor what to do.
• Tell individuals the regulations in advance: Place the accepted styles and size in the Help Message, so visitors know the guidelines prior to selecting a documents.

Upload fields could bring in spam crawlers. Couple them with reCAPTCHA , hCaptcha , Gate , or the Honeypot.

Where Your Uploaded Record Are Stored

Every upload area has a Submit Place Type setting with 2 options:

• Based On Global Settings: The area follows your site-wide default. This is the easiest choice when all your forms must behave the same way.
• Custom-made: Establish storage for this field only, selecting between Fluent Forms Default and Media Library

Fluent Forms Default keeps uploads in Fluent Kinds’ own upload folder, separate from your website’s media. You can access them with the type’s entrances. Media Library saves each upload to your WordPress Media Collection, where you can search, look, and recycle it like any other media file.

Media Library functions well for images you’ll publish, such as sponsor logos or neighborhood photos. For private records like resumes or ID scans, maintain them out of the Media Library so they aren’t mixed in with public website media.

Discovering documents in entries

Open up Fluent Forms → Entries (or the Entries tab inside a form) and click any kind of entry. Uploaded files appear as links or picture previews you can open and download.

Getting documents by email

Your e-mail notices ( Settings & Integrations → Email Notices can consist of uploaded documents, so the appropriate individual gets them without logging in. Fluent Forms recommends sending out with SMTP when emails carry attachments, because add-ons are more probable to land in spam otherwise.

Bonus offer: send uploads straight to cloud storage

Both storage space options over maintain documents by yourself web server. If you accumulate big video, sound, or style documents, or merely a lot of uploads, your hosting space fills out rapidly. To avoid that, you can directly send them to the cloud with Cloud Storage Manager for Fluent Forms.

It’s a separate plugin made by FluentWiz , an approved WPManageNinja agency, not an integrated Fluent Types feature. It collaborates with Fluent Forms Pro, given that the upload fields themselves require Pro.

• Free version: Google Drive and Dropbox
• Cloud Storage Supervisor Pro: adds Amazon S 3 , Microsoft OneDrive, and Cloudflare R 2
• Auto-cleanup: Erase the neighborhood duplicate after it reaches the cloud, and get rid of cloud documents when you remove the access.
• Organized folders: Automatically construct subfolders from form information, such as one folder per applicant.
• One location each time: Only one cloud storage space service can be energetic at the same time.

Exactly how to Style Your Upload Fields

You can match both the upload switch and the dropzone to your brand from the kind styler, without writing CSS.

1. Save your kind, then click Preview & Style in the leading bar.
2. In the designing panel, click the General tab, then inspect Customize Selected Preset and open Photo or File Button Design
3. Choose the Regular tab to design the default state, then the Hover tab to style what site visitors see when their arrow is over it.
4. Change the setups listed below and view the preview update.
5. Make use of the desktop, tablet, and mobile icons above the sneak peek to check each screen dimension.
6. Click Conserve Setup

Here’s what each setting controls:

• Shade: The message shade of the switch or dropzone tag.
• Background Color: The fill behind the button or inside the dropzone.
• Positioning: Left, facility, or right.
• Size: Switch size in % or various other units. Set it to 100 % for a full-width button on mobile.
• Padding: Space inside the switch, per side or connected.
• Typography: Font style dimension, weight, line elevation, letter spacing, and message decor.
• Box Darkness: Includes deepness so the upload area sticks out from text inputs.
• Border: Tick Personalized Border to establish the Boundary Type (strong, rushed, dotted, double, etc), Boundary Shade, Border Size, and Border Distance. A rushed boundary informs site visitors “decline documents below” at a glance.

When to Use Data and Photo Upload Area

Job and program applications

Accumulate resumes and cover letters with File Upload, limited to PDF and Docs, 5 MB, approximately 2 data. If you’re assessing applications in phases, you can construct a custom application tracker along with the access.

Press packages and media demands

Artists, speakers, and brand names usually send out a bio PDF, a few pictures, and a sound or video clip sample. Submit Upload with PDF, Images, Sound, and Zip Archives covers it.

Sponsorship and companion logo designs

Photo Upload limited to PNG and WebP maintains logos usable for your sponsor page, considering that both layouts sustain clear histories. Save them to the Media Library so they prepare to position on the site.

Support requests with screenshots

A screenshot usually discusses a bug quicker than a paragraph. Include an optional Picture Upload field, as much as 3 images at 2 MB each.

Profile images and directory site headshots

Photo Upload with crop on, a 1: 1 facet proportion, so every image in your directory or team page appearance consistent.

Multi-file task entries

Customer briefs, competition entrances, and tasks typically come as several data. Elevate Max Data Count so site visitors can drag whatever in simultaneously. The Multi-file Upload Kind layout provides you a prepared starting factor with name, email, title, message, and upload areas.

Free vs Pro at a Glimpse

Area/ Feature	Free	Pro
File Upload field	No	Yes
Photo Upload area	No	Yes
Photo plant	No	Yes
Advanced type styler (Picture or Submit Button Style)	No	Yes
Field-level Conditional Logic	Yes	Yes
Entries see and export	Yes	Yes
reCAPTCHA, hCaptcha, Turnstile, Honeypot	Yes	Yes

Cloud Storage Supervisor is a different plugin with its own complimentary and Pro versions, so it isn’t listed below.

Regularly Asked Concerns

Begin Collecting Data Through Your Forms

You currently have whatever you need to change “email it to us” with an upload field: the right field for the task, limits that keep submissions tidy, storage space that fits just how you function, and a switch or dropzone styled to match your type.

Beginning with one form that currently relies on email add-ons, add a Documents Upload or Photo Upload area, and send a test entry. Both fields feature Fluent Forms Pro , in addition to the type styler and all Pro includes