How to Style Embedded Forms to Match Your Website

Overview

When embedding TIEIT forms on your website, it's important that they align visually with your site’s branding. TIEIT provides flexible styling options that allow you to apply custom CSS directly from the form builder interface. This article walks you through where to apply custom styles and how to properly target embedded form elements.


What’s in this article

How to access form styling options

  1. Navigate to the Forms module from the left menu.
  2. Select the form you want to style and open the Edit page.
  3. Click the Themes & Styles icon at the bottom center of the screen.

📌 Refer to the screenshot below for locating the Themes & Styles button:


Where to apply custom CSS

  1. Within the Themes & Styles panel, select the Layout tab.
  2. Scroll to the bottom of the Layout settings to find the External Styles input field.
  3. This field is where you can enter your custom CSS to override default styles.


Using the .tieit_form_wrap  class for targeting

To safely style only your TIEIT embedded form (and avoid affecting other parts of your website), use the .tieit_form_wrap class. This wrapper ensures your styles apply only to the form and its elements.

Example:

.tieit_form_wrap input[type="text"],
.tieit_form_wrap textarea {
  border-color: red !important;
}

.tieit_form_wrap label {
  color: #146d1b !important;
}

Notes:

  • Use !important  when needed, especially to override inline or default styles applied by the form engine.
  • You can target input fields, labels, buttons, etc., using standard CSS selectors within .tieit_form_wrap .

Best practices for overriding styles

  • Always test your CSS changes on both desktop and mobile versions of your website.
  • Avoid removing built-in padding or hiding required fields — this can impact usability.
  • Stick to scoped selectors like .tieit_form_wrap to avoid unintended styling across your site.

Conclusion

Custom styling for embedded forms in TIEIT can be done directly through the Theme & Style settings using the External CSS field. Using .tieit_form_wrap ensures your styles are contained and compatible with your existing website layout.

If you need help with custom styling or resolving style conflicts, contact our support team.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us