Upload File Widget

Estimated reading: 3 minutes 24 views

The File Upload widget lets visitors attach files to your form, such as images, documents, or PDFs. You can choose which file types are allowed, set a maximum file size, and let visitors upload more than one file.

Step 1: Create a New Form

  • Go to RTMKit → Theme Builder → Form, click Add New Template, give your form a name, then click Edit with Elementor.

Step 2: Add the File Upload Widget

  • In the Elementor panel, find File Upload in the RTM Form Pro category. Drag it into your form where you want visitors to upload their files.

Step 3: Set Up the Content

Content section
  • Click the File Upload widget, then open the Content tab.
  • Show Label: Show or hide the label above the upload button.
  • Show Icon: Show or hide the icon on the upload button.
  • Position: Place the label on Top or Left of the upload button.
  • Label: The text shown as the label, for example Upload File.
  • Name: A unique name for this field. Don’t use spaces. Use only letters, numbers, underscores, or hyphens.
  • Upload Mode: Choose how the upload field looks. Standard File Input shows a simple Choose File button.
  • Upload Icon: Choose the icon shown on the upload button.
  • Help Text: A short note below the field to guide visitors, for example Max. 5 MB, JPG or PDF only.
Settings section
  • Required?: Turn on if visitors must upload a file before submitting the form.
  • Multiple Files: Turn on to let visitors upload more than one file.
  • Allowed Extensions: Choose which file types visitors can upload, such as JPG, JPEG, PNG, or PDF. Click + to add more types, or click × to remove one.
  • Max. File Size: Set the largest file size allowed, in MB. If a file is too big, visitors will see a warning and the file won’t be uploaded.

Tip: Only allow the file types you really need. For example, if you only need a CV, allow PDF only. This keeps uploads tidy and safer.

Step 4: Style the File Upload Widget

  • Open the Style tab.
  • Label: Color, typography, padding, margin, required indicator color (the color of the * mark).
  • Wrapper: The area around the upload field. Typography, padding, border radius, background type, text color, border type, box shadow.
  • Upload Button: Button position, icon position, icon size, padding, margin, border radius. In Normal and Hover: text color, icon color, background type, color, border type, box shadow.
  • List Selected Files: The list of files visitors have chosen. File name and file size typography, direction, flex wrap, spacing, padding, border radius, background type, border type, box shadow, file name color, file size color. File Preview: size of the file thumbnail.
  • Warning: The message shown when a file can’t be uploaded, for example if it’s too big. Alignment, color, typography.

Step 5: Publish the Form

  • Once everything is set, click Publish to save your form. Your form is now ready to be added to any page on your website.
Share this Doc

Upload File Widget

Or copy link

CONTENTS