Acuity Scheduling — Styling Forms and Links with Custom CSS (Terms & Conditions)

A quick tutorial on how to add links into your Acuity scheduling forms and how to style those to be sleek and pretty with custom CSS.

As a practical example we’ll cover how to add a beautiful, clean, minimalist terms and conditions link into your Acuity scheduling. I've seen many of my clients use different approaches, including copy-pasting the entire terms and conditions into acuity, which creates friction and overwhelm and lowers the conversion rate. In this tutorial, I'll show you how to

1. add a simple yes/no checkbox to Acuity

2. How to add terms and conditions as a link via your website,

3. How to make it clean and well designed with custom CSS (if you have the Acuity Scheduling Powerhouse plan).

Here’s the Acuity CSS code snippet as a starting point to style links in your Acuity forms

 a[href*="conversiontracking.io"] {
      color: transparent;
      font-size:0px !important;
      text-decoration: none;
      position: relative;
    }

    a[href*="conversiontracking.io"]::before {
      font-size:14px !important;
      content: "terms and conditions";
      color: #007BFF; /* Choose your preferred color */
      text-decoration: underline;
    }