How to Add Rich Text, Images & Upload Fields in form

How to Add Rich Text, Images & Upload Fields in form

Notes

Overview

The Form Builder allows you to add content, images, and upload fields to make your form more informative and easier for customers to complete.

These elements can be used to display instructions, provide visual guidance, collect product images, and request supporting documents such as purchase invoices.

This article covers the following elements:

  • Rich Text

  • Content Image

  • Image Upload

  • Invoice Copy

Using these elements effectively can help customers understand what information is required and provide the necessary supporting details while completing the form.


Steps to Add a Rich Text, Image, or Upload Field

  1. Open the required Form in the Form Builder.

  2. Go to the Elements section.

  3. Click Add Elements.

  4. Select the required element.

  5. Configure the element from the Field Settings panel.

  6. Add the required content, image, or upload settings.

  7. Use Preview to verify how the element appears and functions.

  8. Click Save after completing the configuration.


1. Rich Text

A Rich Text element allows you to display formatted text within the form.

Unlike input fields, Rich Text does not collect information from customers. Instead, it is used to provide instructions, important information, descriptions, or other helpful content.

When to Use

Use Rich Text when you need to provide additional information or guidance to customers.

Examples:

  • Registration instructions

  • Warranty information

  • Important notices

  • Terms and conditions

  • Product-related guidance

  • Additional descriptions

How to Add Rich Text

  1. Click Add Elements.

  2. Select Rich Text.

  3. Enter the required content in the Rich Text editor.

  4. Use the available formatting options to format the content.

  5. Add headings, paragraphs, lists, or links as required.

  6. Review the content using Preview.

  7. Click Save.

Example

You can add the following instruction:

Please ensure that all product and purchase details are entered correctly before submitting the registration form.

This information will be displayed directly to the customer while completing the form.



2. Content Image

A Content Image allows you to display an image within the form.

This can be useful for providing visual instructions or helping customers understand what information they need to provide.

When to Use

Use a Content Image when visual guidance can make the form easier to understand.

Examples:

  • Product images

  • Sample invoice images

  • Product identification guides

  • QR code scanning instructions

  • Step-by-step visual instructions

How to Add a Content Image

  1. Click Add Elements.

  2. Select Content Image.

  3. Open the Field Settings panel.

  4. Upload or select the required image.

  5. Configure the available image settings, if required.

  6. Use Preview to check how the image appears in the form.

  7. Click Save.

Example

You can add an image showing where the customer can find the product serial number.

This helps the customer identify the required information before completing the registration form.



3. Image Upload

An Image Upload field allows customers to upload one or more images while completing the form.

This is useful when customers need to provide product images or other supporting visual information.

When to Use

Use Image Upload when customers need to submit images as part of the registration or verification process.

Examples:

  • Product images

  • Damaged product images

  • Installation images

  • Proof of purchase

  • Other supporting images

How to Add an Image Upload Field

  1. Click Add Elements.

  2. Select Image Upload.

  3. Enter the required Field Name.

  4. Add a suitable Placeholder, such as Select images to upload.

  5. Add Helper Text if additional instructions are required.

  6. Upload a Helper Image, if required.

  7. Configure the Maximum Number of Files that customers can upload.

  8. Enable Is Required? if image submission is mandatory.

  9. Use Preview to test the upload field.

  10. Click Save.

Example

Field Name: Upload Product Images

Placeholder: Select images to upload

Helper Text:

Please upload clear images of the product.

The customer can upload the configured number of images before submitting the form.



4. Invoice Copy

An Invoice Copy field allows customers to upload their purchase invoice or proof of purchase.

This is particularly useful for warranty registration forms where purchase details need to be verified.

When to Use

Use Invoice Copy when customers need to submit proof of purchase as part of the registration process.

Examples:

  • Warranty registration

  • Purchase verification

  • Product validation

  • Warranty claims

How to Add an Invoice Copy Field

  1. Click Add Elements.

  2. Select Invoice Copy.

  3. Enter the required Field Name.

  4. Configure the available upload settings.

  5. Add Helper Text to explain what the customer needs to upload.

  6. Enable Is Required? if the invoice is mandatory.

  7. Use Preview to verify the field.

  8. Click Save.

Example

Field Name: Invoice Copy

Helper Text:

Please upload a clear copy of your purchase invoice.

The customer can upload the invoice while completing the registration form.



Field Settings

Depending on the selected element, different options may be available in the Field Settings panel.

Field Name

Enter a clear and descriptive name for upload fields.

Examples:

  • Upload Product Images

  • Invoice Copy

  • Proof of Purchase


Placeholder

The placeholder provides guidance about the expected action.

Examples:

  • Select images to upload

  • Upload your invoice

  • Drag and drop or upload


Helper Text

Use Helper Text to provide additional instructions.

Examples:

  • Please upload a clear image of the product.

  • Make sure all details are clearly visible.

  • Upload the original purchase invoice.



Helper Image

A Helper Image can be added to show customers an example of the image or document they need to upload.

For example, you can display a sample invoice/serial no or a reference image of the product.



Maximum Number of Files

For applicable upload fields, configure the maximum number of files a customer can upload.

Use this setting to control the number of images required for the registration or verification process.


Is Required?

Enable this option when customers must complete the field before submitting the form.

Only mark an upload field as required when the uploaded information is necessary for registration or verification.


Rich Text vs Content Image vs Image Upload vs Invoice Copy

Element Type Purpose Best Used For
Rich Text Displays formatted text Instructions, notices, descriptions
Content Image Displays an image in the form Visual guidance and examples
Image Upload Allows customers to upload images Product images and supporting images
Invoice Copy Collects proof of purchase Warranty registration and purchase verification

Best Practices

  • Use Rich Text to provide clear instructions and important information.

  • Keep the displayed content short and easy to understand.

  • Use Content Image when visual guidance can help customers complete the form correctly.

  • Use clear and descriptive Field Names for upload fields.

  • Add Helper Text to explain exactly what customers need to upload.

  • Use a Helper Image when an example can reduce confusion.

  • Configure an appropriate Maximum Number of Files based on your requirements.

  • Mark upload fields as Required only when the information is mandatory.

  • Ensure uploaded images or invoices are relevant to the information being collected.

  • Always use Preview to test how the content, images, and upload fields appear before publishing the form.


Conclusion

Rich Text, Content Image, Image Upload, and Invoice Copy elements help make your form more informative and easier to complete.

Use Rich Text to provide instructions, Content Image to offer visual guidance, Image Upload to collect supporting images, and Invoice Copy to collect proof of purchase.

Before publishing the form, always use Preview to ensure that all content and upload fields are displayed and working as expected.