Introduction
Welcome to the Empress guide on customizing webforms. Empress provides rich webform customization options that enable developers to create unique, user-friendly interfaces tailored to their specific use cases. In this guide, we’ll delve into its technical aspects, focusing on fields layout, multi-step webforms, submit button label, banner image, breadcrumbs, after submit page, custom CSS, and client scripts.
Fields Layout
Webforms in Empress can be customized to an impressive degree. You can add Column Breaks and Section Breaks in the webform fields table to modify the layout of the form fields.
# Add Column Breaks and Section Breaks in your webform
This customization allows your webform to present data in a more organized and visually appealing manner.
Multi Step Webform
For extensive webforms that have many fields, Empress offers the Page Breaks option. This effectively segregates sections into different pages, creating a multi step webform. You can add a maximum of 9 Page Breaks, allowing for up to 10 pages.
# Use Page Breaks to divide your webform into multiple pages
Submit Button Label
Empress gives you the ability to personalize the label of the submit button on the webform. Changing the label can provide a more intuitive user experience.
# Change the label of the submit button
Banner Image
To enhance the visual appeal of your webform, Empress lets you add a banner image. This can serve as an effective branding tool.
# Add a banner image to your webform
Breadcrumbs
In Empress, you can customize the breadcrumbs in a Web Form by adding a JSON object. This is only visible if the webform list view is enabled, providing a helpful navigation guide for users.
# Customize your webform's breadcrumbs by adding a JSON object
After Submit Page
Empress also enables you to set a custom success title and message which will be displayed once a user has submitted the webform. You can configure your webform to redirect to a specific URL 5 seconds after it has been submitted by setting the success_url field.
# Set a custom success title, message, and redirect URL
Custom CSS
To give your webform a unique look, you can add custom CSS. This can be particularly useful for matching the webform’s style to your company’s brand.
# Add custom CSS to style your webform
Client Script
Finally, Empress allows you to add custom client scripts to your webform. You can write event handlers for field changes, get and set field values, add custom validation by overriding the validate method, set field properties, and trigger scripts when the form is loaded.
# Add custom client scripts to your webform
Conclusion
The ability to customize webforms is a powerful feature in Empress, allowing developers to create forms that are not only visually appealing but also tailored to the specific needs of their users. By understanding and using these customization options, developers can significantly enhance the user experience of their apps, leading to increased user engagement and satisfaction.