How-to

Create HTML Invoice Template

In this guide, you'll learn how to create a fully functional HTML invoice template, with only basic HTML and CSS knowledge. We created this guide with simplicity in mind, so the only thing you'll need are basic web design skills. The invoice template you'll be creating consists only of HTML, CSS, and optionally image and font files. No scripting or programming knowledge is required whatsoever. You just need to include a simple JavaScript file which works out of the box and doesn't require any modifications on your side.

Note: If you don't want to bother creating a template by your own, you may consider checking our invoice template marketplace where you can find various ready-to-use HTML invoice templates. Below are listed few of them.

The HTML invoice template you'll be creating can be used in three different ways:

  • as a standalone invoice template. You may think of it as a modern replacement of the Word/Excel invoice where you can easily write, print, and save invoices to PDF. You may use this template locally on your computer, or upload it to a web server and access it online.
  • as an invoice template that can be used with the online invoicing service Invoicebus
  • as an invoice template that can be used with a third party invoicing system

No matter which way you decide to use your template, the creation procedure is the same.

Start building your first HTML invoice template

Starting from scratch can be painful and time-consuming so we highly encourage you to use our default template as a starting point. Here you can see all the placeholders that are can be used and your template should contain most of them (we highly recommend using them all). See the Placeholders reference for a list of available placeholders and their meaning.

What is placeholder? Placeholder is special markup text that will be replaced with real data contained in the invoice. E.g. Placeholder {company_name} is replaced with the name of the company like "Dino Store".
Need ready-to-use
HTML invoice templates?

Some simple rules

  • Resource paths: When you include files, for example, CSS files, in your HTML make sure the paths are relative to your working folder (not the root) so the invoice is functional when viewed directly in the browser.
    Good:
    <img src="my-logo.jpg" /> <img src="css/style.css" />
    <img src="../my-logo.jpg" /> <img src="../css/style.css" />

    Bad:
    <img src="/my-logo.jpg" /> <img src="/css/style.css" />
  • Allowed tags and attributes: For security reasons, we have to restrict some of the tags that can be included in the invoice template. So using various input and embed tags in the HTML is forbidden and such will be removed from the template upon upload. Refer to Allowed tags and Allowed attributes references for more details.
  • JavaScript: Don't include JavaScript code in your HTML file. Any HTML code containing <script> tags or onevent attributes (e.g. onclick="...") will be removed when you upload the template.
  • File types: Only HTML, CSS, image, and font files are valid file formats for the template. All other files are forbidden and will be automatically deleted upon upload. See the Allowed file types reference for more details and make sure all files are following this convention.
  • Template structure: There is no limitation on the naming, the folder structure, or the number of files in your template. The only exception is the main template file which needs to be named template.html (or template.htm).
  • HTML: To make sure the template works as expected you have to include the <html>, <head>, <title> and <body> tags. These are considered required HTML tags and every HTML invoice template should contain them, otherwise, the layout may be broken. Also, avoid using HTML elements with absolute or fixed positions, if you must, don't set the z-index more than 20.
    Example HTML:
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>My Awesome Template</title>
            ...
        </head>
        <body>
            <div id="container">
                ...
            </div>
        </body>
    </html>

    Note: If you see the HTML above you'll notice that in the <title> tag you should specify the name of the invoice template. By adding template name you can ensure better template management in Invoicebus.
  • HTML Comments: We know it is good practice to describe the code with comments, but note that we remove all HTML comments after uploading the template to Invoicebus, so be careful especially with conditional Internet Explorer comments as you shouldn't use them at all. Also never add comments as a first element in the document, see example below.
    Good:
    <!DOCTYPE html>
    <!-- This is My Awesome Template -->
    <html>
        <head> ... </head>
        <body>
            <!-- Main container with all invoice data -->
            <div id="container"> ... </div>
        </body>
    </html>

    Bad:
    <!-- This is My Awesome Template -->
    <!DOCTYPE html>
    <html>
        <head> ... </head>
        <body>
            <!-- Main container with all invoice data -->
            <div id="container"> ... </div>
        </body>
    </html>

    Note: The second example has comment at the top of the document which will cause problems during upload so if you must use it add it after the <!DOCTYPE html> element.
  • Template styling: To comply with Invoicebus the template must have a fixed width of 820px and a minimum height of 1158px (if the height exceeds 1158px the invoice Print/PDF will expand on several pages), so the proportion is preserved for the A4 format. Changing the width can lead to a broken layout when displayed on the screen. Also to ensure perfect integration with Invoicebus never override the <html> and <body> styles. Instead, we encourage you to use one main <div id="container"> element and apply all top-level styles to it.
    Recommended:
    div#container {
        font: normal 12px Arial, Helvetica, Sans-serif;
        background: white;
        padding: 20px;
    }

    Not recommended:
    html {
        font: normal 12px Arial, Helvetica, Sans-serif;
        background: white;
    }
    body {
        margin: 30px;
        padding: 10px;
    }
  • Logo image: The logo in the HTML template shouldn't be greater than 820 x 820 pixels, otherwise it can lead to unexpected behavior and broken layout. Recommended minimum for the logo is 150 x 100 pixels.
    Note: Always specify the width and the height of the logo in pixels, never set auto or inherit for the width and height of the logo image.

    Recommended:
    img.company-logo {
        width: 250px;
        height: 125px;
    }

    Not recommended:
    img.company-logo {
        width: 40%;
        height: auto;
    }
  • Uploading: All files should be compressed together in an archive file. The maximum size allowed for the archive is 2MB. For more details refer to the Allowed archive types reference.
  • Licenses: If you use copyrighted work or otherwise protected intellectual property in your template (like fonts, HTML templates, images, etc.), make sure you always include their licenses in a file named LICENSES (without extension) in the final template archive file. This LICENSES file should contain all appropriate licenses merged together.
Need ready-to-use
HTML invoice templates?

Special attributes

In order to be fully functional, the template must contain some special attributes:

  • For the company logo always use <img> tag (don't use CSS background) and instead of the src attribute you should include a custom attribute data-logo="{company_logo}". The image tag should look similar to this:
    <img data-logo="{company_logo}" />
  • When creating the initial invoice template with HTML you should include only one row of the items. Also, include the attribute data-iterate="item" to make sure Invoicebus understands how to replicate the item rows. The row should look similar to this:
    <tr data-iterate="item">
        <td>{item_row_number}</td>
        <td>{item_description}</td>
        <td>{item_quantity}</td>
        <td>{item_price}</td>
        <td>{item_discount}</td>
        <td>{item_tax}</td>
        <td>{item_line_total}</td>
    </tr>
    Important notes:
    • You're not bound to use <table> for the item rows but we recommend it, as it gives you a quite structured and clean code. The HTML element with the attribute data-iterate="item" must contain all the item placeholders wrapped in their own HTML element.
    • For a seamless function of the row commands (add, remove and move row) always use the {item_row_number} placeholder.
    • Although the template will be functional if you omit some of the item placeholders, we highly suggest you include all of the placeholders as the column visibility can be managed separately from the template.
    • In some cases, you'll what to use your own row numbering or don't show the row numbers at all. To do this without breaking the functionality of the template it's recommended to use negative text-indent for the row numbers column like:
      Example:
      [data-iterate="item"] td:first-child {
          text-indent: -9999px;
      }
  • Handling the tax in the total sums is similar to the items so you should include only one tax row with attribute data-iterate="tax". The tax row should look like:
    <tr data-iterate="tax">
        <th>{tax_name}</th>
        <td>{tax_value}</td>
    </tr>
  • Because the same template is used for both invoices and quotes you can use a special attribute data-hide-on-quote="true" to hide some elements from showing on the quote. For example, the amount paid and amount due are relevant only for invoices so they should be hidden on quotes. In this case, we can use something like:
    <tr data-hide-on-quote="true">
        <th>{amount_paid_label}</th>
        <td>{amount_paid}</td>
    </tr>

    <tr data-hide-on-quote="true">
        <th>{amount_due_label}</th>
        <td>{amount_due}</td>
    </tr>
Need ready-to-use
HTML invoice templates?

Custom fields

Most of the required fields for one invoice or quote is covered with the standard placeholders. But if you need some extra fields on your documents, you can also specify your own custom placeholders. There are two types of custom field placeholders you can include in your documents:

  • Document custom placeholder: This kind of placeholders are defined by placing {document_custom_[name]} in the template's HTML, where [name] is your custom name for the placeholder.
    Example: Including placeholder for the project name
    <span>{document_custom_project_name}</span>
  • Client custom placeholder: This kind of custom placeholders are similar to document custom placeholders. They are defined by placing {client_custom_[name]} in your template's HTML, where [name] is the name for the placeholder.
    Example: Including placeholder for client's shipping address
    <span>{client_custom_shipping_address}</span>

Although there is no difference in the way the document and client custom placeholders work, we strongly suggest you separate the information for the client in its own placeholders. That way when the invoice (or quote) is saved in Invoicebus the client custom fields will be always applied to that particular client.

Note: The [name] for the custom placeholders must be comprised of alpha-numeric characters including the underscore character, otherwise the custom placeholder won't work.

Good:
<span>{document_custom_reg_number2}</span>
<span>{client_custom_vat_info}</span>

Bad:
<span>{document_custom_reg number}</span> (contains whitespace)
<span>{client_custom_vat_info&num}</span> (contains the '&' special character)
Need ready-to-use
HTML invoice templates?

Best practices when creating your HTML invoice template

  • We encourage you to use HTML5 with CSS3 for your template, and always include the <!DOCTYPE html> tag at the beginning of your template. This will ensure proper rendering in different browsers.
  • Use UTF-8 charset for the template (<meta charset="utf-8">). Also, it is preferred to set the <title>, <meta name="description"> and <meta name="author"> tags.
  • For best preview in different browsers, we suggest you first reset your CSS styles and build your template on top of the reset styles. We prefer the Eric Meyer's "Reset CSS" 2.0, but you can choose from different ones at www.cssreset.com.
    Note: If you decide to use reset CSS style make sure you include that stylesheet file in the final template because Invoicebus won't handle this automatically.
  • We don't impose restrictions on the background color for your invoice templates, but you're encouraged to use a white background or lighter colors to make sure the templates are printer friendly.
  • Don't use !important, unless in extreme cases when this is absolutely necessary. Your style should work without any problems in Invoicebus as we don't override your styles, so using !important is not necessary.
    Note: If you decided to use !important note that this may lead to broken print layout so you may additionally need to tweak the @media print to fix any print layout issues.
  • It is recommended to use classes for styling the template and its sections instead of using generic element styles.
    Recommended:
    span.invoice-title {
        font-size: 20px;
        margin-top: 10px;
    }

    Not recommended:
    span {
        font-size: 20px;
        margin-top: 10px;
    }
  • Don't use style rules, element ids or data attributes that begin with ib (this is a shorthand of Invoicebus). We consider this as private namespace so using it can lead to accidental overriding of our styles, and broken layout or functionality.
    Not recommended:
    .ib-due-date { ... }
    <span data-ib-attr="..."></span>
    <span ib-attr="..."></span>
    <span id="ib_company">...</span>
  • When your template uses external resources like images or fonts it's not recommended to include them inline in the CSS as base64 encoded data URI, because this may lead to quite large CSS files. Instead, always include them with relative paths and as a rule of thumb keep the CSS files less than 50KB.
  • When using custom fonts in the HTML invoice template it's recommended to include all font formats ttf, otf, woff, woff2, eot and svg with the @font-face CSS declaration. And for proper rendering fonts in the PDF invoice always include the ttf and otf font formats.
    Note: Before using fonts in the templates always make sure you have the proper usage rights for displaying them on web and embedding in PDF.

    Tip: We highly recommend using Google Fonts in your invoice and quote templates, that way you don't have to worry about the usage license as they are already open to the public. Also with this you'll avoid managing different font formats and their cross browser compatibility, not to mention the cleaner template structure and code.
Need ready-to-use
HTML invoice templates?

Testing

The easiest way to test the functionality of your HTML invoice template is to include the HTML Invoice Generator Script in your template.html file. The script should be included before the ending of the <body> tag.

Example:
<body>
    ...
    <script src="http://cdn.invoicebus.com/generator/generator.min.js"></script>
</body>
This will render fully functional invoice and show the invoice as viewed from inside Invoicebus, so before uploading your template make sure your invoice is fully functional with the HTML Invoice Generator. If for some reason you can't use the hosted generator script you can download it here.

FAQ

  • Q: Can I use CSS preprocessors like SASS or LESS for my styles?
    A: Yes, you can use whatever you want when creating the styles for the template, but you'll have to use the compiled CSS for the end template.
  • Q: I have custom template functionality, why can't I use JavaScript?
    A: The template should be used only for displaying the invoice, so there is no need for JavaScript as including JavaScript can arise security issues.
  • Q: Why it's forbidden to use <input> or <video> tags?
    A: As previously stated the template should be used for displaying the invoice, so no input or multimedia tags should be used and such will be removed when used in Invoicebus. See the Allowed tags reference for details.
  • Q: What if I use contenteditable="true"?
    A: Those attributes will also be removed as we're using them for the HTML Invoice Generator functionality, and preserving them for future compatibility. See the Allowed attributes reference for details.
  • Q: Can I accept payments with these HTML invoices?
    A: The invoice templates don't have built-in billing support. But if you use your templates with Invoicebus you can connect your Stripe account and start accepting instant credit card payments for your invoices.
  • Q: Can you design custom HTML invoice template for me?
    A: Absolutely! We can work together with you to create a template that perfectly fits your requirements. Just give us a shout at info@invoicebus.com and we'll get back to you soon.
Need ready-to-use
HTML invoice templates?

References

Placeholders

Here is the complete placeholders list that can be used in the template grouped by invoice usage. All of them are self-explanatory but if you need more details give us a shout at support@invoicebus.com.

  • Company info
    • {company_name}
    • {company_address}
    • {company_city_zip_state}
    • {company_phone_fax}
    • {company_email_web}
  • Payment info
    • {payment_info1}
    • {payment_info2}
    • {payment_info3}
    • {payment_info4}
    • {payment_info5}
  • Invoice info
    • {issue_date_label}
    • {issue_date}
    • {net_term_label}
    • {net_term}
    • {due_date_label}
    • {due_date}
    • {currency_label}
    • {currency}
    • {po_number_label}
    • {po_number}
  • Client info
    • {bill_to_label}
    • {client_name}
    • {client_address}
    • {client_city_zip_state}
    • {client_phone_fax}
    • {client_email}
    • {client_other}
  • Invoice title and number
    • {invoice_title}
    • {invoice_number}
  • Invoice items
    • {item_row_number_label}
    • {item_description_label}
    • {item_quantity_label}
    • {item_price_label}
    • {item_discount_label}
    • {item_tax_label}
    • {item_line_total_label}
    • {item_row_number}
    • {item_description}
    • {item_quantity}
    • {item_price}
    • {item_discount}
    • {item_tax}
    • {item_line_total}
  • Invoice sums
    • {amount_subtotal_label}
    • {amount_subtotal}
    • {tax_name}
    • {tax_value}
    • {amount_total_label}
    • {amount_total}
    • {amount_paid_label}
    • {amount_paid}
    • {amount_due_label}
    • {amount_due}
  • Invoice terms
    • {terms_label}
    • {terms}
  • Custom fields (more info)
    • {document_custom_[name]}
    • {client_custom_[name]}

Allowed Archive Types

You can upload the template packed in some of the archive formats:

7z, zip, rar, tar, gz

Allowed File Types

Allowed file types that can be used for the template are:

html, htm, css, png, jpg, jpeg, gif, ttf, otf, woff, woff2, eot, svg

Allowed HTML tags

a, b, body, br, div, em, footer, h1, h2, h3, h4, h5, h6, head, header, hr, html, i, img, label, li, link, meta, ol, p, pre, section, span, strong, style, sub, sup, table, tbody, td, tfoot, th, thead, title, tr, ul

Allowed HTML attributes

cellpadding, cellspacing, charset, class, colspan, content, data-hide-on-quote, data-iterate, data-logo, dir, height, href, http-equiv, id, lang, name, rel, rowspan, src, style, title, type, width

Note: We tried to use the latest HTML standards for this list, but if you think we missed some HTML tag or attribute give your suggestion at support@invoicebus.com. We personally review every message.
Need ready-to-use
HTML invoice templates?