Для воронок
Шаблони документів для воронок українською мовою
1. Товарний чек
Тип шаблону: Воронки
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Invoice</title>
</head>
<body>
<div class="container">
<table class="width100">
<tbody>
<tr>
<td class="logo-wrapper" valign="top">
<img src="https://blog.keycrm.app/keycrm/images/keycrm-logo-blue-on-white.png" style="width: 200px;" alt="">
</td>
<td valign="top">
<span style="background-color: yellow">м.Київ вул. Хрещатик, 1</span><br />
<span style="background-color: yellow">test@ukr.net</span><br />
</td>
<td valign="top">
<span style="background-color: yellow">тел.: +38(050)000-00-00</span><br />
<span style="background-color: yellow">тел.: +38(095)000-00-00</span><br />
<span style="background-color: yellow">тел.: +38(097)000-00-00</span><br />
</td>
</tr>
</tbody>
</table>
<br /><br /><br />
<table class="width100">
<tbody>
<tr>
<td valign="top" class="label" style="width:50%">
<span style="background-color: yellow">Постачальник: Company Name</span><br />
<span style="background-color: yellow">ФОП Тест А.А.</span><br />
<span style="background-color: yellow">м.Київ вул. Хрещатик, 1</span><br />
<span style="background-color: yellow">тел.: +38(050)000-00-00</span><br />
</td>
<td valign="top" class="label">
Одержувач: {{ model.contact_name }}<br />
тел.: {{ model.contact_phone }}<br />
{% if model.contact_email %}
email: {{ model.contact_email }}
{% endif %}
</td>
</tr>
</tbody>
</table>
<br />
<p class="big-text text-center" style="margin-bottom: 10px">
{% set mnths = ['','січня','лютого','березня','квітня','травня','червня','липня','серпня','вересня','жовтня','листопада','грудня'] %}
Товарний чек №{{ model.id }} від {{ model.created_at|date("j") }} {{ mnths[model.created_at|date("n")] }} {{ model.created_at|date("Y") }} р.
</p>
<table class="table-products width100 border">
<tbody>
<tr>
<th class="text-center">№</th>
<th class="name-col">Назва товару</th>
<th>Од.</th>
<th>Кількість</th>
<th>Ціна</th>
<th>Сума</th>
</tr>
{% for key, product in model.products %}
<tr>
<td class="text-center">{{key + 1}}</td>
<td style="width:50%">{{ product.name }}</td>
<td class="text-center">шт</td>
<td class="text-center">{{ product.quantity }}</td>
<td class="text-right">{{ product.price|format_currency('UAH', locale='uk') }}</td>
<td class="text-right">{{ (product.quantity * product.price)|format_currency('UAH', locale='uk') }}</td>
</tr>
{% endfor %}
</table>
<table style="width: 100%">
<tr>
<td align="right">
<table class="table-sum">
<tr>
<td><strong>Всього:</br>БЕЗ ПДВ</strong></td>
<td class="text-right" style="position: relative; top: -8px;">{{
model.products_sum|number_format(2, '.', ' ') }} грн.
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<br/><br/><br/>
<table>
<tr>
<td>
Всього найменувань: {{ model.products|length }} на суму
<strong>{{ model.products_sum|number_format(2, '.', ' ') }}</strong> грн.
</td>
</tr>
<td style="width: 50%">Дата: <span class="label underline">{{ model.created_at|date("j") }} {{ mnths[model.created_at|date("n")] }} {{ model.created_at|date("Y") }} р.</span> </td>
<td>Підпис постачальника: ____________________</td>
<td></td>
</tr>
</table>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
font-size: 16px;
line-height: 1.3;
min-width: 320px;
font-family: sans-serif;
overflow-x: hidden;
}
.container {
margin-right: auto;
margin-left: auto;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.label {
font-weight: bold;
}
.underline {
text-decoration: underline;
font-style: italic;
}
.big-text {
font-size: 18px;
}
.width100 {
width: 100%;
}
.width50 {
width: 50%;
}
table {
border-collapse:collapse;
border-spacing:0;
height: auto;
}
table td {
padding-right: 5px;
padding-left: 5px;
border: none;
}
table th {
background: #d4d4d4;
}
table.border td,
table.border th {
border: 1px solid black;
}
table.table-products {
border: solid 2px black;
}
table.table-products th {
padding: 20px 5px;
}
table.table-products td {
padding: 5px;
}
table.table-sum {
margin-top: 7px;
}
table.table-sum td {
padding: 3px 5px 3px 15px;
}
</style>
</html>2. Товарний чек №2
Тип шаблону: Воронки
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Invoice</title>
</head>
<body>
<div class="container">
<table>
<tbody>
<tr>
<td>
<img src="https://blog.keycrm.app/keycrm/images/keycrm-logo-blue-on-white.png" style="width: 180px;" alt="">
</td>
</tr>
<tr>
<td style="padding: 5px;">
<span style="background-color: yellow">Company Name</span>
</td>
</tr>
<tr>
<td style="padding: 5px;">
<span style="background-color: yellow">м.Київ вул. Хрещатик, 1</span>
</td>
</tr>
<tr>
<td style="padding: 5px;">
<span style="background-color: yellow">email: test@ukr.net</span>
</td>
</tr>
<tr>
<td style="padding: 5px;">
<span style="background-color: yellow">тел.: +38(050)000-00-00</span>
</td>
</tr>
</tbody>
</table>
<br />
<table style="padding-bottom: 10px; margin-bottom: 10px;">
<tbody>
<tr>
<td style="padding: 10px 5px;">
<strong>Покупець:</strong> {{ model.contact_name }}
{% if model.contact_phone %}
{{ model.contact_phone }}
{% endif %}
</td>
</tr>
<tr>
<td style="padding: 5px 5px 10px;">
<strong>Менеджер:</strong> {{ model.manager }}
<span style="background-color: yellow">моб/viber (095) 111-11-11</span>
</td>
</tr>
</tbody>
</table>
<br />
<p class="text-center" style="font-size: 16px; font-weight: bold; margin-bottom: 10px">
{% set mnths = ['','січня','лютого','березня','квітня','травня','червня','липня','серпня','вересня','жовтня','листопада','грудня'] %}
Накладна №{{ model.id }} від {{ model.created_at|date("j") }} {{ mnths[model.created_at|date("n")] }} {{ model.created_at|date("Y") }} р.
</p>
<table class="table-products width100 border">
<tbody>
<tr>
<th class="text-center">№</th>
<th class="name-col">Найменування</th>
<th>Кіл-сть</th>
<th>Од.</th>
<th>Ціна</th>
<th>Сума</th>
</tr>
{% for key, product in model.products %}
<tr>
<td class="text-center" style="font-size: 12px;"><strong>{{key + 1}}</strong></td>
<td style="width:50%; font-size: 12px;">{{ product.name }}</td>
<td class="text-center" style="font-size: 12px;">{{ product.quantity }}</td>
<td class="text-center" style="font-size: 12px;">{{ product.unit_type }}</td>
<td class="text-right" style="font-size: 12px;">{{ product.price|format_currency('UAH', locale='uk') }}</td>
<td class="text-right" style="font-size: 12px;">{{ (product.quantity * product.price)|format_currency('UAH', locale='uk') }}</td>
</tr>
{% endfor %}
</table>
<table style="width: 100%">
<tr>
<td align="right">
<table class="table-sum">
<tr>
<td><strong>Всього:</br>БЕЗ ПДВ</strong></td>
<td class="text-right" style="position: relative; top: -8px;">{{
model.products_sum|format_currency('UAH', locale='uk') }}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<br/><br/><br/>
<table>
<tr>
<td>
<strong>Всього найменувань {{ model.products|length }}, на суму {{
model.products_sum|format_currency('UAH', locale='uk') }}</strong>
</td>
</tr>
</table>
<br/>
<table>
<tr>
<td>
<p>
{% set gtc = model.products_sum|round(0, 'floor') %}
{% set gtr = model.products_sum * 100 % 100 %}
<strong>{{ ((gtc|format_number(style="spellout", locale="uk"))|capitalize) }}
{% set currencySuffix = (gtc % 100 >= 11 and gtc % 100 <= 14) ? 'гривень' : (gtc % 10 == 1) ?
'гривня' : (gtc % 10 >= 2 and gtc % 10 <= 4) ? 'гривні' : 'гривень' %}
{{ currencySuffix }}
{{ gtr|format_number(locale="uk") }}
{% set centsSuffix = (gtr % 100 >= 11 and gtr % 100 <= 14) ? 'копійок' : (gtr % 10 == 1) ?
'копійка' : (gtr % 10 >= 2 and gtr % 10 <= 4) ? 'копійки' : 'копійок' %}
{{ centsSuffix }}</strong>
</p>
</tr>
</table>
<br />
<table class="width100" style="padding-bottom: 30px; margin-bottom: 30px;">
<tbody>
<tr style="font-size: 12px;">
<td>Продавець</td>
<td style="border-bottom: 1px solid black;"></td>
<td style="background-color: yellow">Тест Тестов Тестовенко</td>
</tr>
<tr>
<td style="padding: 5px;"></td>
<td class="text-center" style="padding: 5px;">Підпис</td>
<td style="padding: 5px;"></td>
</tr>
</tbody>
</table>
<br />
<table class="width100" style="padding-bottom: 10px; margin-bottom: 10px;">
<tr>
<td class="text-center" style="font-size: 12px;">
Дякуємо за замовлення!
</td>
</tr>
<tr>
<td class="text-center" style="font-size: 12px;">
Нам дуже важливо щоб ви були задоволені нашими виробами та сервісом
</td>
</tr>
<tr>
<td class="text-center" style="padding: 5px; font-size: 12px;">
По будь-якому запитанню ви можете написати нам в вайбер або телеграм:
</td>
</tr>
</table>
<table class="width100">
<tbody>
<tr>
<td class="text-center" style="width: 50%; font-size: 12px;">Telegram</td>
<td class="text-center" style="width: 50%; font-size: 12px;">Viber</td>
</tr>
<tr>
<td class="text-center" style="width: 50%;">
<img src="https://blog.keycrm.app/keycrm/qr/keycrm-telegram-qr.png" style="width: 150px;" alt="">
</td>
<td class="text-center" style="width: 50%; padding: 5px;">
<img src="https://blog.keycrm.app/keycrm/qr/keycrm-viber-qr.png" style="width: 150px;" alt="">
</td>
</tr>
</tbody>
</table>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
font-size: 12px;
line-height: 1.3;
min-width: 320px;
font-family: sans-serif;
overflow-x: hidden;
}
.container {
margin-right: auto;
margin-left: auto;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.label {
font-weight: bold;
}
.underline {
text-decoration: underline;
font-style: italic;
}
.big-text {
font-size: 14px;
}
.width100 {
width: 100%;
}
table {
border-collapse:collapse;
border-spacing:0;
height: auto;
}
table td {
padding-right: 5px;
padding-left: 5px;
border: none;
}
table.border td,
table.border th {
border-bottom: 1px solid black;
}
table.table-products {
/*border: solid 2px black;*/
}
table.table-products th {
padding: 5px 5px;
}
table.table-products td {
padding: 5px 5px;
}
table.table-sum {
margin-top: 7px;
}
table.table-sum td {
padding: 3px 5px 3px 15px;
}
</style>
</html>3. Рахунок на оплату
Тип шаблону: Воронки
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Invoice</title>
</head>
<body>
<div class="container">
<table style="padding-bottom: 10px; border-bottom: solid 3px black; margin-bottom: 10px;">
<tbody>
<tr>
<td style="font-size: 20px; font-weight: bold; width: 90%">
{% set mnths =
['','січня','лютого','березня','квітня','травня','червня','липня','серпня','вересня','жовтня','листопада','грудня']
%}
Рахунок на оплату № {{ model.title }} від {{ model.created_at|date("j") }} {{
mnths[model.created_at|date("n")] }} {{ model.created_at|date("Y") }} р.
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td valign="top">
<span style="text-decoration: underline">Постачальник:</span>
</td>
<td valign="top" style="padding-bottom: 7px;">
<strong style="background-color: yellow">ТОВ "Company Name"</strong>
<div style="padding-left: 15px; font-size: 90%;">
<span style="background-color: yellow">адреса м.Київ вул. Хрещатик, 1, АТ КБ "ПРИВАТБАНК" № рахунку: UA111111111111, код ЄДРПОУ 1111111. Директор Тест Тестов Тестовенко</span><br/>
</td>
</tr>
<tr>
<td valign="top">
<span style="text-decoration: underline">Покупець:</span>
</td>
<td valign="top" style="padding-bottom: 7px;">
<strong>{{ model.contact_name }}</strong>
<div style="padding-left: 15px; font-size: 90%;">
{% if model.contact_phone %}
{{ model.contact_phone }},
{% endif %}
{% if model.contact_email %}
{{ model.contact_email }}
{% endif %}
</div>
</td>
</tr>
<tr>
<tr>
<td valign="top">
<span style="text-decoration: underline">Предмет:</span>
</td>
<td valign="top" style="padding-bottom: 7px;">
<div style="padding-left: 15px; font-size: 90%;">
<span>Постачальник зобов’язується поставити і передати у власність Покупця товар, що вказаний в цьому Рахунку разом з товаросупровідною документацією, а Покупець зобов’язується прийняти і оплатити його з урахуванням цін вказаних у цьому Рахунку. </span><br/>
</td>
</tr>
<tr>
<td valign="top">
<span style="text-decoration: underline">Термін:</span>
</td>
<td valign="top" style="padding-bottom: 7px;">
<span>не пізніше 40 днів від дати здійснення попередньої оплати за товар</span>
</td>
</tr>
<tr>
<td valign="top">
<span style="text-decoration: underline">Договір:</span>
</td>
<td valign="top" style="padding-bottom: 7px;">
<span>Договору Поставки № 11-2023-11 від 28.11.2023 року</span>
</td>
</tr>
</tbody>
</table>
<br/>
<table class="table-products width100 border">
<tbody>
<tr>
<th class="text-center">№</th>
<th>Артикул</th>
<th class="name-col">Назва товару</th>
<th>Кількість</th>
<th>Ціна</th>
<th>Сума</th>
</tr>
{% for key, product in model.products %}
<tr>
<td class="text-center">{{key + 1}}</td>
<td class="text-center">{{ product.sku }}</td>
<td style="width:50%">{{ product.name }}</td>
<td class="text-center">{{ product.quantity }} {{ product.unit_type }}</td>
<td class="text-right">{{ product.price|format_currency('UAH', locale='uk') }}</td>
<td class="text-right">{{ (product.quantity * product.price)|format_currency('UAH', locale='uk') }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<table class="width100">
<tr>
<td align="right">
<table class="table-sum">
<tr>
<td><strong>ПДВ:</strong></td>
<td class="text-right">{{ (model.products_sum * 0.2)|format_currency('UAH', locale='uk') }}</td>
</tr>
<tr>
<td><strong>Разом:</strong></td>
<td class="text-right">{{ model.products_sum|format_currency('UAH', locale='uk') }}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<br/>
<table>
<tr>
<td>
<strong>Всього найменувань {{ model.products|length }}, на суму {{
model.products_sum|format_currency('UAH', locale='uk') }}</strong>
</td>
</tr>
</table>
<br/>
<table>
<tr>
<td>
<p>
{% set gtc = model.products_sum|round(0, 'floor') %}
{% set gtr = model.products_sum * 100 % 100 %}
<strong>{{ ((gtc|format_number(style="spellout", locale="uk"))|capitalize) }}
{% set currencySuffix = (gtc % 100 >= 11 and gtc % 100 <= 14) ? 'гривень' : (gtc % 10 == 1) ?
'гривня' : (gtc % 10 >= 2 and gtc % 10 <= 4) ? 'гривні' : 'гривень' %}
{{ currencySuffix }}
{{ gtr|format_number(locale="uk") }}
{% set centsSuffix = (gtr % 100 >= 11 and gtr % 100 <= 14) ? 'копійок' : (gtr % 10 == 1) ?
'копійка' : (gtr % 10 >= 2 and gtr % 10 <= 4) ? 'копійки' : 'копійок' %}
{{ centsSuffix }}</strong>
</p>
</tr>
</table>
<br/>
<table class="width100" style="border-top: solid 3px black;">
<tr>
<td valign="top" style="padding-top: 15px; padding-right: 30px;" width="50%">
<span style="font-size: 90%;"><strong>Строк дії Рахунку протягом 3 діб, з моменту надання Покуцю</strong></span>
</td>
<td valign="top"
style="padding-top: 15px; padding-right: 30px; display: flex; justify-content: space-between; border-bottom: solid 1px black;">
<strong>Виписав(ла)</strong><strong style="background-color: yellow">Тест А.А.</strong>
</td>
</tr>
</table>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
font-size: 16px;
line-height: 1.3;
min-width: 320px;
font-family: sans-serif;
overflow-x: hidden;
}
.container {
margin-right: auto;
margin-left: auto;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.label {
font-weight: bold;
}
.underline {
text-decoration: underline;
font-style: italic;
}
.big-text {
font-size: 18px;
}
.width100 {
width: 100%;
}
table {
border-collapse: collapse;
border-spacing: 0;
height: auto;
}
table td {
padding-right: 5px;
padding-left: 5px;
border: none;
}
table th {
background: #d4d4d4;
}
table.border td,
table.border th {
border: 1px solid black;
}
table.table-products {
border: solid 2px black;
}
table.table-products th {
padding: 15px 5px;
}
table.table-products td {
padding: 5px;
}
table.table-sum {
margin-top: 7px;
}
table.table-sum td {
padding: 3px 5px 3px 15px;
}
</style>
</html>4. Комерційна пропозиція
Тип шаблону: Воронки
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Invoice</title>
</head>
<body>
<div style="display: flex; flex-direction: row; justify-content: space-between">
<div style="display: flex; flex-direction: column; justify-content: center">
<img src="https://blog.keycrm.app/keycrm/images/keycrm-logo-blue-on-white.png" style="height: 100px" alt="">
</div>
<div style="display: flex; flex-direction: column; justify-content: center">
<p style="margin: 0; text-indent: 1ch; font-style: italic;">Компанія "Name"</p>
<p style="font-style: italic;">+38(050)000-00-00</p>
<p style="font-style: italic;">+38(067)000-00-00</p>
<a href="https://blog.keycrm.app/" ><strong>blog.keycrm.app</strong></a>
</div>
</div>
</br>
<p class="text-center"><strong>Спеціальна комерційна пропозиція № {{ model.id }}</strong>
<p class="text-right">{{ "now"|date("d.m.Y") }}</p>
</br>
<table class="table-products medium-text width100">
<tbody>
<tr class="border-row">
<th class="text-center">№</th>
<th>Фото</th>
<th>Найменування</th>
<th>Цiна</th>
<th>Кількість</th>
<th>Сума</th>
</tr>
{% for key, product in model.products %}
<tr class="border-row">
<td class="text-center">{{key + 1}}</td>
<td><img src="{{ product.picture }}" width="70" style="border: 0; background: lightgrey; height: 70px; margin-top: 5px;"/></td>
<td style="width:35%">{{ product.name }}</td>
<td class="text-center">{{ product.price|number_format(2, '.', ' ') }}</td>
<td class="text-center">{{ product.quantity }}</td>
<td class="text-center">{{ (product.quantity * product.price)|number_format(2, '.', ' ') }}</td>
</tr>
{% endfor %}
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="text-center" style="border: 1px solid black;">{{ model.products_sum }}</td>
</tr>
</table>
<p class="text-right" style="position: relative; top: -26px; right: 180px;">Сума (без ПДВ):</p>
<p style="margin: 0; text-indent: 1ch; color: red;">● Ціни вказані з урахуванням доставки.
</p>
<p style="margin: 0; text-indent: 1ch; color: red">● Ціна може змінюватись в залежності від курсу валюти.</p>
</br></br>
<p class="text-left"><strong>Ми пропонуємо:</strong></br>
Високий рівень якості продукції та впізнаваності бренду.</br>
Конкурентну ціну на ринку та високу маржинальність.</br>
Швидкий зворотний зв'язок. Ми знаємо цінність вашого часу, тому оперативно опрацьовуємо ваші заявки.</br>
Гнучку систему оплати та умови співпраці.</br>
Якісну маркетингову підтримку: рекламні матеріали, створення спільних маркетингових компаній.</p>
</div>
</body>
<style>
.page_break {
page-break-after:always;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
font-size: 16px;
line-height: 1.3;
min-width: 320px;
font-family: sans-serif;
overflow-x: hidden;
}
.container {
margin-right: auto;
margin-left: auto;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.label {
font-weight: bold;
}
.underline {
text-decoration: underline;
font-style: italic;
}
.big-text {
font-size: 18px;
}
.medium-text {
font-size: 14px;
}
.small-text {
font-size: 12px;
}
.width100 {
width: 100%;
}
.border-row td, .border-row th {
border: 1px solid black;
}
table {
border-collapse:collapse;
border-spacing:0;
height: auto;
}
table td {
padding-right: 5px;
padding-left: 5px;
border: none;
}
table th {
background: #C5C9E4;
}
table.border td,
table.border th {
border: 1px solid black;
}
table.table-products {
/*border: solid 2px black;*/
}
table.table-products th {
padding: 15px 5px;
}
table.table-products td {
padding: 5px;
}
table.table-payment-details td {
padding: 3px;
}
table.table-sum {
margin-top: 7px;
}
table.table-sum td {
padding: 3px 5px 3px 15px;
}
.flex-child {
padding: 15px;
}
</style>
</html>Last updated
