Custom Javascript and CSS (Modern)

For information on how to add Custom JavasScript and CSS to your Public Pages, please see Public Page Default Settings and Public Signup Page Settings.

These snippets of code are intended as examples to show how to select and modify different elements on the Public Pages. Chargify Support can provide assistance with simple changes such as hiding a field or restricting the country location for new signups. Depending on your level of expertise, it may be necessary to engage a Web Developer to accomplish more complex requirements.

Each snippet has been tested in isolation. If snippets are combined with each other, or with existing Custom JavaScript and CSS on your Public Pages, unexpected behavior may occur. Please test your Public Pages thoroughly to make sure the behavior satisfies your requirements.

Please do not include <script> tags in your entries. Chargify automatically inserts this tag on your behalf.

Limit Signups to US

This JavaScript code will limit the country dropdown to only have US selectable.

Adding Custom Validations

This code will allow you to set specific fields as required on the Public Pages. In the example below, we are requiring 3 seperate custom fields.

Hide Summary Information

This will hide the recurring charges and component charges on the Public Page.

Change Label Text

This will change the text of a label on your Public Page. The example code shown is for the Organization label.

Change Setup Fee Text

This will change the setup fee text to be anything you want it to be.

Change Submit Button Text

This will change the submit button text from the default “Place My Order” to anything you want it to be.

Force Two Components to be Equal

In case you ever need to have one component equal the same value as another you can use this script to accomplish the task.

Remove “this product expires in 1 day” Message on Public Signup Page

Copy/paste the following CSS into your Public Page.


.plan__summary-total-description { display: none; }

Allow a single selection of a group of on/off components on Public Signup Pages

This is an example of limiting selection of a set of on/off components on Chargify hosted pages to select only a single component. This script can be utilized by adding it to your “Custom Javascript” on the “Public Signup Pages” found under the “Settings” tab.

This script will alter the behavior of how the radio buttons work.

Note if your customer turns off javascript there is no to protect against this. Here is the example of how to achieve it:

Language Translations

You will need to input the translation and put in in the Custom Javascript box in the Public Signup Page. Everything that is uppercase is where you would put the translation for that field.

Signup Page CSS Classes

The following is a list of all CSS classes used on the Public Signup Page.

Signup Page CSS IDs

The following is a list of all CSS IDs used on the Public Signup Page.