# How to Create Custom CSS/JS in WordPress with Paymattic?

> You can create custom CSS or JS for a specific form in Paymattic. Let

- URL: https://paymattic.com/docs/how-to-create-custom-css-js-in-wordpress-with-paymattic/
- Markdown: https://paymattic.com/docs/how-to-create-custom-css-js-in-wordpress-with-paymattic/index.md
- Modified: 2024-11-18

---

# How can we help you?

Popular Search subscriptionstriperecurringtheuser

View Categories

[Paymattic](/) offers the **Custom CSS/JS** feature, which enables you to create custom CSS or JS for a specific form in Paymattic. This allows you to add personalized styles or scripts to your form to meet your specific preferences. This article will guide you through Creating Custom CSS or JS with Paymattic.

## Creating Custom CSS/JS in a Form #

To learn how to create Custom CSS/JS for a specific form, follow the steps with the screenshots below –

First, go to the **All Forms**section from the **Pymattic Navbar,**choosea**Form,**and click the **Pencil/Edit** icon to open the **Editor** page of that form.

If you do not have any existing forms, read this [Create a Form from Scratch](/docs/how-to-create-a-form-from-scratch-with-paymattic/) or [Create a Form using Templates](/docs/simple-form-templates/) documentation to create one.

For example, I choose an existing form to show the whole process.

![](https://paymattic.com/wp-content/uploads/2022/06/1.-Open-desired-form-5-scaled.webp)

Once you open the **Editor** page, go to the **Settings** tab from the left sidebar, and you will get the **Custom CSS/JS**settingsoption to create Custom CSS or JS.

After you complete coding for your Custom CSS/JS, click the **Save CSS & JS** button to save all your customization.

![](https://paymattic.com/wp-content/uploads/2022/06/2.-Settings-tab-and-Custom-CSSJS-option-scaled.webp)

**The Custom CSS and JS mentioned above are briefly explained below –**

### Custom CSS #

Before you add any CSS code, you must first add the ID of the specific form. It is necessary to target this specific form and apply CSS styling to it.

Plus, you do not need to include the **<style>/<style>** tag in the Custom CSS panel.

### Custom Javascript (JS) #

You can write javascript or jQuery in the custom JS panel. Your additional JS code will run after the form is initialized.

You do not need to include the **<script> </script>** tag in the Custom JS panel.

Please write valid **JavaScript** code. Invalid JS code may break the Form. You can use the JavaScript variable **$form** to define the JavaScript DOM object of the form.

This is the simple process of adding Custom CSS/JS to any Paymattic Forms!  
If you have any further questions, concerns, or suggestions, please do not hesitate to contact our [@support team](https://wpmanageninja.com/support-tickets/?utm_source=wpmn&utm_medium=home&utm_campaign=site#/). Thank you.

##### What are your Feelings

#### Share This Article :

- [![Facebook](https://paymattic.com/wp-content/plugins/betterdocs/assets/static/images/social/facebook.svg?v=4.8.1)](https://www.facebook.com/sharer/sharer.php?u=https://paymattic.com/docs/how-to-create-custom-css-js-in-wordpress-with-paymattic/)
- [![X](https://paymattic.com/wp-content/plugins/betterdocs/assets/static/images/social/twitter.svg?v=4.8.1)](https://twitter.com/intent/tweet?url=https://paymattic.com/docs/how-to-create-custom-css-js-in-wordpress-with-paymattic/)
- [![LinkedIn](https://paymattic.com/wp-content/plugins/betterdocs/assets/static/images/social/linkedin.svg?v=4.8.1)](https://www.linkedin.com/shareArticle?mini=true&url=https://paymattic.com/docs/how-to-create-custom-css-js-in-wordpress-with-paymattic/)
- [![Pinterest](https://paymattic.com/wp-content/plugins/betterdocs/assets/static/images/social/pinterest.svg?v=4.8.1)](https://pinterest.com/pin/create/button/?url=https://paymattic.com/docs/how-to-create-custom-css-js-in-wordpress-with-paymattic/)

Still stuck? How can we help? 

## How can we help?

Updated on November 18, 2024

[Customize Form-Specific Payment Settings](/docs/customize-form-specific-payment-settings/)[How to Set Form Scheduling and Restriction Settings in WordPress?](/docs/how-to-set-form-scheduling-and-restriction-settings-in-wordpress-with-paymattic/)

Powered by [BetterDocs](https://betterdocs.co)