Mobile-friendly Entity Forms - Rishan Solutions

Creating mobile-friendly entity forms in Power Pages (formerly PowerApps Portals) ensures that your portal’s forms are optimized for users accessing them from mobile devices. This improves user experience, engagement, and usability, especially in a mobile-first world where more users prefer mobile devices for access.

In this guide, we’ll walk through the process of creating mobile-friendly entity forms using Power Pages, including customizations with Liquid, CSS, and form design best practices.

Step 1: Plan Your Entity Form Structure

Before jumping into code and styling, it’s essential to plan how your entity form will look and behave on mobile devices. Here are some factors to consider:

Field Types: Make sure that fields like dates, numbers, and options are easy to select or enter on mobile.
Form Layout: Organize the form fields in a simple, linear layout to minimize scrolling.
Field Validation: Ensure that mobile users have clear feedback on missing or incorrect fields.

For this example, we’ll work with a Contact entity form, allowing users to submit their information.

Step 2: Create the Entity Form in Power Pages

Access Power Pages: Open the Power Pages management area from the Power Platform portal.
Create an Entity Form:
- Navigate to the Forms section.
- Create a new Entity Form based on an existing entity, like Contact.
- Configure the form to include the necessary fields, such as Name, Email, Phone Number, and Address.
Publish the form: Once you’ve created the form, publish it to make it accessible on your portal.

Step 3: Customize the Form Layout with Liquid

To create a more mobile-friendly experience, you can use Liquid to adjust how the form is displayed. For example, you may want to display a custom layout or add extra instructions for mobile users.

3.1. Basic Liquid Template for the Form

By default, Power Pages will render the form, but you can customize its layout with Liquid.

{% form "contact-us" %}
  <div class="form-container">
    <h2>Contact Us</h2>
    <div class="form-group">
      <label for="name">Full Name</label>
      <input type="text" id="name" name="name" placeholder="Enter your full name" required>
    </div>
    <div class="form-group">
      <label for="email">Email</label>
      <input type="email" id="email" name="email" placeholder="Enter your email" required>
    </div>
    <div class="form-group">
      <label for="phone">Phone Number</label>
      <input type="tel" id="phone" name="phone" placeholder="Enter your phone number">
    </div>
    <div class="form-group">
      <label for="message">Message</label>
      <textarea id="message" name="message" placeholder="Your message" rows="4" required></textarea>
    </div>
    <button type="submit">Submit</button>
  </div>
{% endform %}

This Liquid code creates a basic structure for the form with an area to input name, email, phone number, and a message.

Step 4: Style the Form for Mobile Responsiveness

Now that the basic structure is set up, let’s style the form to be mobile-friendly using CSS. Here’s how you can optimize it for various screen sizes.

4.1. CSS Styles for Mobile Optimization

/* General styles */
.form-container {
  padding: 20px;
  max-width: 100%;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}

input, textarea, button {
  width: 100%;
  padding: 10px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
  padding: 12px 20px;
}

button:hover {
  background-color: #45a049;
}

/* Mobile specific styles */
@media (max-width: 768px) {
  .form-container {
    padding: 15px;
  }

  .form-group label {
    font-size: 16px;
  }

  input, textarea {
    font-size: 14px;
  }

  button {
    font-size: 16px;
    padding: 14px;
  }
}

/* Desktop styles */
@media (min-width: 769px) {
  .form-container {
    max-width: 600px;
  }
}

Here’s what the styles do:

General Form Styles: Provides a basic layout where each form element (label, input, textarea, and button) is styled for clarity and ease of use.
Mobile Styles (max-width: 768px): On smaller devices, the padding and font size are adjusted to make the form fields more readable and easy to interact with. The button’s font size is also increased for better usability on touch screens.
Desktop Styles (min-width: 769px): For larger screens, the form container has a max-width of 600px, ensuring it doesn’t stretch too wide.

4.2. Add Mobile-Friendly Input Types

For form fields such as email and phone number, using the appropriate input types (type="email", type="tel", etc.) helps mobile browsers automatically provide optimized keyboards. This enhances the mobile user experience.

type="email": Displays an email-optimized keyboard on mobile devices.
type="tel": Displays a numeric keyboard for phone number input.

Step 5: Test and Optimize the Form on Different Devices

After implementing the Liquid customizations and CSS styles, it’s critical to test the form on various devices to ensure it works as expected. Here are some things to check:

Responsiveness: Test on mobile devices with screen sizes of 320px to 768px and ensure the form adapts properly.
Touch Interactions: Ensure form fields are large enough to interact with touch, and buttons are easy to tap.
Field Validation: Ensure that validation messages are displayed clearly on mobile screens.

Step 6: Optional Enhancements for Mobile-Friendliness

Use of Modals for Success/Failure: After form submission, display a confirmation message in a mobile-friendly modal window.
Pre-populate Fields: If possible, pre-populate form fields using the logged-in user’s data.
Multi-step Forms: For long forms, consider breaking them into multi-step forms to improve readability on smaller screens.