The sign up form that you build on the AUTH > SIGN UP AND LOGIN page will be used for all of your different plans.

If you need to add some plan specific fields to you sign up form, you can do so by adding CSS rules to your page. What you're doing here is using CSS to hide or show some fields from users based on the plan they are signing up for.

Let's use a hypothetical scenario to illustrate this technique.

A company sells two plans:

  • One plan for students
  • One plan for teachers

During sign up, we want students to fill out the FavoriteSubject custom property, and we want teachers to fill out the NumberOfYearsTeaching custom property. Both of these custom properties have been added to your Person records.

1. The first thing we'll need to do is to add both the FavoriteSubject and NumberOfYearsTeaching custom properties to our sign up form by going to AUTH > SIGN UP AND LOGIN and configuring the Sign up form fields appropriately.

2. Next, we'll need to take note of the Plan Uids for our Student and Teacher plans. You can get these Uids by going to BILLING > PLANS and clicking on the name of one of your plans. The plan Uid is the 8 character string in the URL. 

https://domain.outseta.com/#/app/billing/plans/GnmDqX9y/overview

Let's say that the plan Uids are as follows:

  • Student: Stu12345
  • Teacher: Tea98765

3. Finally, we'll have to add CSS rules to our website. You can do this by injecting a <style> element into the <head> of your website. The first rules hide both fields by default, while the second rule will show them for the correct plan. You will need to substitute in the following information to construct the correct selectors:

  • The record type the property is on (Person or Account)
  • The SystemName of the property (you can get this from the CRM > CUSTOM PROPERTIES page)
  • The Uid of the plan the property should be visible for
<style>
.o--Person-FavoriteSubject,
.o--Person-NumberOfYearsTeaching {
  display: none;
}

.plan--Stu12345 .o--Person-FavoriteSubject,
.plan--Tea98765 .o--Person-NumberOfYearsTeaching {
  display: block;
}
</style>

If you need any help, please email us at support(at)outseta.com.