Advanced Custom Order Form

The Advanced Custom Order Form feature lets you add additional customization to your order form using a CSS customization model.

By using CSS, we give you as much control as possible while still ensuring that we comply with our accounting and business rules.

NOTE – You have to be familiar with HTML and CSS to use the Advanced Custom Order Form. If you don’t feel comfortable using HTML and CSS, you should find a developer who can help you, or use the standard Custom Order Form.

The following subjects are covered in this article:

New Version

In the coming weeks, ClickBank will switch to an updated version of our order form. The new version has a number of benefits:

  • Mobile responsiveness
  • Modernized appearance
  • Cart abandonment notifications

The new order form uses an updated version of the Advanced Custom Order Form (ACOF) template. If you are currently using an ACOF, it will continue to function during the migration period.

You can now submit ACOF files for approval that use the new template. The new version is displayed as New Advanced in the user interface. You can use new or old ACOFs on your live order forms, which lets you test the new order form and find a new design that works for you.

In the fall, we will remove support for the old order form. Any old ACOFs still in use will default to the new order form without any customization.

Customizable Elements

An ACOF includes many elements. Some elements are required for every ACOF, and some required or optional elements have limitations about how they can be customized.

The following elements are required on all ACOFs:

  • ClickBank terms and conditions
  • ClickBank Copyright
  • ClickBank Logo – This element can be moved or resized but not styled.
  • Affiliate Attribution information
  • Kount logo
  • McAfee, Norton, Better Business Bureau (BBB), and TRUSTe logos – This element can be moved but not resized or styled.
  • Price & recurring payment section / payment details
  • Language Dropdown
  • Currency Dropdown
  • Billing Information
  • Shipping information – This element is only required for products with a physical component.
  • Pay now button

For elements that include text, you can modify the text attributes, colors, background colors, and size, but you cannot modify the text content. For example, you can change the font or color of the Pay Now button, but you cannot change the text to "Buy Now."

The following elements are not required, but can be included and styled on an ACOF:

  • Product Title
  • Product Description
  • ClickBank Guarantee
  • Section Titles (e.g. Secure Payment Form, Order Details)
  • Header and Logo Images

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, testimonials and branding. These images cannot cover or obscure any required elements.

Implementing an Advanced Custom Order Form

The implementation process includes the following steps:

  1. Downloading and Unzipping Files
  2. Designing and Editing Your Form
  3. Uploading Content
  4. Getting ClickBank Approval
  5. Enabling the Advanced Custom Order Form

Repeat as necessary to find optimal converting order form and/or order forms supporting additional products.

Downloading and Unzipping Files

The ACOF 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.

The new Zip file 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.

The old Zip file contains:

  • 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.
    CAUTION – Do not change or add any files in this folder.

Designing and Editing Your Form

Once you have downloaded the required files, you can use them to customize your order form.

  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.
  2. Open one of the customizable CSS files in the theme directory, corresponding with the html file.
  3. Edit the file to customize your order form.
    • 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.
  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.

Uploading Content

When you have completed your customization, you must upload the image and CSS files to your account.

Uploading Custom Order Form Images

All images that are referenced in the custom CSS must be uploaded and approved in your CB account. Images that are not uploaded cannot be displayed on the order form.

NOTE – Do not upload images that appear to be fields or checkboxes that have been filled or selected. These images can confuse customers.

To upload images:

  1. Log in to your ClickBank account.
  2. Click the Settings tab.
  3. Click My Images.
  4. Click the Add New Image button.
  5. Enter the image details:
    • Name – This is used to identify the image throughout the process.
    • Alt Tag – This is used to describe the image if a user has images disabled in their browser or is using a screen reader.
    • Image Type – Select Advanced Custom Order Form Image. (gif, jpg, or png)
    • Image – This is the image itself. Click Choose File, then browse to find the image.
  6. Click Upload.
    The image is submitted to ClickBank for approval.

Uploading Custom Order Form CSS Files

Once your custom images are approved, you need to upload your custom CSS file. 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'.

  1. Log in to your ClickBank account.
  2. Click the Settings tab.
  3. Click My Order Form.
  4. Click the Add New Template button.
  5. Select the correct type:
    • Advanced – An ACOF created using the old zip file.
    • New Advanced – An ACOF created using the new zip file.
  6. Upload your CSS file.

If your CSS is valid, it will be submitted to ClickBank for approval. If there are any errors, the file won't be uploaded.

Errors when loading CSS can 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 identifers 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')

Getting ClickBank Approval

When submitted, the Order Form will be reviewed by the ClickBank business services team. Before it can be approved, we verify that it meets the following criteria:

  • The ClickBank logo is present and visible.
  • The ClickBank terms of sale are present and visible.
  • The footer elements (such as Kount Logo, copyright, affiliate attribution information) are present and visible.
  • The price and recurring payment information (if applicable) are present and visible.
  • 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'll 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 Advanced Custom Order Forms as with Basic.

Locate the cbskin parameter (cbskin=####) for the order form that you want to use. You need to include that URL parameter on all paylinks 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 you've updated your paylinks on your pitch page, customers will see your new custom order form, assuming the order form has been approved by ClickBank.

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

ACOF Zip Packages

  • New ACOF Package Standard ACOF Package including all elements on the order form including Div elements for Order Bump customization.
  • Old ACOF Package – Standard ACOF Package including all elements on the order form including Div elements for Order Bump customization.

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.

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. (ask Heather - vendors are using BBB logo; is that through us or is that them)

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.

Resources

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;
}
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk