Saturday , September 23 2023
Home > Magezon Extensions > Blue Form Builder Tutorials > How to Add File Upload Field to a Magento 2 Form With Blue Form Builder

How to Add File Upload Field to a Magento 2 Form With Blue Form Builder

Magento 2 form builder extension _ Add file upload field

As a web owner, sometimes you may want to collect files from customers through an online form. It can be images, PDFs, documents, videos, etc. To do that, you need to give customers the ability to upload files with their form submissions.

With Blue Form Builder, you can do this easily and quickly by adding a file upload field to your form. And in this article, we’ll show you how.

1. Add file upload field to a form

Before getting started, you first need to install Blue Form Builder.

Now suppose that you’re in the process of building a new form, then let’s look at these followings steps:

  • Step 1: Open COMMON ELEMENTS tab in the right panel to find File Upload element.
Magento 2 form builder extension _ Open common elements for file upload
  • Step 2: Drag and drop this element into the editor on the left.
Magento 2 form builder extension _ Drag and drop file upload element

2. Customize file upload field

After adding file upload field to the form, there will appear a popup where you can customize it.

a. Appearance

Where you make basic customizations such as element labels, label position, etc.

Magento 2 form builder extension _ File upload _ Appearance tab

b. Icon

Choose an icon that will appear in the file upload field.

Magento 2 form builder extension _ File upload _ Icon tab

c. Validation

This tab allows you to limit file type, file size and file number that can be uploaded. We advise you to do this for security and storage space saving.

Magento 2 form builder extension _ File upload _ Validation

d. Advanced

Where you make some advanced customizations:

Magento 2 form builder extension _ File upload _ Advanced tab
  • Required Field: decide whether file upload field is mandatory or not.
  • Select multiple files at a time: if Yes, customers can select multiple files at the same time to upload.
  • Drag and Drop Interface: if Yes, users can drag and drop files into file upload field.
  • Drag and Drop Description: enter the text that will appear inside file upload field to show customers how they can upload files.

e. Design Options

Where you customize file upload element such as border, background, font, etc.

Magento 2 form builder extension _ File upload design options

3. Attach uploaded files to email notifications

Blue Form Builder lets you to include uploaded files to email notifications sent to admins and customers.

To enable this function, you first navigate to Settings > Email Notifications.

Magento 2 form builder extension _ Settings for email notifications

To attach uploaded files to emails notifying admin, open Admin tab. Then slide button “Attach file uploads to emails” to Yes.

Magento 2 form builder extension _ Attach uploaded files to admin email notifications

Open Customer tab to attach uploaded files to emails sent to customers. Then slide button “Attach file uploads to emails” to Yes.

Magento 2 form builder extension _ Add uploaded files to customer email notifications

Now let’s look at file upload field on frontend:

Magento 2 form builder extension _ File upload field on frontend

* Note: You can add multiple file upload fields to a Magento 2 form.

Conclusion

In today’s article, we’ve looked at how to add file upload field to a form in Blue Form Builder. By using drag and drop, you can do this with ease in a couple of seconds. Also, you can limit file size, file type and file number as well as attach uploaded files to email notifications. If you have any comment, feel free to leave us one below.

Try FREE Blue Form Builder demo today

Create whatever type of Magento form in any style you want just in minutes. Just by drag & drop.

About Trang Vu

Trang Vu
Min is a content marketer with more than 2-year experience in Magento. She has great patience and high concentration ability to deal with every pressure at work.

Check Also

Limit the number of Blue Form Builder form submissions

How to Limit the Number of Blue Form Builder Form Submissions

Normally, your website’s forms are available all the time so that users can access and …

Leave a Reply