Image Upload UI

Improve the UI on your elementor form's file upload fields with the Image Upload UI.

watch the Image Upload UI tutorial

Get rid of the old Choose File button in the File Upload Field with the new Image Upload UI.

Elementor by default offers a quick way for users to upload files and submit them through an Elementor Form. This is usually done through a simple button that lets you browse and choose files on their computer.

This button is quite old-looking and could use some modernization, to keep both UI and UX feeling fresh and up to date. This is where the Image Upload UI comes into play.

Easy to set up.

Making use of the new UI is as simple as toggling it on in the File Upload field on your Elementor Form. As soon as the option is turned on, you will see that we have the option to select a placeholder image. Any image we choose will then have a plus symbol as an overlay that will make it clear to the user that they can upload a picture there.

Important to note: this only works with single images. If you’re looking to implement better UI for multiple file selection, then the Better Gallery Form Field is your module of choice.

Compatibility with other Gloo features.

The Image Upload UI works great with the Image Cropping UI to give users even more options when choosing and editing the image they’ve chosen to use. It also works when submitting images that will then be used in the Frontend Post Submission and Editing and User Registration and Editing Form Actions.

Scope : Elementor Pro Form

Dependencies: Elementor Pro

Frequently Asked Questions

What is the Image Upload UI for Elementor Forms?

The Image Upload UI is a Gloo feature for Elementor Forms that replaces the old Choose File button with a more modern and user-friendly interface for uploading images.

How do I enable the Image Upload UI?

Enabling the Image Upload UI is simple – just toggle it on in the File Upload field on your Elementor Form.

Can I customize the placeholder image used in the Image Upload UI?

Yes, you can select a placeholder image of your choice, which will have a plus symbol overlay to indicate to users that they can upload a picture there.

THIS FEATURE IS PART OF :

Image Upload UI

Replace the default “Choose File” Elementor button with a modern UI.

Add a new form - choose file upload form field - toggle on enable Image upload ui

Works hand-in-hand with the image cropping ui

To get the UI on your File Upload field looking like ours here on the left, toggle on Image Upload UI in the field options.

CUSTOMIZE THE PLACEHOLDER AND PREVIEW TO YOUR LIKING

By itself, the Image Upload UI is already an improvement over the default Elementor button. But you can customize it further over in the Style tab of the form settings. You can easily change both the placeholder image, the overlay, and the positioning of the field.