Search for answers:
Customer Notices: WordPress 4.5 Affects LiveEditor Functionality - See this article WordFence Plugin Affects LiveEditor - See this article

Customize Checkout Forms (OptimizeMember)

If you want to style your checkout forms within OptimizeMember, this can be done through using custom CSS (We do not have admin options for this)

This is an advanced modification so we recommend consulting a CSS coder or HTML expert if you're not sure.  We have provided some example codes which you can add to Page Settings > Other Scripts > Custom CSS (on a LiveEditor page) to add a little more style to your OptimizeMember checkout forms. 

Please ensure you choose the code relevant to the integration you are using (Paypal Pro Forms, Authorize.net or Stripe)

 

Please note we cannot provide any further support on using these codes, they are provided as-is for you to use as you see fit:

 

Paypal Pro Form Styling

/* CUSTOM PAYPAL PRO FORM STYLING START CODE */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,600,300,300italic);

#s2member-pro-paypal-registration-form-submit-div{float: none !important;}

#s2member-pro-paypal-registration-submit{width:100% !important;border:1px solid #F5B400 !important;float:none !important;padding:20px;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #FFE235;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFE235), color-stop(100%, #FFD335));
background: -webkit-linear-gradient(top, #FFE235 0%, #FFD335 100%);
background: -moz-linear-gradient(top, #FFE235 0%, #FFD335 100%);
background: -ms-linear-gradient(top, #FFE235 0%, #FFD335 100%);
background: -o-linear-gradient(top, #FFE235 0%, #FFD335 100%);
background: linear-gradient(to bottom, #FFE235 0%, #FFD335 100%);
font-size:20px;
color: #363636;
font-family: 'Open Sans', sans-serif;
font-weight:700;
}

div.s2member-pro-paypal-form-section input{width:100% !important;border:1px solid #ccc !important;float:none !important;padding:12px;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #fcfcfc;
font-size:17px;
color: #363636;
font-family: 'Open Sans', sans-serif;
}

div.s2member-pro-paypal-form-section-title{
font-family: 'Open Sans', sans-serif;
background: #f0f0f0 !important;
padding: 17px;
border:0px;
}

form.s2member-pro-paypal-form label span{
font-weight:300;
font-family: 'Open Sans', sans-serif;
}

div.s2member-pro-paypal-form-description-div{
font-family: 'Open Sans', sans-serif;
font-style:italic;
}

/* CUSTOM PAYPAL PRO FORM STYLING END CODE */

 

 

Authorize.net Form Styling

/* CUSTOM AUTHORIZE.NET FORM STYLING START CODE */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,600,300,300italic);

#s2member-pro-authnet-registration-form-submit-div{float: none !important;}

#s2member-pro-authnet-registration-submit{width:100% !important;border:1px solid #F5B400 !important;float:none !important;padding:20px;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #FFE235;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFE235), color-stop(100%, #FFD335));
background: -webkit-linear-gradient(top, #FFE235 0%, #FFD335 100%);
background: -moz-linear-gradient(top, #FFE235 0%, #FFD335 100%);
background: -ms-linear-gradient(top, #FFE235 0%, #FFD335 100%);
background: -o-linear-gradient(top, #FFE235 0%, #FFD335 100%);
background: linear-gradient(to bottom, #FFE235 0%, #FFD335 100%);
font-size:20px;
color: #363636;
font-family: 'Open Sans', sans-serif;
font-weight:700;
}

div.s2member-pro-authnet-form-section input{width:100% !important;border:1px solid #ccc !important;float:none !important;padding:12px;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #fcfcfc;
font-size:17px;
color: #363636;
font-family: 'Open Sans', sans-serif;
}

div.s2member-pro-authnet-form-section-title{
font-family: 'Open Sans', sans-serif;
background: #f0f0f0 !important;
padding: 17px;
border:0px;
}

form.s2member-pro-authnet-form label span{
font-weight:300;
font-family: 'Open Sans', sans-serif;
}

div.s2member-pro-authnet-form-description-div{
font-family: 'Open Sans', sans-serif;
font-style:italic;
}

/* CUSTOM AUTHORIZE.NET FORM STYLING END CODE */

 

Stripe Form Styling

/* CUSTOM STRIPE FORM STYLING START CODE */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,600,300,300italic);

#optimizemember-pro-stripe-registration-form-submit-div{float: none !important;}

#optimizemember-pro-stripe-registration-submit{width:100% !important;border:1px solid #F5B400 !important;float:none !important;padding:20px;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #FFE235;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFE235), color-stop(100%, #FFD335));
background: -webkit-linear-gradient(top, #FFE235 0%, #FFD335 100%);
background: -moz-linear-gradient(top, #FFE235 0%, #FFD335 100%);
background: -ms-linear-gradient(top, #FFE235 0%, #FFD335 100%);
background: -o-linear-gradient(top, #FFE235 0%, #FFD335 100%);
background: linear-gradient(to bottom, #FFE235 0%, #FFD335 100%);
font-size:20px;
color: #363636;
font-family: 'Open Sans', sans-serif;
font-weight:700;
}

div.optimizemember-pro-stripe-form-section input{width:100% !important;border:1px solid #ccc !important;float:none !important;padding:12px;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #fcfcfc;
font-size:17px;
color: #363636;
font-family: 'Open Sans', sans-serif;
}


div.optimizemember-pro-stripe-form-section-title{
font-family: 'Open Sans', sans-serif;
background: #f0f0f0 !important;
padding: 17px;
border:0px;
}

form.optimizemember-pro-stripe-form label span{
font-weight:300;
font-family: 'Open Sans', sans-serif;
}

div.optimizemember-pro-stripe-form-description-div{
font-family: 'Open Sans', sans-serif;
font-style:italic;
}

 

/* CUSTOM STRIPE FORM STYLING END CODE */

Didn't find an answer to your question? Contact Our Support Team (Submit a ticket)
Was this article helpful?
0 out of 0 found this helpful
Follow

Comments

Other Help Categories:

Get Started Guide

Watch our Ultimate Getting Started guide video

Pre-Sales Questions

Ask questions before purchasing our products

Login Problems

If you're having issues logging into our members hub

Accounts & Billing

Update your billing, request a refund and other accounts help

API Key Issues

Get help with licensing your site and API key issues

Membership Help

Get help creating Membership portals and courses

LiveEditor Help

If you need help using or troubleshooting the LiveEditor

Integrations

Find out about the many integrations possible with OptimizePress

Affiliate Questions

Have questions about promoting OptimizePress

Clubhouse Questions

Questions about our Clubhouse Membership Subscription