Title: Styling forms
Last modified: March 21, 2018

---

# Styling forms

 *  Resolved [chrdunne](https://wordpress.org/support/users/chrdunne/)
 * (@chrdunne)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/styling-forms-3/)
 * Is it possible to style the forms, change their layout etc?
 * Do you have any examples?
 * Thanks
    Chris

Viewing 1 replies (of 1 total)

 *  Plugin Author [Richard Rottman](https://wordpress.org/support/users/rickrottman/)
 * (@rickrottman)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/styling-forms-3/#post-10099873)
 * Yes. The following CSS is loaded on the page directly before the form:
 *     ```
       <style>
         #x_first_name {
           width: 250px;
           height: 30px;
           padding: 0 0 0 6px;
           border: 1px solid #222
         }
         #x_last_name {
           width: 250px;
           height: 30px;
           padding: 0 0 0 6px;
           border: 1px solid #222
         }
         #x_company {
           width: 250px;
           height: 30px;
           padding: 0 0 0 6px;
           border-color: #222
         }
         #x_address {
           width: 250px;
           height: 30px;
           padding: 0 0 0 6px;
           border: 1px solid #222
         }
         #x_city {
           width: 250px;
           height: 30px;
           padding: 0 0 0 6px;
           border: 1px solid #222
         }
         #x_state {
           width: 250px;
           height: 30px;
           padding: 0 0 0 6px;
           border: 1px solid #222
         }
         select#x_state,
         select#x_country {
           padding: 0 0 0 6px;
           -webkit-appearance: none;
           -moz-appearance: none;
           -webkit-border-radius: 0;
           border-radius: 0;
           -webkit-box-shadow: none;
           box-shadow: none
         }
         #x_country {
           width: 250px;
           height: 30px;
           padding: 0 0 0 6px;
           border: 1px solid #222
         }
         #x_invoice_num {
           width: 250px;
           height: 30px;
           padding: 0 0 0 6px;
           border: 1px solid #222
         }
         #x_po_num {
           width: 250px;
           height: 30px;
           padding: 0 0 0 6px;
           border: 1px solid #222
         }
         #x_reference_3 {
           width: 250px;
           height: 30px;
           padding: 0 0 0 6px;
           border: 1px solid #222
         }
         #x_user_1 {
           width: 250px;
           height: 30px;
           padding: 0 0 0 6px;
           border: 1px solid #222
         }
         #x_user_2 {
           width: 250px;
           height: 30px;
           padding: 0 0 0 6px;
           border: 1px solid #222
         }
         #x_user_3 {
           width: 250px;
           height: 30px;
           padding: 0 0 0 6px;
           border: 1px solid #222
         }
         #x_email {
           width: 250px;
           height: 30px;
           padding: 0 0 0 6px;
           border: 1px solid #222
         }
         #x_phone {
           width: 125px;
           height: 30px;
           padding: 0 0 0 6px;
           border: 1px solid #222
         }
         #x_zip {
           width: 125px;
           height: 30px;
           padding: 0 0 0 6px;
           border: 1px solid #222
         }
         #entered_coupon {
           width: 200px;
           height: 30px;
           padding: 0 0 0 6px;
           border: 1px solid #222
         }
         #x_description {
           padding: 0 0 0 6px;
           border: 1px solid #222
         }
         label {
           font-weight: 700;
           display: block
         }
         #x_amount {
           width: 100px;
           height: 30px;
           padding: 0 0 0 6px;
           border-color: #222;
           border-width: 1px;
           margin-bottom: 20px;
           margin-right: 10px;
           display: inline
         }
         #x_amount2 {
           width: 100px;
           height: 30px;
           padding: 0 0 0 6px;
           border-color: #222;
           border-width: 1px;
           margin-bottom: 20px;
           display: inline
         }
         #wp_payeezy_payment_form input[type="submit"] {
           width: auto
         }
       </style>
       ```
   
 * You can override any of these by adding !important to the new style rule. For
   example, if you wanted to make the #x_first_name field 300px wide instead of 
   250px wide, you could go into Customizer and under Additional CSS, add the following
   rule:
 *     ```
       #x_first_name {
           width: 300px !important;
         }
       ```
   
 * The would result in the First Name field being 300px wide.

Viewing 1 replies (of 1 total)

The topic ‘Styling forms’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/wp-payeezy-pay_aeb9c6.svg)
 * [WP Payeezy Pay](https://wordpress.org/plugins/wp-payeezy-pay/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wp-payeezy-pay/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wp-payeezy-pay/)
 * [Active Topics](https://wordpress.org/support/plugin/wp-payeezy-pay/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wp-payeezy-pay/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wp-payeezy-pay/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [style](https://wordpress.org/support/topic-tag/style/)

 * 1 reply
 * 2 participants
 * Last reply from: [Richard Rottman](https://wordpress.org/support/users/rickrottman/)
 * Last activity: [8 years, 3 months ago](https://wordpress.org/support/topic/styling-forms-3/#post-10099873)
 * Status: resolved