A Note on the Advanced Custom Order Form
Sellers can new use ClickBank's new Order Form Tools to create and customize their order forms. This new tool is incredibly easy to use and replaces all the functionality of both basic custom order forms and advanced custom order forms. All sellers are encouraged to make the switch to the new tool to take advantage of the new standard order form, which is the foundation that the new order form tools build on. All legacy order form tools will be retired October 30, 2024.
If you do not move your order form to the new order form tools by that date, don't worry. Orders of your products will still occur as expected, however your order form will lose all customization and default to a "naked" standard order form, which outperforms our legacy order form in load time and design.
For more information on moving your order form over to the new tools and getting the most out of this product, please check out these resources:
- KNOWLEDGE BASE: Using the Order Form Customizer
- KNOWLEDGE BASE: Using the Countdown Timer
- KNOWLEDGE BASE: Using the Custom CSS Editor
- KNOWLEDGE BASE: How to Switch to the New Order Form From the Legacy Order Form
- How to Build a High Converting Custom Order Form on ClickBank [VIDEO]
Overview
NOTE:
The Advanced Custom Order Form (ACOF) allows ClickBank Sellers to add additional customization to their order form by using a CSS customization model. CSS (which stands for “cascading style sheets”) provides sellers with as much control as possible while still ensuring that the order form complies with ClickBank’s accounting and business rules.
NOTE: In order to properly customize your order form, you must be proficient with HTML and CSS. If you do not feel comfortable with these skills, we recommend that you seek out the help of a developer.
This article covers the following topics. Click the hyperlinked text to navigate to the section that best fits your needs.
- Image Compliance Requirements
- Customizable Elements on the Form
- ACOF Required Elements
- ACOF Optional Elements
- ACOF Elements that ARE NOT Permitted
- ACOF Customizations
- Implementing an ACOF
- Downloading and Unzipping Files
- ACOF FAQ
- CSS Editing Tips
- Related Articles
Image Compliance Requirements
All images uploaded to ClickBank must comply with ClickBank’s Image Specifications. Please review the image specifications to ensure that your images are in compliance. Once you have ensured that your images are compliant, you can upload them to your account. This article explains how to add images to your ClickBank account.
You can also upload and display your own images on the ACOF. These can be used for custom headers and footers, custom logos, background images, order bumps, testimonials and branding. These images cannot cover or obscure any required elements.
Note: Images may not include animated GIFs and they must be less than 2MB.
Customizable Elements on the Form
ACOFs include many customizable elements. Some elements are required for every ACOF, while some elements are optional. Both optional and required elements may have limitations for how they may be customized.
For ACOF elements that include text, you may modify the text attributes, colors, background colors, and size. However, you cannot modify the text content.
Advanced Custom Order Form Required Elements
The following elements are required on all ACOFs:
- ClickBank Terms of Sale
- Product Title
- Product Description
- ClickBank Guarantee
- ClickBank Copyright
-
ClickBank Logo
This element must be present, visible, and prominently placed near the top of the order form. It cannot be crowded out or overwhelmed by other elements. - Affiliate Attribution Information
-
Norton Logo, BBB, and TrustedSite Trust Seals
This element can be moved. However it cannot be resized or styled. - Language Dropdown
-
Shipping Information
This element is only required for products with a physical component. -
"Pay Now" Button
You can change the font or color of the "Pay Now" button, but you cannot change the text to "Buy Now." -
ClickBank Purchase Statement:
"Your purchase will appear on your bank statement under the name CLKBANK*COM." -
Clear and Conspicuous Pricing, Billing Options, and Terms
Product pricing and purchase options must be clearly intelligible "at a glance."
Advanced Custom Order Form Optional Elements
The following elements are highly encouraged to be on ACOFs.
- Kount Logo
- Section Titles (e.g. Secure Payment Form, Order Details)
- Header and Logo Images
- Real and Genuine Discounts from the Normal Product Price
- Supplements - Individual bottle pricing times the number offered.
- Supplements - Discounted prices highlighted for bundles versus single bottles.
ACOF Elements That ARE NOT Permitted
The following elements are NOT ALLOWED on ClickBank ACOFs.
-
Misleading Pricing
Pricing that falsely suggests a product previously sold at a higher price is prohibited. -
False MSRPs
False MSRPs or "pre-sale" prices are prohibited. For example, sellers cannot claim a product previously sold for $99 and that the current price of $79 is a sale price if the product has never been sold at the higher price. ClickBank reserves the right to require sellers to provide validity of MSRP or "pre-sale" pricing. -
Static Pricing
Pricing that is displayed on an image will not be able to account for taxes in taxable jurisdictions or exchange rates for foreign currencies.
Implementing an Advanced Custom Order Form
There are five phases to the ACOF implementation process:
- Downloading and Unzipping Files
- Designing and Editing Your Form
-
Uploading ACOF CSS Files
- ClickBank Approval
- Enabling the ACOF
These steps must be repeated for every ACOF in your account.
Downloading and Unzipping Files
The zip packages section of this page contains a link to a ZIP archive. Download this archive. It includes all of the files necessary to create your customized order form.
New ACOF Zip Package: Standard ACOF Package including all elements on the order form including Div elements for Order Bump customization. The new ACOF zip package contains:
-
index_2column-example.html : This file contains a link to ‘theme-files/custom-2column-example.css’.
<link rel=”stylesheet” href=”theme-files/custom-2column-example.css”>If you want to change the name of your custom CSS file for testing purposes, make sure it is reflected in the link above.
-
index_fluid-multi-div.html : This file contains a link to ‘theme-files/custom-fluid-multi-div.css’.
<link rel=”stylesheet” href=”theme-files/custom-fluid-multi-div.css”>
If you want to change the name of your custom CSS file for testing purposes, make sure it is reflected in the link above.
-
index_fluid-multi-div.pdf: A pdf showing the components of the div container layout.
-
index_fluid-multi-div.xlsx: An Excel file showing the components of the div container layout.
-
dist: This directory contains files needed to make your order form work locally. Do not modify the files in this directory.
- theme: This directory contains the custom-css.css files that you edit to create your advanced custom order form.
- custom-2column-example.css: The CSS file template for the two-column order form.
- custom-fluid-multi-div.css: The CSS file template for the fluid order form with divs.
- img: This directory should be used for any images that you create for use on your order form. Before you begin using your ACOF, you must upload the images as described in the Uploading Content section.
Old ACOF Package: Standard ACOF Package including all elements on the order form including Div elements for Order Bump customization. NOTE: DO NOT CHANGE OR ADD ANY FILES IN THIS FOLDER.
-
default-template.html: Contains all of the HTML code (customizable and non-customizable elements) that make up the ClickBank order form. Use this file to preview your custom CSS and see how your order form will look when stylized. Remember that you'll only be able to upload your CSS file, we won't accept any changes to the HTML. By default, you'll see a link to the out-of-the-box ClickBank order form CSS:
<link rel="stylesheet" href="cb-content/public/css/orderform.css">A link to your custom CSS file is included in the HTML template, but is commented out by default.
<!--<link rel="stylesheet" href="c/vendor_name/custom.css">-->If you want to change the name of your custom CSS file, make sure it is reflected in the link above. Uncomment the link to see your custom styling.
- c folder: The location where you will add your custom order form files (both CSS and images).
-
cb-content folder: Contains files that render the order form.
Designing and Editing Your Form
Once you have downloaded the required files, you can use them to customize your order form.
Step 1: Open one of the example html file and uncomment the link to the corresponding CSS file. There are two example html files, with different layouts.
Step 2: Open one of the customizable CSS files in the theme directory, corresponding with the html file.
Step 3: Edit the file to customize your order form. Note: When adding background images to the CSS, they must have a path name of img/<File Name>.<extension>. Images with other paths or from external URLs are not displayed.
Step 4: You can preview your changes locally by opening the default-template.html in any browser.
- We recommend that you perform testing against various common browser and OS combinations as experience across these can vary.
- If you don't want to display any DIV containers on your form, set the property for the DIV in your CSS to display:none; You can hide any DIV in your CSS, but your custom order form will not be approved if you hide any of the required elements.
Adding Order Bump Images to an Advanced Custom Order Form
If you are using the Order Bump feature, you can include images for your approved order bump products on your ACOF. These images are displayed within the order bump panel. Before proceeding, ensure and procure the following:
-
All products to be used in an order bump are created in your account and approved by ClickBank.
-
The order bumps have been associated in your account for each initiating product https://support.clickbank.com/hc/en-us/articles/220364687-Using-the-Order-Bump-Feature
-
All images to be used in the order bump section of the ACOF have been approved by ClickBank uploaded through the My Images section in your account. You cannot use images you have assigned as a product image when they are uploaded. You must upload images specifically for an ACOF. Note: You must adhere to ClickBank’s Images Guidelines when selecting images for the Order Bump Display on the ACOF including refraining from using images that include checkboxes and text fields as they can confuse and mislead customers.
- The order bump’s numeric ID as it pertains to the order bump span to which you are adding an image. To find this, inspect the order form in a Chrome browser and look in the developer panel for the particular div you wish to find the ID for. Usually this requires inspecting twice, once to load the developer panel and once more in the specific div to get it to focus on that div in the code.
Next, add and modify the following code to your Advanced Custom Order Form CSS file.
.bump-info#bumpTitle-[ID FROM ORDER FORM HERE] {
background-image: url(NameOfYourUploadedImageHere.jpg);
height: 150px;
background-repeat: no-repeat;
padding-top: 150px;
}
A completed example using the above screenshot might be:
.bump-info#bumpTitle-1181417 {
background-image: url(myorderbump.jpg);
height: 150px;
background-repeat: no-repeat;
padding-top: 150px;
}
Repeat this process for each specific order bump div until you have added the images you wish to add.
Uploading Advanced Custom Order Form CSS Files
Once your custom images are approved, you need to upload your custom CSS file. Follow these steps to do so. Note: If you've customized the order form with standard customization (replacement banners or sidebar colors, etc.), you'll see these customizations listed under Basic Templates. All CSS customizations will be under Advanced Templates.
Step 1: Log in to your ClickBank account.
Step 2: Click the Vendor Settings.
Step 3: Click My Order Form.
Step 4: Click the Add New Template button.
Step 5: Select Advanced (Mobile Optimized).
Step 6: Click Choose File and upload your CSS file.
If your CSS is valid, it will be submitted to ClickBank for approval. If there are any errors, the file will not be uploaded. Common upload errors include:
- CSS file is empty
- CSS file is over 1 MB in size
- Invalid CSS formatting (e.g. missing curly brackets, colons or semi-colons, or missing identifiers or properties
- CSS has absolute references to remote images beginning with http, https, or www.
- CSS has embedded images (e.g. url(data: image/gif;base64,R01GODhCg)
- @import rules are included (e.g. @import url ('/css/styles.css')
ClickBank Approval
When submitted, the ACOF will be reviewed by ClickBank. Before it can be approved, we verify that it meets the criteria listed in the Customizable Elements on the Form:
- The images and/or design do not violate the ClickBank Client Contract.
- The images follow existing guidelines. ClickBank is unable to accept images, image name tags, and image alt tags that contain any violations of ClickBank policies (such as copyrighted material or trademark names, nudity, profanity, etc.).
Enabling the Advanced Custom Order Form
On the My Order Form page, you will see all your uploaded order forms (pending and approved). If you've used Basic Custom Order Forms before, you'll be familiar with how to use the cbskin parameters. The process works the same way for ACOFs.
Locate the cbskin parameter (cbskin=####) for the order form that you wish to use. You need to include that URL parameter on all payment links on your pitch page.
As a reminder, payment links have the following format:
http://item.nickname.pay.clickbank.net
Add your new parameter at the end of the URL with a /? before the parameter:
http://item.nickname.pay.clickbank.net/?cbskin=SkinID
Once your ACOF if approved and you've updated your payment links on your pitch page, customers will see your new ACOF. NOTE: If you are using PitchPlus Upsells, you should pass the cbskin parameter before you pass the flow ID parameter. For example:
http://item.nickname.pay.clickbank.net/?cbskin=1234&cbfid=2345
Advanced Custom Order Form FAQ
Q: Does one CSS form work for all product types?
A: Yes. You don’t need to make a separate CSS file for each product type. All your customizations will apply for digital or physical products, and for standard or recurring products. Make sure that you don’t hide any elements in your CSS (e.g. shipping details) so that the customization works for all your products.
Q: Can I change the form fields?
A: No. You can only style, but not resize, the elements that are present. You can’t make changes to any text or add new fields to the form NOTE: The credit card field can not be customized.
Q: Can I add images of security seals I own for my site?
A: No. You can only use the ClickBank seals since the order form is on our domain. Security seals must be clickable, therefore, no images of security fields are allowed.
Q: I don’t see my images after uploading my custom CSS file. What happened?
A: Make sure you first uploaded the images you wanted to use to your account. Then reference these image paths in your CSS with IMG/<Image name>.<extension>. We don’t allow any external links to other URLs for images or any other content in the CSS.
Q: Is the language dropdown required?
A: Yes, ClickBank has customers from around the world that purchase products. Even though your product may only be offered in one language, many customers prefer ordering in their native language. Conversion is higher for order forms that offer translation. Keep in mind that any text in your custom images will not be translated. For a full list of required elements, please see our PDF with documentation that is contained in the zip file.
Q: Can I put the price of my product in an image?
A: No. If you list the price in an image, it won’t dynamically update to reflect changes in taxes and currency. The pricing is unclear to the consumer if listed in a static image.
CSS Editing Tips
Change the Form Background Color
Change the blue text in the CSS (#fff) to edit the default form background color.
Body {
Background-color: lightsteelblue;
}
Remove or Edit the Shadow on Form Edges
Comment out the box-shadow property or set it to none to remove the shadow. You can also set a different style to the existing shadow.
#orderForm {
background-color: red;
padding-top: 5px;
box-shadow: 0px 3px 10px #888;
}
Add a Border Around the Form
Add the following line to add a border.
#main {
border: 1px solid black;
}
Change the Default Font
Change the specified text to change the default font.
.body{
font-family: 'Helvetica Neue', Arial, sans-serif;
color: #333;
background: #fff;
}
Change the Style on Form Input Fields
This change controls the style of the Pay Now button.
#orderForm .form-control {
border-color: orange;
}
Additional Resources & Related Articles