Skip to content

Spring Special Sale!

Up To 50% OFF!
Paymattic
  • FeaturesExpand
    • Paymattic for Small Business
    • Paymattic for Non Profit
    • Paymattic for e-Learning
    • Paymattic for Membership
    • All Features
  • Pricing
  • Integrations
  • ResourcesExpand
    • Blogs
    • Demo
    • Documentation
    • Support
    • REST API Doc
Get Paymattic

Spring Special Sale!

Up To 50% OFF!
Paymattic
Popular Search stripesubscriptionrecurringconditionalcoupon

Getting Started with Paymattic

  • Paymattic Introduction 
  • How to Install and Activate Paymattic in WordPress
  • How to Activate the Paymattic Pro Version License? 

Form Editor

  • How to Create a Step Form with Paymattic
  • How to Create Your First Payment Form in a Minute and Accept Payments with Paymattic?
  • How to Use Advanced Editor in Paymattic?
  • How to Create WordPress Donation Form with Simple Form Templates?
  • How to Edit Form Fields in WordPress with Paymattic?
  • How to Delete Form Fields in WordPress with Paymattic?
  • How to Duplicate Forms in WordPress with Paymattic?
  • How to Use Conditional Logic in Form Fields with Paymattic?

General Input Fields

  • How to Use General Form Input Fields in WordPress with Paymattic

Donation and Product Fields

  • How to Add Shopping Cart in WordPress with Paymattic?
  • How to Add Payment Item Fields in WordPress with Paymattic?
  • How to Add Subscription Payment Item Fields in Paymattic?
  • How to Add Tabular Product Item Fields in WordPress with Paymattic?
  • How to Add Donation Progress Item in WordPress with Paymattic?
  • How to Add Item Quantity Field in WordPress with Paymattic? 
  • How to Add Custom Payment Amount Field in WordPress with Paymattic?
  • How to Add Tax Calculated Amount Field in WordPress with Paymattic?
  • How to Add Coupon Field in WordPress with Paymattic

Payment Method Fields

  • How to Integrate Xendit Payment Gateway in WordPress with Paymattic?
  • How to Integrate Square with Paymattic in WordPress?
  • How to Configure Billplz in WordPress with Paymattic?
  • How to Configure Stripe Payment Gateway in WordPress with Paymattic?
  • How to Configure PayPal in WordPress with Paymattic?
  • How to Set PayPal IPN in WordPress with Paymattic?
  • How to Integrate Mollie in WordPress with Paymattic?
  • How to Integrate Razorpay with Paymattic in WordPress
  • How to Integrate Paystack in WordPress with Paymattic?
  • How to Integrate Payrexx in WordPress with Paymattic
  • How to Integrate SSLCOMMERZ with Paymattic in WordPress?
  • How to Collect Offline Payment in WordPress with Paymattic

Global Settings

  • How to Configure Cloudflare Turnstile Security with Paymattic?
  • How to Configure reCAPTCHA in WordPress with Paymattic
  • How to Change Currency Settings in WordPress with Paymattic
  • How to Manage User Roles in WordPress with Paymattic?

Integrations

  • How to Integrate Google Sheets in WordPress with Paymattic?
  • How to Integrate Fluent Support with Paymattic in WordPress?
  • How to Integrate Webhook in WordPress with Paymattic?
  • How to Integrate Zapier with Paymattic in WordPress?
  • How to Integrate Slack in WordPress with Paymattic?
  • How to Integrate Telegram with Paymattic in WordPress?
  • How to Integrate Twilio with Paymattic in WordPress?
  • How to Integrate ActiveCampaign in WordPress with Paymattic?
  • How to Integrate Mailchimp in WordPress with Paymattic?
  • How to Integrate FluentCRM in WordPress with Paymattic
  • How to Create a User Registration Form with Paymattic in WordPress?

Learning Management System (LMS) Integrations

  • How to Integrate LifterLMS in WordPress with Paymattic?
  • How to Integrate LearnDash in WordPress with Paymattic?
  • How to Integrate Tutor LMS in WordPress with Paymattic?

Form Settings

  • How to Create Custom CSS/JS in WordPress with Paymattic? 
  • How to Set Form Scheduling and Restriction Settings in WordPress?
  • How to Customize Form Design Settings in WordPress with Paymattic?
  • How to Configure Confirmation Settings in WordPress?

Email Notification Settings

  • How to Setup Email Notifications in Paymattic WordPress Plugin?

Manage Form Entries

  • How to Manage Subscriptions in WordPress with Paymattic
  • How to Disable IP Address Logging in WordPress with Paymattic?
  • How to View Single Submission Data and Manage Payments in Paymattic
  • How to View and Manage All Form Entries in WordPress with Paymattic

Reports & Analytics

  • How to View the Reports and Payment Analytics in WordPress?

FAQ

  • Date Formats Customization
  • How to Fix Not Sending Email Confirmations Issue in WordPress?

Customer Profile

  • How to View Customer Profile in WordPress with Paymattic?

Import - Export

  • How to Import- Export Forms in WordPress with Paymattic?
  • How to Export Form Entries in CSV, Excel, ODS and JSON format in WordPress?

Change Log

  • Change Log
  • Home
  • Docs
  • Form Settings
  • How to Create Custom CSS/JS in WordPress with Paymattic? 

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

Table of Contents
  • How to create custom CSS
  • How to create custom JS

You can create custom CSS or JS for a specific form in Paymattic. This CSS / JS will only be applied to that specific form.

Custom CSS/JS can be used to add your own styles or script to your form.  Let’s learn how to add custom CSS / JS in Paymattic.

  • First of all, select the form to which you want to add custom CSS / JS.

  • Then, click on the Settings button below the form name.

Forms settings

  • Press the Custom CSS/JS tab on the left sidebar to open the CSS/JS panel.

Custom CSS/JS
Custom CSS/JS

How to create custom CSS #

There is no need to include a <style> tag. However, before you add any CSS code, you must first add the id of the specific table. It is necessary to target this specific form and apply CSS styling to it.

Custom CSS
Custom CSS

Sometimes you might need to add !important to override default styles.

How to create custom JS #

You can write javascript or jQuery in the custom JS panel. 

  • Your additional JS code will run after the form is initialized. 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.

Custom JS
Custom JS

  • Please do not include <script> </script> tag in the custom JS panel.

  • At last, you must click the Save CSS and JS button to make your additional script functional.

This is the simple process to add custom CSS/JS to your form.

What are your Feelings
Share This Article :
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
Still stuck? How can we help?

How can we help?

Updated on October 21, 2022
How to Set Form Scheduling and Restriction Settings in WordPress?

Powered by BetterDocs

Table of Contents
  • How to create custom CSS
  • How to create custom JS
paymattic

Paymattic (formerly known as WPPayForm) is the perfect lightweight WordPress payments and donation plugin fit for your small business, online fundraiser, e-Learning or membership program.

Payment Methods

  • Stripe
  • Paypal
  • Mollie
  • Razorpay
  • Billplz
  • Paystack
  • Square
  • Payrexx
  • SSLCOMMERZ
  • Xendit

Get Help

  • Docs
  • API Docs
  • Blogs
  • Support
  • Brand Assets

Integrations

  • FluentCRM
  • Zapier
  • Mailchimp
  • Slack
  • Telegram
  • LifterLMS
  • Tutor LMS
  • LearnDash
  • Twilio
  • Google Sheets

Subscribe to our email

Footer Newsletter
We will never spam you. We will only send you product updates and tips.
PM-Spring-Sale-Popup-Banner
×

Copyright©2023 Paymattic

Affiliate Terms & Privacy

Facebook Twitter YouTube Linkedin WordPress
  • Features
    • Paymattic for Small Business
    • Paymattic for Non Profit
    • Paymattic for e-Learning
    • Paymattic for Membership
    • All Features
  • Pricing
  • Integrations
  • Resources
    • Blogs
    • Demo
    • Documentation
    • Support
    • REST API Doc