New visual design capabilities in Modern forms
Vladi Gubler
Vladi Gubler
June 08, 2021 | Products

Hi,

A form that looks great is so much more appealing and inviting for users! With our Modern forms, we pay a great deal of attention to styling abilities:

  • Themes - with a selection of pre-defined themes, it's easy to apply a complete look & feel to the form.
  • Style rules - any element on the form can have one or more conditional style rules applied to it. This feature is especially useful when you need to highlight a section based on the user selection.
  • CSS - you can specify your own CSS class name for any element on the form. You can then use the CSS module to either define those classes directly on the form or link to a shared CSS file (which is very useful when you want to apply the same look and feel to all your forms with minimal effort.

Now we are adding a brand new capability that makes creating great looking forms even easier! With the new Styles configuration, you can easily customize the look and feel of your form without having any experience with CSS.
Want to create a form that looks like this?

With the new feature, it's ridiculously easy! Let me show how.

  1. Create your form by dragging your columns to the design surface of Form Designer. As always, use Containers to control layout in an easy and responsive way. it will automatically look great on any type of device!
  2. Click on the Styles button on the main toolbar to open the Styles side pane



  3. Here you can either apply one of the theme or generate a Style, which is what we are going to be doing.

  4. First, we are going to be picking a background image from the gallery. There are already about 30 different images there to choose from and we will be adding more. Alternatively, you can reference your own image by URL address

  5. Once we've selected an image, we can customize the following settings
    1. Padding for the image (space between the form boundary and the boundary of the inner form background). You can even specify different padding on different side of the form.
    2. Background color for the form background (the box inside, where the actual form resides)
    3. Opacity - how opaque/transparent the form background is. I suggest making it slightly transparent, so the background image is still visible, but the form is still easy to use. Something like 80-90% is a good value, but it's really up to you.
    4. Inner padding - space between the boundary of the form background to the actual form controls.
  6. Publish your form, it's now ready to amaze your users!

We also added the abilty to choose an image from a gallery to our image control, so it can be used as a banner on the form. Sometimes, just a banner is enough for your form and you don't want to put a background image over the whole form.

Same idea here, place the image control on the form, select an image, specify alignment and height of the banner and that's it!

I hope you will find these new features useful when designing your forms!

Loading...

Add your comment

Comments are not designed to replace support calls. If you have a specific issue with one of our products, please send an email to support@infowisesolutions.com to open a support ticket.

UltimateForms

Build powerful business applications in SharePoint using only your browser.
100% No-Code Solution

It's never been easier, to create, innovate and share, all you need is your web browser!

Cost-effective

Address business process pain points immediately. Save time and money.

Fantastic Support Team

Facing difficulties installing the application? Contact our fantastic support team.

support@infowisesolutions.com

Related Topics

What is right for you?

Online Trial

Not ready to install yet? Create a trial site in our environment
  • Full control of the site and its settings
  • Optionally pre-install one of our solution templates
  • Site provisioned instantly
  • Automatically removed after 30 days
  • Available to everyone!

Error!

There was an error processing your request.
Please contact us for further details.

Installation

Install in your own environment, on Microsoft 365 and on premises
  • Start working with real users and data
  • Install online or on premises
  • Register for 30 day trial
  • Seemlessly convert to paid license
  • Requires administrator permissions

Success!

Download link has been emailed to .
If you do not receive it within 5 minutes, please check your spam.
The link is valid for 72 hours.
If you are having problems, please contact us.

Error!

There was an error processing your request.
Please contact us for further details.
Technical details:

Request a Live Demo

Book an appointment for a one-on-one with an ULTIMATEforms expert trainer.

Test drive the awesome power of ULTIMATEforms

Learn how to quickly and easily turn time-consuming business processes into automated, efficient workflows.

Have a strong start

Only thirty minutes of well-coached time can translate into great future savings in time and money. So, sit back and enjoy the ride.

It's Free

Learn how to address business process pain points immediately. Save time and money.