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:

Customizable Elements

As the internet retailer for your products, ClickBank has internal business rules and payment processing requirements that limit customization on some form elements. These can be styled, but elements that must be included on every order form are:

  • ClickBank terms and conditions
  • ClickBank Copyright
  • Affiliate Attribution information
  • Kount logo

In addition to the standard elements that you see on the order form (e.g. billing information, product summary, etc.), we include 12 custom containers where you can upload your own images. These can be used for custom banners, background images, testimonials and branding.

Some images can be moved but not styled:

  • The ClickBank logo must appear somewhere on the form, visible to the customer. You can choose from several different sizes that are included in the html file within the ACOF package.
  • Security logos must appear on the form. These images are sourced externally and are available in a single size only. Placement can be modified, but the logos must appear visible to the customer.

Customization includes fonts, colors, background colors and size. Keep in mind that you won't be able to change any text. For example you can change the color, size, and styling of the Pay Now button, but can't change the text to "Buy Now".  

Summary of Elements that can be customized:

  • Header and Logo images
  • Titles (e.g. Secure Payment Form, Order Details)
  • Product Image
  • Product Title
  • Product Description
  • Language and Currency Dropdowns
  • ClickBank Guarantee
  • Billing Information
  • Shipping Information
  • Pay Now Button

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 Resources 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 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-bo 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 the default-template.html file and uncomment the link to the customizable CSS file.
  2. Open the customizable CSS file under c/vendor_name/custom.css
  3. Edit the file to customize your order form.
  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 contains 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.

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.
    • 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. Choose "Advanced" as the Type.
  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 20kb 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

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 the elements that are present and 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.

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

Files

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

CSS Editing Tips

Change the Form Background Color

Change the blue text in the CSS (#fff) to edit the default form background color.

.main_form_container{ 
background-color: #fff;
padding-top: 5px;
box-shadow; 0px 3px 10px #888;
}

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.

.main_form_container{
background-color: #fff;
padding-top: 5px;
box-shadow: 0px 3px 10px #888;
}

Add a Border Around the Form

Add the underlined line to add a border.

.main_form_container{
background-color: #fff;
padding-top: 5px;
box-shadow: 0px 3px 10px #888;
border: 1px solid #000000;

Change the Default Font

Change the underlined 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

The two styles displayed here control the style of the Pay Now button.

.cb_paybutton input[type=submit] {
width: 300px;
}
.submitButton{
padding: 7px 15px;
border: 1px solid #elelel;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background:-moz-linear-gradient(top, #fff000 0%, #ffcc00 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, $ffcc00), color-stop (100%, #ff000));
background-image:-ms-linear-gradient(top, #ffcc00 0%, #fff000 100%);
filter:
progid:DXImageTransform.Microsoft.Gradient(startColorstr='#ffcc00', endColorstr='#fff000')'
cursor: pointer;
text-transform: uppercase;
color: #000000;
font-weight: bold;
font-size: 16px;
}
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk