Skip to main content

Adding and Customizing the Image Upload Field in Divi Form Builder

The Image Upload field in the Divi Form Builder module allows users to upload images directly to the WordPress Media section of your website. This field supports multiple image uploads and offers several customization options to enhance the user experience.

Video​

Step 1: Add Form Field​

  1. Navigate to the page with your form and open the Form Builder module.
  2. Click on the Add New Field button to start adding a new form field.

Add Form Field

Step 2: Select Image Upload Field​

  1. Enter a descriptive Field Title for the field that users will see.
  2. Enter a Admin Title for administrative purposes to help identify the field.
  3. Assign a unique Field ID to the field for data handling.
  4. Select Image Upload field from the Type dropdown menu.

Select Image Upload Field

Step 3: Customize Image Upload Field​

In additional to the styling features in the Design Tab, Divi Form Builder offers customization options for the Image Upload Field HERE.

Customize Image Upload Field

Field Options:

  1. Add Form Builder Prefix to Field: Disable this option to directly input the field ID and Name. Only disable this option for specific cases, such as when using the form with Google Tag Manager.
  2. Hide Upload Image Preview: Hide the preview of the uploaded image.
  3. Hide Upload Preview Title: Hide the title of the image preview.
  4. Hide Upload Preview File Size: Hide the file size of the image preview.
  5. Hide Upload Preview Progress Bar: Hide the progress bar during the upload process.
  6. Upload Alt Title: Set the alternative text for the uploaded image.
  7. Max Upload File Counts: Limit the maximum number of images that can be uploaded.
  8. Max Number of Files Exceed Error: Customize the error message when the file count exceeds the limit.
  9. Max Upload File Size: Set the maximum file size for uploads.
  10. Max Upload File Size Error: Customize the error message when the file size exceeds the limit.
  11. Accepted File Types: Specify the types of files that can be uploaded (e.g., .jpg, .png).
  12. Accepted File Types Error: Customize the error message when an unsupported file type is uploaded.
  13. Upload Error Hide Delay (Milliseconds): Set the duration for how long the error message should be displayed.
  14. If on Edit Form - Button Text to Show Upload Box: Customize the button text to show the upload box in edit mode.
  15. If on Edit Form - Button Text to Close the Upload Box: Customize the button text to close the upload box in edit mode.
  16. Edit Image Instructions Text: Provide instructions for editing the uploaded image.
  17. If on Edit Form - Remove File from Media Library: Enable the option to remove the file from the media library on the Edit Form.
  18. If on Edit Form - Remove File Confirm Message: Customize the confirmation message when removing a file from the Edit form.
  19. Required: Make the image upload field mandatory for form submission.

Additional Tips​

By following these steps, you can effectively add and customize the Image Upload Field in Divi Form Builder. Utilize the various customization options to ensure the field meets your specific requirements and provides a seamless user experience. This setup allows users to easily upload images, enhancing the functionality of your forms.

Last updated on