Customizing forms with CSS

Table of contents:

• How to customize forms with CSS styles?
• Finding form ID
• Where to add custom CSS styles?
• How to customize payment button?
• How to hide payment details popover?
• How to customize Customer portal buttons?

How to customize forms with CSS styles?

You can change how forms look like by adding custom CSS styles.

Follow these steps:

1. Look up the form ID

2. Find a recipe below 

   (for example, change the look of the payment button)

3. Add your custom CSS 

   (see Where to put your custom CSS styles)

4. Reload the page

Look up the form ID

If you’d like to add styles to a form then you’d need the ID of the form in question.

You can look up the form ID on the “Appearance” tab of the form:

Where to put your custom CSS styles?

You can add your custom CSS styles on the “Full Stripe → Settings → Form → Appearance” page in WP admin:

When you save the changes, the new styles take effect immediately.

How to customize payment button?

As a first step, you have to look up the form ID.

In the next step, you just have to copy and modify the example CSS below. Make sure that FORMID is replaced by the id of the form:

/* Replace FORMID with the actual form's id */
button#submit--FORMID { 
  background-color: red;  /* This is an example, add your button properties */
}

Let’s say your form id is Hn5Gv7o, then the CSS rules becomes:

button#submit--Hn5Gv7o { 
  background-color: red;  /* This is an example, add your button properties */
}

How to hide the payment details popover?

As a first step, you have to look up the form ID.

In the next step, you just have to copy and modify the example CSS below. Make sure that FORMID is replaced by the id of the form:

/* Replace FORMID with the actual form's id */
#payment-details--FORMID {
    display: none;
}

Let’s say your form id is Hn5Gv7o, then the CSS rules becomes:

#payment-details--Hn5Gv7o {
    display: none;
}

How to customize Customer portal buttons?

You just have to copy and modify the example CSS below:

#wpfs-enter-email-address-form .wpfs-btn-primary {
  background-color: #ecb510;        /* This is an example, add your button properties */
}

#wpfs-enter-security-code-form .wpfs-btn-primary {
  background-color: #ecb510;        /* This is an example, add your button properties */
}

#wpfs-update-card-form .wpfs-btn-primary {
  background-color: #ecb510;        /* This is an example, add your button properties */
}

#wpfs-cancel-subscription-form .wpfs-btn-primary {
  background-color: #ecb510;        /* This is an example, add your button properties */
}