ModulaPRO

The WS Form Modula add-on allows you show a Modula gallery on a form as well as being able to add, reorder and delete images in a gallery. When the form is submitted the Modula gallery will be updated to include any uploaded or deleted images as well as matching the order of the images.

WS Form PRO - Modula Integration

How to Automatically Create a Modula Form

To create a Modula form, first click on on Add New from the WS Form admin menu.

WS Form PRO - Add New Form

Next, click on the Modula tab at the top of the Add New page. This will show all of your Modula galleries.

WS Form - Modula - Add New

Simply click on a gallery and WS Form will automatically create a fully configured form. You can then Preview the form. The form will show the images contained within the gallery. When the form is submitted, the Modula gallery will be updated.

How it Works

The File Upload Field

In WS Form a gallery is represented by using a File Upload field.

WS Form - Modula - Upload Field

The File Upload field is configured as follows:

  • Multiple
  • Sortable
  • Type: DropzoneJS
  • File Handler: Media Library

These settings ensure that the behavior of the File Upload field matches that of the Modula gallery.

Populating the File Upload Field

The File Upload field is populated using the Populate Using Action setting found in Form Settings > Data.

WS Form - Modula - Upload Field - Populate

The settings are as follows:

  • Action to Populate From: Modula
  • List to Populate From: Your gallery
  • Gallery Field: The File Upload field on your form

Updating the Modula Gallery

The Modula gallery is updated by using the Add to Modula action.

WS Form - Modula - Add to Modula Action

The Add to Modula action settings are as follows.

Modula Gallery

Choose the gallery to push the file upload images to.

File Field

Choose the file field from which to source the images from.

Append

If checked, the images will be appended to the gallery.

Horizontal Alignment

Choose the horizontal alignment of newly added images. The available options are:

  • Left
  • Center (Default)
  • Right

Vertical Alignment

Choose the vertical alignment of newly added images. The available options are:

  • Top
  • Middle
  • Bottom