Help Center › Selling › Public Signup Pages

Customize a Modern Public Signup Page with JavaScript and CSS

··

Last updated on Aug 28, 2026

Use these JavaScript and CSS snippets to customize how a Modern Public Signup Page looks and behaves. The following collection of code is provided as a reference, and is provided as-is: you are responsible for ensuring it works properly on your page(s), as well as maintaining this code for the future. Depending on your level of expertise, it may be necessary to engage a web developer to accomplish more complex requirements; Maxio Support can help with simple changes.

Before you start

Custom CSS and JavaScript are available if your account has this feature enabled. If it isn’t, contact us or upgrade to a paid plan for access. See Configuring Public Page Default Settings and Public Signup Page Settings Reference for where to enter your custom code. Each snippet below has been tested in isolation; combining snippets with each other, or with existing custom JavaScript and CSS on your Public Pages, may cause unexpected behavior, so test your Public Pages thoroughly before publishing.

For more JavaScript snippets specific to certain billing scenarios, see Choose the Right Billing Model for sample product setups and in-depth workflows to help customize your Sites.

Important: Do not include <script> tags in your entries. Advanced Billing automatically inserts this tag on your behalf.

JavaScript examples

Limit signups to the US

This JavaScript code will limit both the billing and shipping country dropdown to only have US selectable.

$(function() {
  $('.form__field--country select').find('option').remove();
  $('.form__field--country select').append('<option value="US" checked="checked">United States</option>');
  $('.form__field--country select').change();
});

Add custom validations

This code will allow you to set specific fields as required on the Public Pages. In the example below, we are requiring a custom field with ID 17640.

//Replace the number after `subscription_metafields_` with the ID of the custom field that needs to be required
var field1 = $("#subscription_metafields_17640");
var form = $("#signup-form");
var submitBtn = $("#subscription_submit");
 
$(document).ready(function() {
  var fieldLabel1 = $('label[for="subscription_metafields_17640"]');
  fieldLabel1.text(fieldLabel1.text() + " *");
});
 
submitBtn.click(function() {
  if (field1.val() === "") {
    field1.parent().addClass("has-error");
    field1.parent().append('<span class="error-message">cannot be blank</span>')
    return false;
  }
});
 
form.change(function(){
  if (field1.val() != "") {
    submitBtn.click(function() {
      return true;
    });
  }
});
 
field1.blur(function() {
  if ($(this).val() !== "") {
    $(this).parent().removeClass("has-error");
  } else {
    $(this).parent().addClass("has-error");
  }
});

Require the Organization field

This snippet will require that a potential subscriber enter data in the organization field.

var orgfield = $("#subscription_customer_attributes_organization");
var form = $("#signup-form");
var submitBtn = $("#subscription_submit");
 
$(document).ready(function() {
  var orgfieldLabel = $('label[for="subscription_customer_attributes_organization"]');
  orgfieldLabel.text(orgfieldLabel.text() + " *");
});
 
submitBtn.click(function() {
  if (orgfield.val() === "") {
    orgfield.parent().addClass("has-error");
    orgfield.parent().append('<span class="error-message">cannot be blank</span>')
    return false;
  }
});
 
form.change(function(){
  if (orgfield.val() != "") {
    submitBtn.click(function() {
      return true;
    });
  }
});
 
orgfield.blur(function() {
  if ($(this).val() !== "") {
    $(this).parent().removeClass("has-error");
  } else {
    $(this).parent().addClass("has-error");
  }
});

Require a phone number

This snippet will require that a potential subscriber enter data in the phone field. Note that this will not require a 10-digit number. If you wish to require a certain length phone number, use the JS for Require a 10-digit phone field below.

var phoneField = $("#subscription_customer_attributes_phone");
var form = $("#signup-form");
var submitBtn = $("#subscription_submit");
 
$(document).ready(function() {
  var phoneFieldLabel = $('label[for="subscription_customer_attributes_phone"]');
  phoneFieldLabel.text(phoneFieldLabel.text() + " *");
});
 
submitBtn.click(function() {
  if (phoneField.val() === "") {
    phoneField.parent().addClass("has-error");
    phoneField.parent().append('<span class="error-message">cannot be blank</span>');
    return false;
  }
});
 
form.change(function(){
  if (phoneField.val() != "") {
    submitBtn.click(function() {
      return true;
    });
  }
});
 
phoneField.blur(function() {
  if ($(this).val() !== "") {
    $(this).parent().removeClass("has-error");
  } else {
    $(this).parent().addClass("has-error");
  }
});

Require a 10-digit phone field

This snippet will require a potential subscriber to enter a 10-digit phone number. You will need to add the additional CSS snippet below this to highlight the missing required digits in the phone field.

The Add custom validations snippet above will accept "1" as a valid phone number. This snippet will require the full 10 digits of a phone number to be entered to consider the signup to be valid.

var form = $("form:first");
var phone = $("#subscription_customer_attributes_phone");
var submitbtn = $("#subscription_submit");
 
$(document).ready(function(){
	var phoneLabel = $('label[for="subscription_customer_attributes_phone"]');
	phoneLabel.text(phoneLabel.text() + " *");
});
 
submitbtn.click(function(){
	if (phone.val() === "") {
       phone.addClass("field-error");
       return false;
    }
	if (phone.val().length < 10) {
       phone.addClass("field-error");
       return false;
    }
});
 
form.change(function(){
  if(phone.val() != ""){
    submitbtn.click(function(){
       return true;
    });
  }
});
 
$(phone).blur(function(){
   if ($(this).val() !== "") {
       $(this).removeClass("field-error");
   } else {
       $(this).addClass("field-error");
   }
});

This is the CSS required for highlighting the required phone field if it’s missed.

css

.field-error
{
 color: #f00 !important;
 background: rgba(255, 0, 0, 0.5) !important;
 border: solid 1px #333 !important;
}

Reorder components

Presently, Advanced Billing orders components alphabetically on Public Signup Pages. With the snippet below, you can re-order the components however you prefer.

//This assigns classes to each component. 0 is the first component on the page, 1 is the second, etc.
$('.form__field--boxed').eq(0).addClass('First');
$('.form__field--boxed').eq(1).addClass('Fourth');
$('.form__field--boxed').eq(2).addClass('Second');
$('.form__field--boxed').eq(3).addClass('Third');
 
//This selects the component labeled with the 'Second' class and inserts it after the component labeled with the 'First' class
$('.form__field--boxed.Second').insertAfter('.form__field--boxed.First');
 
//At this point the order would be First, Second, Fourth, Third
 
//This selects the component labeled 'Third' and inserts it before the component labeled 'Fourth'
$('.form__field--boxed.Third').insertBefore('.form__field--boxed.Fourth');

Capture custom field data via a query string

With a small amount of JS, you can populate a custom field for a new signup via a Public Signup Page. The examples below use a custom field called sales.

Additionally, you’ll need to populate / replace the id of subscription_metafields_10463. Simply replace 10463 with the ID of your custom field in your site.

function getUrlVars() {
  var vars = {};
  var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
    vars[key] = value;
  });
  return vars;
}
 
var sales = getUrlVars()["sales"];
$(function() {
  if (sales) {
    $("#subscription_metafields_10463").val(sales);
  }
});
 
//this will hide the entire Custom Field section
$(".form__section--additional-information").hide();

For more information on setting up the custom field, see Configure Custom Fields and Choose the Right Billing Model.

Hide the recurring fee in summary information

This will hide the recurring charges. This method is incredibly useful if you wish to offer a gift subscription that should only obtained via a coupon, resulting in a charge of $0.00.

function hideRecurringFee() {
  $('#summary-recurring-charges').hide();
};
 
hideRecurringFee();
$(document).bind("afterSummaryRefresh", hideRecurringFee);

Hide the recurring fee and component charges in summary information

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

function hideRecurringLineItem() {
  $('#summary-recurring-charges').hide();
  $('.plan__summary-component').hide();
};
 
hideRecurringLineItem();
$(document).bind("afterSummaryRefresh", hideRecurringLineItem);

Add line items to the summary

If there are any items included with your product, add line item descriptions for them without charging for them. These line items will not be associated with any component.

For example, the JS below adds two line items for $0.00 each. Change “Line Item” to rename the lines.

function planSummary(){
    $('<tr class="plan__summary-table-row">'+
     '<td class="plan__summary-table-row-label">Line Item</td>' +
      '<td class="plan__summary-table-row-total">$0.00</td>'+
    '</tr>'+
    '<tr class="plan__summary-table-row">'+
         '<td class="plan__summary-table-row-label">Line Item</td>' +
          '<td class="plan__summary-table-row-total">$0.00</td>'+
    '</tr>'
    ).insertBefore('#todays-charge');
}
planSummary();
$(document).bind('afterSummaryRefresh', planSummary);

Hide the "None" choice on custom fields

The following JS will remove the option to select “None” in the custom field dropdown. The first choice will be the first choice on the list of options the merchant has created. XXXX should be replaced with the custom field ID.

$(function() { 
  $("#subscription_metafields_xxxx option[value='']").remove();
  $("#subscription_metafields_xxxx option[value='']").remove();
  $("#subscription_metafields_xxxx option[value='']").remove();
});

Change label text

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

$(function() {
  var organizationLabel = $("label[for='subscription_customer_attributes_organization']");
  organizationLabel.text("Place Text Here");
});

Change the setup fee text

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

// Just put what you want the setup fee text to be in the PLACE TEXT HERE placeholder
 
function changeSetupFee() {
  var setupfee = $("#summary-setup-fee .plan__summary-table-row-label");
  var text = setupfee.text().replace('Setup Fee', 'PLACE TEXT HERE');
  setupfee.text(text);
};
 
changeSetupFee();
$(document).bind("afterSummaryRefresh", changeSetupFee);

Change the submit button text

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

$(function() {
  var submitBtn = $("#subscription_submit");
  submitBtn.html('PLACE TEXT HERE');
});

Change the Today's Total text

This will change the Today’s Total text to add USD, or the currency of your choice in the Public Signup Page.

function addUsd() {
  $('#todays-charge > td:nth-child(2)').append(' USD');
};
 
addUsd();
$(document).bind("afterSummaryRefresh", addUsd);

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.

//Replace the "XXXXXX" with the allocated quantity id of the components
//	This value can be found within the page source of the PSP
//Both components need to be apart of the same product family
 
$(function () {
  var component1 = $("#component_allocated_quantity_XXXXXX");
  var component2 = $("#component_allocated_quantity_XXXXXX");
  
 component1.change(function(){
    component2.val($(this).val());
  });
 component2.change(function(){
    component1.val($(this).val());
  });
 
});

Force a component to equal a specific number

//Replace the "XXXXXX" with the allocated quantity id of the components
//	This value can be found within the page source of the PSP
//Change fixedValue to desired positive integer
 
$(function () {
 
  var updateTotal = $("#apply_component_button");
  var component = $("#component_allocated_quantity_XXXXXX");
  var fixedValue = 1
  
  component.val(fixedValue);
 
  component.change(function () {
    component.val(fixedValue);
    updateTotal.click();
  });
});

This is an example of limiting selection of a set of on/off components on Advanced Billing hosted pages to select only a single component. Add this script to your Custom JavaScript - Modern (v2) field under Settings > Public Page.

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

$(function() {
  var updatingCheckboxes = false,
  $components = $('.component-checkbox');
 
  $('.toggle--on-off').on('click', function(e) {
    if (updatingCheckboxes) { return; }
 
    var $el = $(this),
    checked = $el.is(':checked');
 
    if (checked) {
      e.preventDefault();
      updatingCheckboxes = true;
 
      // Set all on/off components to unchecked state
      $components.prop("checked", false);
      $components.parent().removeClass('btn-success').addClass('btn-default');
      $('.toggle__text').text('Add');
 
      // Set selected component to checked state
      $el.prop("checked", true);
      $el.parent().removeClass('btn-default').addClass('btn-success');
      $('.toggle__text', $el).text(!checked ? 'Select' : 'Selected');
      
      updatingCheckboxes = false;
    }
  });
});

$('body > div.wrapper > div.success-receipt > div.success-receipt__heading').append("INSERT TEXT YOU WOULD LIKE TO SEE ON RECEIPT PAGE");

Custom scripts may also be configured for the success or receipt page when supported by the page settings. Use receipt-page-specific JavaScript only for post-signup behavior, such as analytics tracking or changing receipt-page messaging.

Copy/paste the following JS into your Public Page. This hides the highlighted price message near the total, whether it's the next renewal charge (for example, "$0.00 due at first renewal") or an expiration notice (for example, "this product expires in 1 day"). Both use the same style, and which one appears depends on the product's pricing.

function hideExpirationMessage() {
 $('.plan__summary-total-description').hide();
};
 
hideExpirationMessage();
$(document).bind("afterSummaryRefresh", hideExpirationMessage);

Hide one or more components

In this example, the number in square brackets refers to the components ordered on the page, where 0 is the first component and 1 is the second component.

$($('.form__field--boxed')[0]).hide(); // hides first component
$($('.form__field--boxed')[1]).hide(); // hides second component

Include a Google font

The following allows you to take a Google font and apply it to your hosted page(s). It consists of a JavaScript and CSS snippet.

JS: Replace the link after href with the URL of the Google font you are interested in using.

$('head').append('<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">');

CSS: The name of the font-family will be the one that you chose above.

css

body {
 font-family: Lato;
}

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

// CONFIGURE YOUR PLAN
$('.form__section--configure-plan h3').html("CONFIGURE YOUR PLAN");
$('#form__section-apply-components').html("UPDATE TOTALS");
$('#form__section-apply-components').data("loading-text", "<i class='fa fa-refresh fa-spin fa-fw'></i> UPDATING...");
$('#form__section-apply-components').data("button-text", "UPDATE TOTALS");
 
// COUPON CODE
$('.form__section--coupon h3').html("COUPON CODE");
$('#coupon_button').html("APPLY CODE");
$('#coupon_button').data("loading-text", "<i class='fa fa-refresh fa-spin fa-fw'></i> APPLYING...");
$('#coupon_button').data("button-text", "APPLY CODE");
 
// VAT INFORMATION
$('.form__section--vat-information h3').html("VAT INFORMATION");
$('#vat_button').html("VALIDATE VAT");
$('#vat_button').data("loading-text", "<i class='fa fa-refresh fa-spin fa-fw'></i> VALIDATING...");
$('#vat_button').data("button-text", "VALIDATE VAT");
 
// CUSTOMER INFORMATION
$('.form__section--customer-information h3').html("CUSTOMER INFORMATION");
$('label[for="subscription_customer_attributes_first_name"]').html("FIRST NAME *"); 
$('label[for="subscription_customer_attributes_last_name"]').html("LAST NAME *"); 
$('label[for="subscription_customer_attributes_email"]').html("EMAIL ADDRESS *"); 
$('label[for="subscription_customer_attributes_phone"]').html("PHONE"); 
$('label[for="subscription_customer_attributes_organization"]').html("ORGANIZATION");
 
$('label[for="subscription_customer_attributes_address"]').html("SHIPPING ADDRESS 1 *"); 
$('label[for="subscription_customer_attributes_address_2"]').html("SHIPPING ADDRESS 2"); 
$('label[for="subscription_customer_attributes_city"]').html("SHIPPING CITY *"); 
$('label[for="subscription_customer_attributes_country"]').html("SHIPPING COUNTRY *"); 
$('#subscription_customer_attributes_country').find('option').html("COUNTRY"); 
$('label[for="subscription_customer_attributes_state"]').html("SHIPPING STATE *"); 
$('#subscription_customer_attributes_state').find('option').html("STATE"); 
$('label[for="subscription_customer_attributes_zip"]').html("SHIPPING ZIP CODE"); 
 
// BILLING INFORMATION
$('.form__section--billing-information h3').html("BILLING INFORMATION");
$('.form__section--billing-information p:first').html("ALL TRANSACTIONS ARE SECURE AND ENCRYPTED.");
$('.form__section--credit-card .form__header-section--title').html('CREDIT CARD');
 
$('label[for="subscription_payment_profile_attributes_first_name"]').html("FIRST NAME ON ACCOUNT *");
$('label[for="subscription_payment_profile_attributes_last_name"]').html("LAST NAME ON ACCOUNT *");
$('label[for="subscription_payment_profile_attributes_full_number"]').html("CARD NUMBER *");
$('label[for="subscription_payment_profile_attributes_cvv"]').html("CVV");
$('label[for="subscription_payment_profile_attributes_expiration_month"]').html("EXPIRATION MONTH *");
$('label[for="subscription_payment_profile_attributes_expiration_year"]').html("EXPIRATION YEAR *");
 
// BILLING ADDRESS
$('.form__section--billing-address h3').html("BILLING ADDRESS");
$('.form__section--billing-address header label:first').contents().last().replaceWith("USE SHIPPING ADDRESS");
$('.form__section--billing-address header label:last').contents().last().replaceWith("USE A DIFFERENT BILLING ADDRESS");
 
$('label[for="subscription_payment_profile_attributes_billing_address"]').html("BILLING ADDRESS 1 *");
$('label[for="subscription_payment_profile_attributes_billing_address_2"]').html("BILLING ADDRESS 2");
$('label[for="subscription_payment_profile_attributes_billing_city"]').html("CITY *");
$('label[for="subscription_payment_profile_attributes_billing_country"]').html("COUNTRY *");
$('#subscription_payment_profile_attributes_billing_country').find('option').html("COUNTRY");
$('label[for="subscription_payment_profile_attributes_billing_state"]').html("STATE *");
$('#subscription_payment_profile_attributes_billing_state').find('option').html("STATE");
$('label[for="subscription_payment_profile_attributes_billing_zip"]').html("ZIP CODE");
 
// ADDITIONAL INFORMATION
$('.form__section--additional-information h3').html("ADDITIONAL INFORMATION");
 
// TERMS
$('.form__section--terms-submit label').contents().slice(3).remove();
$('.form__section--terms-submit label').append('I ACCEPT THE <a href="" target="_blank">TERMS AND CONDITIONS</a>');
 
// SUBMIT
$('#subscription_submit').html("PLACE MY ORDER");
 
// PLAN SUMMARY
$('.content__secondary .content__heading h2').html("PLAN SUMMARY");

Add Self-Service Page language translations

You will need to fill in the corresponding translation and place the finalized code in the Custom JavaScript - Classic (v1) field under Settings > Public Page. Everything that is uppercase is where you would put the translation for that field.

//Billing Information Form
$('#hosted-payment-form h2:first').html("BILLING INFORMATION");
$('label[for="subscription_payment_profile_attributes_full_number"]').html("* FULL CARD NUMBER");
 
//Current Card on File
var currentCard = $('.current_card');
currentCard.text(currentCard.text().replace('Current card on file', 'CURRENT CARD ON FILE'));
 
$('label[for="subscription_payment_profile_attributes_expiration_month"]').html("* EXPIRATION DATE");
 
//Billing Address Form
$('.section_three').next('h2').html("BILLING ADDRESS:" );
$('label[for="subscription_payment_profile_attributes_first_name"]').html( "FIRST NAME ON CARD" );
$('label[for="subscription_payment_profile_attributes_last_name"]').html( "LAST NAME ON CARD" );
$('label[for="subscription_payment_profile_attributes_billing_address"]').html( "* BILLING ADDRESS 1" );
$('label[for="subscription_payment_profile_attributes_billing_address_2"]').html( "BILLING ADDRESS 2" );
$('label[for="subscription_payment_profile_attributes_billing_city"]').html( "* CITY" );
$('label[for="subscription_payment_profile_attributes_billing_country"]').html( "* COUNTRY" );
$('label[for="subscription_payment_profile_attributes_billing_state"]').html( "* STATE" );
$('#subscription_payment_profile_attributes_billing_state' ).find( 'option' ).html( "STATE" );
$('label[for="subscription_payment_profile_attributes_billing_zip"]').html( "* ZIP CODE" );
 
//Submit Button
$( '#subscription_submit' ).val( "UPDATE" );
 
//Success message after submission
function changeSuccessMsg() {
   var selectMsg = $('.flash_success .message');
   var msg = 'Custom Message...';    
   //Change Text
   $(selectMsg).text(msg);  
}
changeSuccessMsg();
$(document).bind('afterSummaryRefresh', changeSuccessMsg);

For European users subject to PSD2, the following JavaScript will translate the 3D Secure warning that appears on the Self-Service Page if the previous attempted payment failed due to requiring SCA.

function changeErrorMsg() {
  var link = $('.three_d_secure_warning .message a');
  var selectMsg = $('.three_d_secure_warning .message');
  var link = $('.three_d_secure_warning .message a');
  var msg = 'Custom Message...';
 
  //Change Text
  $(selectMsg).text(msg);
  $(link).text('Custom link text');
  $('.three_d_secure_warning .message').append(link);
}
 
changeErrorMsg ();
$(document).bind('afterSummaryRefresh', changeErrorMsg);

jQuery

Advanced Billing supports the usage of jQuery on your Public Signup Pages.

For example, if you’d like to include a third-party script that is hosted elsewhere, you can use the jQuery.getScript() function to load a JavaScript file from the server using a GET HTTP request, then execute it.

$.getScript( "https://cdn.example.com/test.js" )
    .done(function( script, textStatus ) {
      console.log( textStatus );
    })
    .fail(function( jqxhr, settings, exception ) {
      $( "div.log" ).text( "Triggered ajaxError handler." );
  });

CSS examples

Change the button color

css

.form__button--primary {
 border-radius: 4px;
 border: solid 2px purple; /* purple */
 background-color: purple; /* purple */
 color: white;
}
.form__button--primary:disabled,
.form__button--is-submitting {
    background-image: none;
    background-color: white; /* white */
    color: purple; /* purple */
    border: solid 2px purple; /* purple */
}
/* Receipt Page */
.plan__summary-total,
.content__heading-section--total,
.success-receipt__icon .fa-check,
.success-receipt__total dl:last-of-type{
 color: purple; /* purple */
}
/* Self-service Page */
#subscription_submit {
 border-radius: 4px;
 background-image:none;
 border: solid 2px purple; /* purple */
 background-color: purple; /* purple */
 color: white;
}
#subscription_submit:hover {
 background-color: white; /* white */
 color: purple; /* purple */
 border: solid 2px purple; /* purple */
}

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

css

/*
  Name: PSP CSS Cheatsheet
  Author: Bob Orchard
*/
 
/* Body Classes */
.public-signup-page {} /* Both Signup and Success Pages */
.public-signup-page__signup {}
.public-signup-page__success {}
 
/* Wrapper: Container that centers the form*/
.wrapper {
  /* Make Form Full-Width */
  /* max-width: 100%; */
}
 
/* Header: Contains logo/logo text */
.header {}
.header__logo {}
.header__logo h1 {}
.header__logo img {}
 
.content__headings {
  /* Desktop: When scrolling, these headings attach themselves to the top of the window */
  /* Mobile/Tablet: Hidden */
}
 
/* Plan Summary Wrapper */
.plan__summary {}
.plan__summary-table {}
.plan__summary-table-row {}
.plan__summary-table-row-label {}
.plan__summary-table-row-total {}
.plan__summary-total {}
.plan__summary-total-description {}
 
/* Plan Summary Items */
.plan__summary-initial {}
.plan__summary-baseline {}
.plan__summary-component {}
.plan__summary-tax {}
 
/* Main Content - Contains both the main form and the summary in the sidebar to the right */
.content {}
.content__main {}
.content__secondary {}
.content__heading { /* Main Heading in both .content__main and .content__secondary */ }
.content__heading--mobile { /* Mobile/Tablet: Mobile Heading that sticks to the top of the window */ }
.content__heading-section--total { /* Mobile/Tablet: Mobile Heading total that sticks to the top of the window */ }
.content__signup-form { /* Signup Form Wrapper */ }
 
.form__section {}
.form__section--product-description {}
.form__section--configure-plan {}
.form__section--apply-coupon {}
.form__section--customer-information {}
.form__section--vat-information {}
.form__section--shipping-information {}
.form__section--billing-information {}
.form__section--billing-address {}
.form__section--terms-submit {}
 
.form__fields { /* Wrapper for a group of fields */ }
.form__field { /* Individual input field */ }
 
.form__fields--name {}
.form__field--first-name {}
.form__field--last-name {}
 
.form__fields--address {}
.form__field--address {}
.form__field--address2 {}
.form__field--country {}
.form__fields--city-state-zip {}
.form__field--city {}
.form__field--state {}
.form__field--zip {}
.form__field--email {}
.form__field--phone {}
.form__field--organization-name {}
 
.form__fields--apply-vat {}
.form__field--vat-number {}
 
.form__field--credit-card-number {}
.form__fields--credit-card-details {}
.form__fields--credit-card-cvv {}
.form__fields--credit-card-expiration-month {}
.form__fields--credit-card-expiration-year {}
 
.form__field--bank-name {}
.form__fields--bank-information {}
.form__field--routing-number {}
.form__field--account-number {}
 
.form__button {}
.form__button--primary {}
.form__button--large {}
.form__button--is-submitting {}
 
.success-receipt {}
.success-receipt__icon {}
.success-receipt__icon--success {}
.success-receipt__heading {}
.success-receipt__items {}
.success-receipt__total {}
.success-receipt__home-link {}
 
/* All Accent Colors */
 
.plan__summary-total,
.content__heading-section--total,
.success-receipt__icon .fa-check,
.success-receipt__total dl:last-of-type {
  color: red;
}
 
.form__button--primary {
  background: red;
  border: red;
}
 
.form__button--primary:hover,
.form__button--primary:active,
.form__button--primary:focus,
.form__button--primary:disabled {
  background: #990000;
}

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

css

/* Plan Summary */
#mobile_summary {}
#summary {}
#summary-setup-fee {}
#summary-recurring-charges {}
#todays-charge {}
 
/* Plan Configuration */
#components_XXX_allocated_quantity { /* On/Off Components */ }
#component_allocated_quantity_XXX { /* Metered & Quantity-Based Components */ }
 
/* Coupons */
#long_coupon_message {}
#coupon_code {}
#coupon_button {}
 
/* VAT Information */
#long_vat_message {}
#subscription_customer_attributes_vat_number {}
#vat_button {}
 
/* Customer Information */
#subscription_customer_attributes_first_name {}
#subscription_customer_attributes_last_name {}
#subscription_customer_attributes_email {}
#subscription_customer_attributes_phone {}
#subscription_customer_attributes_organization {}
 
#subscription_customer_attributes_address {}
#subscription_customer_attributes_address_2 {}
#subscription_customer_attributes_country {}
#subscription_customer_attributes_city {}
#subscription_customer_attributes_state {}
#subscription_customer_attributes_zip {}
 
/* Billing Information */
#credit_card_logos {}
 
#subscription_payment_profile_attributes_first_name {}
#subscription_payment_profile_attributes_last_name {}
#subscription_payment_profile_attributes_full_number {}
#subscription_payment_profile_attributes_cvv {}
#subscription_payment_profile_attributes_expiration_month {}
#subscription_payment_profile_attributes_expiration_year {}
 
#use_shipping_address_1 {}
#use_shipping_address_0 {}
 
#subscription_payment_profile_attributes_billing_address {}
#subscription_payment_profile_attributes_billing_address_2 {}
#subscription_payment_profile_attributes_billing_country {}
#subscription_payment_profile_attributes_billing_city {}
#subscription_payment_profile_attributes_billing_state {}
#subscription_payment_profile_attributes_billing_zip {}
 
/* Custom Fields */
#subscription_metafields_XXX {}
 
/* Terms and Conditions */
#accept_terms {}
 
/* Submit Button */
#subscription_submit {}

Still need help?
Reach out and our support team will take it from here.

Contact support

Help Center › Selling › Public Signup Pages

Customize a Modern Public Signup Page with JavaScript and CSS

··

Last updated on Aug 28, 2026

Before you start

For more JavaScript snippets specific to certain billing scenarios, see Choose the Right Billing Model for sample product setups and in-depth workflows to help customize your Sites.

Important: Do not include <script> tags in your entries. Advanced Billing automatically inserts this tag on your behalf.

JavaScript examples

Limit signups to the US

This JavaScript code will limit both the billing and shipping country dropdown to only have US selectable.

$(function() {
  $('.form__field--country select').find('option').remove();
  $('.form__field--country select').append('<option value="US" checked="checked">United States</option>');
  $('.form__field--country select').change();
});

Add custom validations

This code will allow you to set specific fields as required on the Public Pages. In the example below, we are requiring a custom field with ID 17640.

//Replace the number after `subscription_metafields_` with the ID of the custom field that needs to be required
var field1 = $("#subscription_metafields_17640");
var form = $("#signup-form");
var submitBtn = $("#subscription_submit");
 
$(document).ready(function() {
  var fieldLabel1 = $('label[for="subscription_metafields_17640"]');
  fieldLabel1.text(fieldLabel1.text() + " *");
});
 
submitBtn.click(function() {
  if (field1.val() === "") {
    field1.parent().addClass("has-error");
    field1.parent().append('<span class="error-message">cannot be blank</span>')
    return false;
  }
});
 
form.change(function(){
  if (field1.val() != "") {
    submitBtn.click(function() {
      return true;
    });
  }
});
 
field1.blur(function() {
  if ($(this).val() !== "") {
    $(this).parent().removeClass("has-error");
  } else {
    $(this).parent().addClass("has-error");
  }
});

Require the Organization field

This snippet will require that a potential subscriber enter data in the organization field.

var orgfield = $("#subscription_customer_attributes_organization");
var form = $("#signup-form");
var submitBtn = $("#subscription_submit");
 
$(document).ready(function() {
  var orgfieldLabel = $('label[for="subscription_customer_attributes_organization"]');
  orgfieldLabel.text(orgfieldLabel.text() + " *");
});
 
submitBtn.click(function() {
  if (orgfield.val() === "") {
    orgfield.parent().addClass("has-error");
    orgfield.parent().append('<span class="error-message">cannot be blank</span>')
    return false;
  }
});
 
form.change(function(){
  if (orgfield.val() != "") {
    submitBtn.click(function() {
      return true;
    });
  }
});
 
orgfield.blur(function() {
  if ($(this).val() !== "") {
    $(this).parent().removeClass("has-error");
  } else {
    $(this).parent().addClass("has-error");
  }
});

Require a phone number

var phoneField = $("#subscription_customer_attributes_phone");
var form = $("#signup-form");
var submitBtn = $("#subscription_submit");
 
$(document).ready(function() {
  var phoneFieldLabel = $('label[for="subscription_customer_attributes_phone"]');
  phoneFieldLabel.text(phoneFieldLabel.text() + " *");
});
 
submitBtn.click(function() {
  if (phoneField.val() === "") {
    phoneField.parent().addClass("has-error");
    phoneField.parent().append('<span class="error-message">cannot be blank</span>');
    return false;
  }
});
 
form.change(function(){
  if (phoneField.val() != "") {
    submitBtn.click(function() {
      return true;
    });
  }
});
 
phoneField.blur(function() {
  if ($(this).val() !== "") {
    $(this).parent().removeClass("has-error");
  } else {
    $(this).parent().addClass("has-error");
  }
});

Require a 10-digit phone field

The Add custom validations snippet above will accept "1" as a valid phone number. This snippet will require the full 10 digits of a phone number to be entered to consider the signup to be valid.

var form = $("form:first");
var phone = $("#subscription_customer_attributes_phone");
var submitbtn = $("#subscription_submit");
 
$(document).ready(function(){
	var phoneLabel = $('label[for="subscription_customer_attributes_phone"]');
	phoneLabel.text(phoneLabel.text() + " *");
});
 
submitbtn.click(function(){
	if (phone.val() === "") {
       phone.addClass("field-error");
       return false;
    }
	if (phone.val().length < 10) {
       phone.addClass("field-error");
       return false;
    }
});
 
form.change(function(){
  if(phone.val() != ""){
    submitbtn.click(function(){
       return true;
    });
  }
});
 
$(phone).blur(function(){
   if ($(this).val() !== "") {
       $(this).removeClass("field-error");
   } else {
       $(this).addClass("field-error");
   }
});

This is the CSS required for highlighting the required phone field if it’s missed.

css

.field-error
{
 color: #f00 !important;
 background: rgba(255, 0, 0, 0.5) !important;
 border: solid 1px #333 !important;
}

Reorder components

Presently, Advanced Billing orders components alphabetically on Public Signup Pages. With the snippet below, you can re-order the components however you prefer.

//This assigns classes to each component. 0 is the first component on the page, 1 is the second, etc.
$('.form__field--boxed').eq(0).addClass('First');
$('.form__field--boxed').eq(1).addClass('Fourth');
$('.form__field--boxed').eq(2).addClass('Second');
$('.form__field--boxed').eq(3).addClass('Third');
 
//This selects the component labeled with the 'Second' class and inserts it after the component labeled with the 'First' class
$('.form__field--boxed.Second').insertAfter('.form__field--boxed.First');
 
//At this point the order would be First, Second, Fourth, Third
 
//This selects the component labeled 'Third' and inserts it before the component labeled 'Fourth'
$('.form__field--boxed.Third').insertBefore('.form__field--boxed.Fourth');

Capture custom field data via a query string

With a small amount of JS, you can populate a custom field for a new signup via a Public Signup Page. The examples below use a custom field called sales.

Additionally, you’ll need to populate / replace the id of subscription_metafields_10463. Simply replace 10463 with the ID of your custom field in your site.

function getUrlVars() {
  var vars = {};
  var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
    vars[key] = value;
  });
  return vars;
}
 
var sales = getUrlVars()["sales"];
$(function() {
  if (sales) {
    $("#subscription_metafields_10463").val(sales);
  }
});
 
//this will hide the entire Custom Field section
$(".form__section--additional-information").hide();

For more information on setting up the custom field, see Configure Custom Fields and Choose the Right Billing Model.

Hide the recurring fee in summary information

This will hide the recurring charges. This method is incredibly useful if you wish to offer a gift subscription that should only obtained via a coupon, resulting in a charge of $0.00.

function hideRecurringFee() {
  $('#summary-recurring-charges').hide();
};
 
hideRecurringFee();
$(document).bind("afterSummaryRefresh", hideRecurringFee);

Hide the recurring fee and component charges in summary information

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

function hideRecurringLineItem() {
  $('#summary-recurring-charges').hide();
  $('.plan__summary-component').hide();
};
 
hideRecurringLineItem();
$(document).bind("afterSummaryRefresh", hideRecurringLineItem);

Add line items to the summary

If there are any items included with your product, add line item descriptions for them without charging for them. These line items will not be associated with any component.

For example, the JS below adds two line items for $0.00 each. Change “Line Item” to rename the lines.

function planSummary(){
    $('<tr class="plan__summary-table-row">'+
     '<td class="plan__summary-table-row-label">Line Item</td>' +
      '<td class="plan__summary-table-row-total">$0.00</td>'+
    '</tr>'+
    '<tr class="plan__summary-table-row">'+
         '<td class="plan__summary-table-row-label">Line Item</td>' +
          '<td class="plan__summary-table-row-total">$0.00</td>'+
    '</tr>'
    ).insertBefore('#todays-charge');
}
planSummary();
$(document).bind('afterSummaryRefresh', planSummary);

Hide the "None" choice on custom fields

$(function() { 
  $("#subscription_metafields_xxxx option[value='']").remove();
  $("#subscription_metafields_xxxx option[value='']").remove();
  $("#subscription_metafields_xxxx option[value='']").remove();
});

Change label text

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

$(function() {
  var organizationLabel = $("label[for='subscription_customer_attributes_organization']");
  organizationLabel.text("Place Text Here");
});

Change the setup fee text

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

// Just put what you want the setup fee text to be in the PLACE TEXT HERE placeholder
 
function changeSetupFee() {
  var setupfee = $("#summary-setup-fee .plan__summary-table-row-label");
  var text = setupfee.text().replace('Setup Fee', 'PLACE TEXT HERE');
  setupfee.text(text);
};
 
changeSetupFee();
$(document).bind("afterSummaryRefresh", changeSetupFee);

Change the submit button text

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

$(function() {
  var submitBtn = $("#subscription_submit");
  submitBtn.html('PLACE TEXT HERE');
});

Change the Today's Total text

This will change the Today’s Total text to add USD, or the currency of your choice in the Public Signup Page.

function addUsd() {
  $('#todays-charge > td:nth-child(2)').append(' USD');
};
 
addUsd();
$(document).bind("afterSummaryRefresh", addUsd);

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.

//Replace the "XXXXXX" with the allocated quantity id of the components
//	This value can be found within the page source of the PSP
//Both components need to be apart of the same product family
 
$(function () {
  var component1 = $("#component_allocated_quantity_XXXXXX");
  var component2 = $("#component_allocated_quantity_XXXXXX");
  
 component1.change(function(){
    component2.val($(this).val());
  });
 component2.change(function(){
    component1.val($(this).val());
  });
 
});

Force a component to equal a specific number

//Replace the "XXXXXX" with the allocated quantity id of the components
//	This value can be found within the page source of the PSP
//Change fixedValue to desired positive integer
 
$(function () {
 
  var updateTotal = $("#apply_component_button");
  var component = $("#component_allocated_quantity_XXXXXX");
  var fixedValue = 1
  
  component.val(fixedValue);
 
  component.change(function () {
    component.val(fixedValue);
    updateTotal.click();
  });
});

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

$(function() {
  var updatingCheckboxes = false,
  $components = $('.component-checkbox');
 
  $('.toggle--on-off').on('click', function(e) {
    if (updatingCheckboxes) { return; }
 
    var $el = $(this),
    checked = $el.is(':checked');
 
    if (checked) {
      e.preventDefault();
      updatingCheckboxes = true;
 
      // Set all on/off components to unchecked state
      $components.prop("checked", false);
      $components.parent().removeClass('btn-success').addClass('btn-default');
      $('.toggle__text').text('Add');
 
      // Set selected component to checked state
      $el.prop("checked", true);
      $el.parent().removeClass('btn-default').addClass('btn-success');
      $('.toggle__text', $el).text(!checked ? 'Select' : 'Selected');
      
      updatingCheckboxes = false;
    }
  });
});

$('body > div.wrapper > div.success-receipt > div.success-receipt__heading').append("INSERT TEXT YOU WOULD LIKE TO SEE ON RECEIPT PAGE");

Custom scripts may also be configured for the success or receipt page when supported by the page settings. Use receipt-page-specific JavaScript only for post-signup behavior, such as analytics tracking or changing receipt-page messaging.

function hideExpirationMessage() {
 $('.plan__summary-total-description').hide();
};
 
hideExpirationMessage();
$(document).bind("afterSummaryRefresh", hideExpirationMessage);

Hide one or more components

In this example, the number in square brackets refers to the components ordered on the page, where 0 is the first component and 1 is the second component.

$($('.form__field--boxed')[0]).hide(); // hides first component
$($('.form__field--boxed')[1]).hide(); // hides second component

Include a Google font

The following allows you to take a Google font and apply it to your hosted page(s). It consists of a JavaScript and CSS snippet.

JS: Replace the link after href with the URL of the Google font you are interested in using.

$('head').append('<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">');

CSS: The name of the font-family will be the one that you chose above.

css

body {
 font-family: Lato;
}

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

// CONFIGURE YOUR PLAN
$('.form__section--configure-plan h3').html("CONFIGURE YOUR PLAN");
$('#form__section-apply-components').html("UPDATE TOTALS");
$('#form__section-apply-components').data("loading-text", "<i class='fa fa-refresh fa-spin fa-fw'></i> UPDATING...");
$('#form__section-apply-components').data("button-text", "UPDATE TOTALS");
 
// COUPON CODE
$('.form__section--coupon h3').html("COUPON CODE");
$('#coupon_button').html("APPLY CODE");
$('#coupon_button').data("loading-text", "<i class='fa fa-refresh fa-spin fa-fw'></i> APPLYING...");
$('#coupon_button').data("button-text", "APPLY CODE");
 
// VAT INFORMATION
$('.form__section--vat-information h3').html("VAT INFORMATION");
$('#vat_button').html("VALIDATE VAT");
$('#vat_button').data("loading-text", "<i class='fa fa-refresh fa-spin fa-fw'></i> VALIDATING...");
$('#vat_button').data("button-text", "VALIDATE VAT");
 
// CUSTOMER INFORMATION
$('.form__section--customer-information h3').html("CUSTOMER INFORMATION");
$('label[for="subscription_customer_attributes_first_name"]').html("FIRST NAME *"); 
$('label[for="subscription_customer_attributes_last_name"]').html("LAST NAME *"); 
$('label[for="subscription_customer_attributes_email"]').html("EMAIL ADDRESS *"); 
$('label[for="subscription_customer_attributes_phone"]').html("PHONE"); 
$('label[for="subscription_customer_attributes_organization"]').html("ORGANIZATION");
 
$('label[for="subscription_customer_attributes_address"]').html("SHIPPING ADDRESS 1 *"); 
$('label[for="subscription_customer_attributes_address_2"]').html("SHIPPING ADDRESS 2"); 
$('label[for="subscription_customer_attributes_city"]').html("SHIPPING CITY *"); 
$('label[for="subscription_customer_attributes_country"]').html("SHIPPING COUNTRY *"); 
$('#subscription_customer_attributes_country').find('option').html("COUNTRY"); 
$('label[for="subscription_customer_attributes_state"]').html("SHIPPING STATE *"); 
$('#subscription_customer_attributes_state').find('option').html("STATE"); 
$('label[for="subscription_customer_attributes_zip"]').html("SHIPPING ZIP CODE"); 
 
// BILLING INFORMATION
$('.form__section--billing-information h3').html("BILLING INFORMATION");
$('.form__section--billing-information p:first').html("ALL TRANSACTIONS ARE SECURE AND ENCRYPTED.");
$('.form__section--credit-card .form__header-section--title').html('CREDIT CARD');
 
$('label[for="subscription_payment_profile_attributes_first_name"]').html("FIRST NAME ON ACCOUNT *");
$('label[for="subscription_payment_profile_attributes_last_name"]').html("LAST NAME ON ACCOUNT *");
$('label[for="subscription_payment_profile_attributes_full_number"]').html("CARD NUMBER *");
$('label[for="subscription_payment_profile_attributes_cvv"]').html("CVV");
$('label[for="subscription_payment_profile_attributes_expiration_month"]').html("EXPIRATION MONTH *");
$('label[for="subscription_payment_profile_attributes_expiration_year"]').html("EXPIRATION YEAR *");
 
// BILLING ADDRESS
$('.form__section--billing-address h3').html("BILLING ADDRESS");
$('.form__section--billing-address header label:first').contents().last().replaceWith("USE SHIPPING ADDRESS");
$('.form__section--billing-address header label:last').contents().last().replaceWith("USE A DIFFERENT BILLING ADDRESS");
 
$('label[for="subscription_payment_profile_attributes_billing_address"]').html("BILLING ADDRESS 1 *");
$('label[for="subscription_payment_profile_attributes_billing_address_2"]').html("BILLING ADDRESS 2");
$('label[for="subscription_payment_profile_attributes_billing_city"]').html("CITY *");
$('label[for="subscription_payment_profile_attributes_billing_country"]').html("COUNTRY *");
$('#subscription_payment_profile_attributes_billing_country').find('option').html("COUNTRY");
$('label[for="subscription_payment_profile_attributes_billing_state"]').html("STATE *");
$('#subscription_payment_profile_attributes_billing_state').find('option').html("STATE");
$('label[for="subscription_payment_profile_attributes_billing_zip"]').html("ZIP CODE");
 
// ADDITIONAL INFORMATION
$('.form__section--additional-information h3').html("ADDITIONAL INFORMATION");
 
// TERMS
$('.form__section--terms-submit label').contents().slice(3).remove();
$('.form__section--terms-submit label').append('I ACCEPT THE <a href="" target="_blank">TERMS AND CONDITIONS</a>');
 
// SUBMIT
$('#subscription_submit').html("PLACE MY ORDER");
 
// PLAN SUMMARY
$('.content__secondary .content__heading h2').html("PLAN SUMMARY");

Add Self-Service Page language translations

//Billing Information Form
$('#hosted-payment-form h2:first').html("BILLING INFORMATION");
$('label[for="subscription_payment_profile_attributes_full_number"]').html("* FULL CARD NUMBER");
 
//Current Card on File
var currentCard = $('.current_card');
currentCard.text(currentCard.text().replace('Current card on file', 'CURRENT CARD ON FILE'));
 
$('label[for="subscription_payment_profile_attributes_expiration_month"]').html("* EXPIRATION DATE");
 
//Billing Address Form
$('.section_three').next('h2').html("BILLING ADDRESS:" );
$('label[for="subscription_payment_profile_attributes_first_name"]').html( "FIRST NAME ON CARD" );
$('label[for="subscription_payment_profile_attributes_last_name"]').html( "LAST NAME ON CARD" );
$('label[for="subscription_payment_profile_attributes_billing_address"]').html( "* BILLING ADDRESS 1" );
$('label[for="subscription_payment_profile_attributes_billing_address_2"]').html( "BILLING ADDRESS 2" );
$('label[for="subscription_payment_profile_attributes_billing_city"]').html( "* CITY" );
$('label[for="subscription_payment_profile_attributes_billing_country"]').html( "* COUNTRY" );
$('label[for="subscription_payment_profile_attributes_billing_state"]').html( "* STATE" );
$('#subscription_payment_profile_attributes_billing_state' ).find( 'option' ).html( "STATE" );
$('label[for="subscription_payment_profile_attributes_billing_zip"]').html( "* ZIP CODE" );
 
//Submit Button
$( '#subscription_submit' ).val( "UPDATE" );
 
//Success message after submission
function changeSuccessMsg() {
   var selectMsg = $('.flash_success .message');
   var msg = 'Custom Message...';    
   //Change Text
   $(selectMsg).text(msg);  
}
changeSuccessMsg();
$(document).bind('afterSummaryRefresh', changeSuccessMsg);

For European users subject to PSD2, the following JavaScript will translate the 3D Secure warning that appears on the Self-Service Page if the previous attempted payment failed due to requiring SCA.

function changeErrorMsg() {
  var link = $('.three_d_secure_warning .message a');
  var selectMsg = $('.three_d_secure_warning .message');
  var link = $('.three_d_secure_warning .message a');
  var msg = 'Custom Message...';
 
  //Change Text
  $(selectMsg).text(msg);
  $(link).text('Custom link text');
  $('.three_d_secure_warning .message').append(link);
}
 
changeErrorMsg ();
$(document).bind('afterSummaryRefresh', changeErrorMsg);

jQuery

Advanced Billing supports the usage of jQuery on your Public Signup Pages.

$.getScript( "https://cdn.example.com/test.js" )
    .done(function( script, textStatus ) {
      console.log( textStatus );
    })
    .fail(function( jqxhr, settings, exception ) {
      $( "div.log" ).text( "Triggered ajaxError handler." );
  });

CSS examples

Change the button color

css

.form__button--primary {
 border-radius: 4px;
 border: solid 2px purple; /* purple */
 background-color: purple; /* purple */
 color: white;
}
.form__button--primary:disabled,
.form__button--is-submitting {
    background-image: none;
    background-color: white; /* white */
    color: purple; /* purple */
    border: solid 2px purple; /* purple */
}
/* Receipt Page */
.plan__summary-total,
.content__heading-section--total,
.success-receipt__icon .fa-check,
.success-receipt__total dl:last-of-type{
 color: purple; /* purple */
}
/* Self-service Page */
#subscription_submit {
 border-radius: 4px;
 background-image:none;
 border: solid 2px purple; /* purple */
 background-color: purple; /* purple */
 color: white;
}
#subscription_submit:hover {
 background-color: white; /* white */
 color: purple; /* purple */
 border: solid 2px purple; /* purple */
}

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

css

/*
  Name: PSP CSS Cheatsheet
  Author: Bob Orchard
*/
 
/* Body Classes */
.public-signup-page {} /* Both Signup and Success Pages */
.public-signup-page__signup {}
.public-signup-page__success {}
 
/* Wrapper: Container that centers the form*/
.wrapper {
  /* Make Form Full-Width */
  /* max-width: 100%; */
}
 
/* Header: Contains logo/logo text */
.header {}
.header__logo {}
.header__logo h1 {}
.header__logo img {}
 
.content__headings {
  /* Desktop: When scrolling, these headings attach themselves to the top of the window */
  /* Mobile/Tablet: Hidden */
}
 
/* Plan Summary Wrapper */
.plan__summary {}
.plan__summary-table {}
.plan__summary-table-row {}
.plan__summary-table-row-label {}
.plan__summary-table-row-total {}
.plan__summary-total {}
.plan__summary-total-description {}
 
/* Plan Summary Items */
.plan__summary-initial {}
.plan__summary-baseline {}
.plan__summary-component {}
.plan__summary-tax {}
 
/* Main Content - Contains both the main form and the summary in the sidebar to the right */
.content {}
.content__main {}
.content__secondary {}
.content__heading { /* Main Heading in both .content__main and .content__secondary */ }
.content__heading--mobile { /* Mobile/Tablet: Mobile Heading that sticks to the top of the window */ }
.content__heading-section--total { /* Mobile/Tablet: Mobile Heading total that sticks to the top of the window */ }
.content__signup-form { /* Signup Form Wrapper */ }
 
.form__section {}
.form__section--product-description {}
.form__section--configure-plan {}
.form__section--apply-coupon {}
.form__section--customer-information {}
.form__section--vat-information {}
.form__section--shipping-information {}
.form__section--billing-information {}
.form__section--billing-address {}
.form__section--terms-submit {}
 
.form__fields { /* Wrapper for a group of fields */ }
.form__field { /* Individual input field */ }
 
.form__fields--name {}
.form__field--first-name {}
.form__field--last-name {}
 
.form__fields--address {}
.form__field--address {}
.form__field--address2 {}
.form__field--country {}
.form__fields--city-state-zip {}
.form__field--city {}
.form__field--state {}
.form__field--zip {}
.form__field--email {}
.form__field--phone {}
.form__field--organization-name {}
 
.form__fields--apply-vat {}
.form__field--vat-number {}
 
.form__field--credit-card-number {}
.form__fields--credit-card-details {}
.form__fields--credit-card-cvv {}
.form__fields--credit-card-expiration-month {}
.form__fields--credit-card-expiration-year {}
 
.form__field--bank-name {}
.form__fields--bank-information {}
.form__field--routing-number {}
.form__field--account-number {}
 
.form__button {}
.form__button--primary {}
.form__button--large {}
.form__button--is-submitting {}
 
.success-receipt {}
.success-receipt__icon {}
.success-receipt__icon--success {}
.success-receipt__heading {}
.success-receipt__items {}
.success-receipt__total {}
.success-receipt__home-link {}
 
/* All Accent Colors */
 
.plan__summary-total,
.content__heading-section--total,
.success-receipt__icon .fa-check,
.success-receipt__total dl:last-of-type {
  color: red;
}
 
.form__button--primary {
  background: red;
  border: red;
}
 
.form__button--primary:hover,
.form__button--primary:active,
.form__button--primary:focus,
.form__button--primary:disabled {
  background: #990000;
}

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

css

/* Plan Summary */
#mobile_summary {}
#summary {}
#summary-setup-fee {}
#summary-recurring-charges {}
#todays-charge {}
 
/* Plan Configuration */
#components_XXX_allocated_quantity { /* On/Off Components */ }
#component_allocated_quantity_XXX { /* Metered & Quantity-Based Components */ }
 
/* Coupons */
#long_coupon_message {}
#coupon_code {}
#coupon_button {}
 
/* VAT Information */
#long_vat_message {}
#subscription_customer_attributes_vat_number {}
#vat_button {}
 
/* Customer Information */
#subscription_customer_attributes_first_name {}
#subscription_customer_attributes_last_name {}
#subscription_customer_attributes_email {}
#subscription_customer_attributes_phone {}
#subscription_customer_attributes_organization {}
 
#subscription_customer_attributes_address {}
#subscription_customer_attributes_address_2 {}
#subscription_customer_attributes_country {}
#subscription_customer_attributes_city {}
#subscription_customer_attributes_state {}
#subscription_customer_attributes_zip {}
 
/* Billing Information */
#credit_card_logos {}
 
#subscription_payment_profile_attributes_first_name {}
#subscription_payment_profile_attributes_last_name {}
#subscription_payment_profile_attributes_full_number {}
#subscription_payment_profile_attributes_cvv {}
#subscription_payment_profile_attributes_expiration_month {}
#subscription_payment_profile_attributes_expiration_year {}
 
#use_shipping_address_1 {}
#use_shipping_address_0 {}
 
#subscription_payment_profile_attributes_billing_address {}
#subscription_payment_profile_attributes_billing_address_2 {}
#subscription_payment_profile_attributes_billing_country {}
#subscription_payment_profile_attributes_billing_city {}
#subscription_payment_profile_attributes_billing_state {}
#subscription_payment_profile_attributes_billing_zip {}
 
/* Custom Fields */
#subscription_metafields_XXX {}
 
/* Terms and Conditions */
#accept_terms {}
 
/* Submit Button */
#subscription_submit {}

Still need help?
Reach out and our support team will take it from here.

Contact support

Customize a Modern Public Signup Page with JavaScript and CSS

Before you start

JavaScript examples

Limit signups to the US

Add custom validations

Require the Organization field

Require a phone number

Require a 10-digit phone field

Reorder components

Capture custom field data via a query string

Hide the recurring fee in summary information

Hide the recurring fee and component charges in summary information

Add line items to the summary

Hide the "None" choice on custom fields

Change label text

Change the setup fee text

Change the submit button text

Change the Today's Total text

Force two components to be equal

Force a component to equal a specific number

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

Change wording on the receipt page after signup

Hide the renewal price or expiration message on a Public Signup Page

Hide one or more components

Include a Google font

Add Signup Page language translations

Add Self-Service Page language translations

jQuery

CSS examples

Change the button color

Signup Page CSS classes

Signup Page CSS IDs

Customize a Modern Public Signup Page with JavaScript and CSS

Before you start

JavaScript examples

Limit signups to the US

Add custom validations

Require the Organization field

Require a phone number

Require a 10-digit phone field

Reorder components

Capture custom field data via a query string

Hide the recurring fee in summary information

Hide the recurring fee and component charges in summary information

Add line items to the summary

Hide the "None" choice on custom fields

Change label text

Change the setup fee text

Change the submit button text

Change the Today's Total text

Force two components to be equal

Force a component to equal a specific number

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

Change wording on the receipt page after signup

Hide the renewal price or expiration message on a Public Signup Page

Hide one or more components

Include a Google font

Add Signup Page language translations

Add Self-Service Page language translations

jQuery

CSS examples

Change the button color

Signup Page CSS classes

Signup Page CSS IDs