Skip to main content
Mitratech Success Center
Client Support Center

Need help? Click a product group below to select your application and get access to knowledge articles, webinars, training content, and release notes or to contact our support team.

Authorized users - log in to create a ticket, view tickets status and check your success plan details.

 

Enhancing TAP End-User Forms with CSS Templates

  1. Last updated
  2. Save as PDF

This page shows you how to enhance the look and feel of your TAP end-user forms by applying professionally designed CSS templates. These templates control elements in a form, such as background images, colors, fonts, and field borders, and are ready to use out of the box. Each is built for flexibility: just swap out a few colors or images to match your brand, and you’re ready to go.

You can style your TAP forms using either prebuilt templates or custom-made ones created with the CSS Template Generator. The CSS Template Generator is a visual tool that lets you adjust colors, fonts, and layout in minutes without writing CSS manually. Whether applying a ready-made template or designing from scratch, you can achieve a polished, branded look for any TAP form. 

 

Purpose

The CSS templates are designed to improve the design and user experience of TAP end-user forms. They provide clean, modern styling without requiring you to know CSS.

These templates help:

  • Standardize the appearance of forms
  • Match your organization’s branding
  • Simplify form customization for non-technical users

 

Benefits of Using CSS Templates

  • Clean, Modern Styling: Provides consistent and modern styling for form interfaces, including spacing, fonts, and button styles.
  • Consistent Branding and User Experience: Ensures a uniform look and feel across all forms.
  • Time and Effort Savings: Eliminates the need for CSS knowledge, making it faster and easier for you to style forms.
  • Improved Completion Rates: Clear, visually appealing forms can make it easier for end-users to understand and complete required information.

 

Applying CSS Templates in TAP

  • Apply to a single form within a specific workflow: TAP Designer → Workflow → Form → Style Panel
  • Apply globally to all TAP forms in a workflow: Admin Settings → Branding → Custom CSS

To learn how to apply custom CSS styles in your TAP workflows, visit the How to use CSS in a TAP Workflow page.

 

Download Prebuilt CSS Templates

Download the available prebuilt CSS templates below:

  1. Styled form full-screen left borders.css

This template customizes the look and feel of the form page by changing the background color, applying the Poppins font, styling form fields and buttons with rounded corners and specific colors, and hiding unnecessary page sections. It also ensures the layout is responsive across different screen sizes.

  1. Styled form green borders.css

This form sets a full-page background image, applies the Poppins font, and styles form elements, dropdowns, and buttons with a clean, modern look using rounded corners and consistent colors. It also hides unnecessary sections and ensures the layout is responsive.

  1. Styled form all blue.css

This template sets a blue-themed background image, applies the Poppins font, and styles form elements, dropdowns, and buttons with soft rounded corners and light text. It also hides extra sections and ensures the layout is responsive and visually clean.

 

Create Custom CSS

If the prebuilt templates don’t meet your needs, you can create your template with our new  CSS Template Generator, which makes it easy to generate custom styles for a form that match your organization’s branding, without needing to write any code. To start designing your custom forms with the CSS Template Generator, click here.

 

How to Use the CSS Generator

  1. Go to the CSS Generator site.
  2. From the right-hand panel, select the Styling Controls from the following options:
  • Backgrounds (color, gradient, image)
  • Borders (radius, image, shadow)
  • Text (color, shadow, spacing, alignment)
  • Layout (display, columns, visibility)

Note: The CSS Template Generator does not include controls for animations, hover effects, or other advanced CSS features.

  1. After selecting a category, use the sliders, dropdowns, and input fields to adjust the values. For example:

  • Set a background gradient by choosing colors and direction.
  • Adjust border radius with pixel values.
  • Add a box shadow with light, medium, or dark settings.
  1. The tool provides a live preview to see how your styles will look before copying the code.
  2. Once you're satisfied, click the “Copy” button to copy the generated CSS code to your clipboard.
  3. Use the copied CSS in your stylesheet or inline styles in your HTML file.