Skip to content

Instantly share code, notes, and snippets.

@neisdev

neisdev/customs-form.markdown

Created January 7, 2022 09:24
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save neisdev/d9e885713f6484252e2cb3526016f3df to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save neisdev/d9e885713f6484252e2cb3526016f3df to your computer and use it in GitHub Desktop.
Download ZIP
Customs form
Raw
customs-form.markdown

Customs form

HTML layout for the automatic generation of a proforma invoice for the shipment of goods to a third country. The process automatically generates a PDF from a Woocommerce order using PDFMonkey via Zapier and then puts the PDF in a dropbox folder.

A Pen by Torsten Linnecke on CodePen.

License.

Raw
index.html
<div class="text-sm">
<!-- 1. CUSTOMS INVOICE -->
<div class="border p-3">
<h2 class="mb-3"><span class="font-black">1. Customs invoice</span> - Wählen Sie den Anlass des Versands</h2>
<div class="grid grid-cols-3 grid-flow-col mb-3">
<label class="col-span-1 text-right">
<div class="flex">
<p class="w-11/12">commercial</p>
<input class="w-1/12" checked type="checkbox">
</div>
<p class="w-11/12 text-sm">
<span class="font-bold">Verkauf</span> von Waren
</p>
</label>
<div class="col-span-2">
<p class="font-bold">Invoice number of the sale</p>
<p class="text-sm mb-1">Rechnungsnummer</p>
<input class="appearance-none border border-gray-900 w-6/12 py-1 px-1 leading-tight" type="text" value="{{number}}">
</div>
</div>
<div class="grid grid-cols-3 grid-flow-col mb-3">
<label class="col-span-1 text-right">
<div class="flex">
<p class="w-11/12">non-commercial</p>
<input class="w-1/12" type="checkbox">
</div>
<p class="w-11/12 text-sm">
<span class="font-bold">kein Verkauf</span> von Waren
</p>
</label>
<div class="col-span-2">
<p class="font-bold">Value for customs purpose only</p>
<p class="text-sm">Weiter unten müssen Sie den <span class="font-bold">realen Warenwert eintragen.</span></p>
<p class="text-sm mb-3">Bitte beachten Sie, dass dieser <span class="font-bold">nicht 0€ sein darf.</span></p>
</div>
</div>
</div>
<!-- END 1. CUSTOMS INVOICE -->
<div class="grid grid-cols-2 border border-t-0">
<!-- 2. SENDER INFORMATION -->
<div class="grid p-3 border-r">
<h2 class="font-black mb-3">2. Sender information <span class="font-normal">- Versender</span></h2>
<p class="font-bold">Company name <span class="text-sm font-normal">Firmenname</span></p>
<input class="appearance-none border border-gray-900 py-1 px-1 leading-tight mb-3" type="text" value="Blaumann & Meyer - Sports Technology UG">
<p class="font-bold">VAT number <span class="text-sm font-normal">Ust.-IdNr.</span></p>
<input class="appearance-none border border-gray-900 py-1 px-1 leading-tight mb-3" type="text" value="DE306496016">
<p class="font-bold">Full name <span class="text-sm font-normal">Vor- und Nachname</span></p>
<input class="appearance-none border border-gray-900 py-1 px-1 leading-tight mb-3" type="text" value="Torsten Linnecke">
<p class="font-bold">Full address <span class="text-sm font-normal">Straße, Hausnummer</span></p>
<input class="appearance-none border border-gray-900 py-1 px-1 leading-tight mb-3" type="text" value="Lorenzweg 43">
<div class="grid grid-cols-2">
<div>
<p class="font-bold mb-1">Postal code <span class="text-sm font-normal">PLZ</span></p>
<input class="w-11/12 appearance-none border border-gray-900 py-1 px-1 leading-tight mb-3" type="text" value="39124">
</div>
<div>
<p class="font-bold mb-1">City <span class="text-sm font-normal">Stadt</span></p>
<input class="w-full appearance-none border border-gray-900 py-1 px-1 leading-tight mb-3" type="text" value="Magdeburg">
</div>
<div>
<p class="font-bold mb-1">Country <span class="text-sm font-normal">Land</span></p>
<input class="w-11/12 appearance-none border border-gray-900 py-1 px-1 leading-tight" type="text" value="Germany">
</div>
<div>
<p class="font-bold mb-1">Phone <span class="text-sm font-normal">Rufnummer</span></p>
<input class="w-full appearance-none border border-gray-900 py-1 px-1 leading-tight" type="text" value="+123456789">
</div>
</div>
</div>
<!-- END 2. SENDER INFORMATION -->
<!-- 3. RECEIVER INFORMATION -->
<div class="grid p-3">
<h2 class="font-black mb-3">3. Receiver information <span class="font-normal">- Empfänger </span></h2>
<div class="grid grid-cols-3 grid-flow-col mb-3">
<label class="col-span-1 text-right">
<div class="flex">
<p class="w-10/12">privat person</p>
<input class="w-2/12" type="checkbox">
</div>
<p class="w-10/12 text-sm">
Privatperson
</p>
</label>
<div class="col-span-2">
<p class="font-bold mb-1">National ID <span class="text-sm font-normal">Ausweisnummer</span></p>
<input class="appearance-none border border-gray-900 w-full py-1 px-1 leading-tight" type="text" value="">
</div>
</div>
<div class="grid grid-cols-3 grid-flow-col mb-3">
<label class="col-span-1 text-right">
<div class="flex">
<p class="w-10/12">company</p>
<input class="w-2/12" type="checkbox">
</div>
<p class="w-10/12 text-sm">
Unternehmen
</p>
</label>
<div class="col-span-2">
<p class="font-bold mb-1">Company name <span class="text-sm font-normal">Firmenname</span></p>
<input class="appearance-none border border-gray-900 w-full py-1 px-1 leading-tight mb-3" type="text" value="{{company}}">
<p class="font-bold mb-1">VAT number <span class="text-sm font-normal">USt-IdNr.</span></p>
<input class="appearance-none border border-gray-900 w-full py-1 px-1 leading-tight" type="text" value="">
</div>
</div>
<p class="font-bold mb-1">Full name <span class="text-sm font-normal">Vor- und Nachname</span></p>
<input class="appearance-none border border-gray-900 py-1 px-1 leading-tight mb-3" type="text" value="{{shipping.first_name}} {{shipping.last_name}}">
<p class="font-bold mb-1">Full address <span class="text-sm font-normal">Straße, Hausnummer</span></p>
<input class="appearance-none border border-gray-900 py-1 px-1 leading-tight mb-3" type="text" value="{{shipping.address_1}} {{shipping.address_2}}">
<div class="grid grid-cols-2">
<div>
<p class="font-bold mb-1">Postal code <span class="text-sm font-normal">PLZ</span></p>
<input class="w-11/12 appearance-none border border-gray-900 py-1 px-1 leading-tight mb-3" type="text" value="{{shipping.postalcode}}">
</div>
<div>
<p class="font-bold mb-1">City <span class="text-sm font-normal">Stadt</span></p>
<input class="w-full appearance-none border border-gray-900 py-1 px-1 leading-tight mb-3" type="text" value="{{shipping.city}}">
</div>
<div>
<p class="font-bold mb-1">Country <span class="text-sm font-normal">Land</span></p>
<input class="w-11/12 appearance-none border border-gray-900 py-1 px-1 leading-tight" type="text" value="{{shipping.country}}">
</div>
<div>
<p class="font-bold mb-1">Phone <span class="text-sm font-normal">Rufnummer</span></p>
<input class="w-full appearance-none border border-gray-900 py-1 px-1 leading-tight" type="text" value="{{shipping.phone}}">
</div>
</div>
</div>
<!-- END 3. RECEIVER INFORMATION -->
</div>
<!-- 4. INVENTORY OF CONTENTS -->
<div class="border border-t-0 p-3 mb-48">
<h2 class="mb-3"><span class="font-black">4. Inventory of contents</span> - Inventarliste der Ware</h2>
<div class="flex flex-wrap overflow-hidden numeric-tabular">
<div class="w-5/12 overflow-hidden border-t border-l p-1 bg-gray-100">
<p class="text-sm"><span class="font-black">Detailed description in English (incl material, brand, size, etc)</span> - Detaillierte Beschreibung der einzelnen Waren in Englisch (Material, Marke, usw)</p>
</div>
<div class="w-2/12 overflow-hidden border-t border-l p-1 bg-gray-100">
<p class="text-sm"><span class="font-black">Tariff number</span> Zolltarifnummer</p>
</div>
<div class="w-2/12 overflow-hidden border-t border-l p-1 bg-gray-100">
<p class="text-sm"><span class="font-black">Country of origin</span> Herkunftsland</p>
</div>
<div class="w-1/12 overflow-hidden border-t border-l p-1 bg-gray-100">
<p class="text-sm"><span class="font-black">№ Items</span> Anzahl</p>
</div>
<div class="w-1/12 overflow-hidden border-t border-l p-1 bg-gray-100">
<p class="text-sm"><span class="font-black">Item value</span> Warenwert einzeln</p>
</div>
<div class="w-1/12 overflow-hidden border-t border-l border-r p-1 bg-gray-100">
<p class="text-sm"><span class="font-black">Subtotal</span> Warenwert gesamt</p>
</div>
{% for product in lineItems %}
<div class="w-5/12 overflow-hidden border-t border-l p-1">
<p>{{product.name}}</p>
</div>
<div class="w-2/12 overflow-hidden border-t border-l p-1">
<p></p>
</div>
<div class="w-2/12 overflow-hidden border-t border-l p-1">
<p>Germany</p>
</div>
<div class="w-1/12 overflow-hidden border-t border-l p-1">
<p>{{product.quantity}}</p>
</div>
<div class="w-1/12 overflow-hidden border-t border-l p-1">
<p>{{product.subtotal | round}}{{currency}}</p>
</div>
<div class="w-1/12 overflow-hidden border-t border-l border-r p-1">
<p>{{product.total | round}}{{currency}}</p>
</div>
{% endfor %}
<div class="w-5/12 overflow-hidden border-t border-l border-b p-1">
<p>Shipping</p>
</div>
<div class="w-2/12 overflow-hidden border-t border-l border-b p-1">
</div>
<div class="w-2/12 overflow-hidden border-t border-l border-b p-1">
</div>
<div class="w-1/12 overflow-hidden border-t border-l border-b p-1">
<p>1</p>
</div>
<div class="w-1/12 overflow-hidden border-t border-l border-b p-1">
<p>{{shipping_lines.[0].total | round}}{{currency}}</p>
</div>
<div class="w-1/12 overflow-hidden border-t border-l border-r border-b p-1">
<p>{{shipping_lines.[0].total | round}}{{currency}}</p>
</div>
<div class="w-10/12 overflow-hidden p-1">
<p class="text-right mr-3">Overall total:</p>
</div>
<div class="w-2/12 overflow-hidden border-b border-l border-r p-1 bg-gray-100">
<p class="text-right">{{total | round}}{{currency}}</p>
</div>
</div>
</div>
<div class="grid grid-cols-2 border mb-8">
<!-- 5. REASON FOR EXPORT -->
<div class="p-3 border-r">
<h2 class="font-black mb-3">5. Reason for export <span class="font-normal">- Grund der Ausfuhr</span></h2>
<div class="grid grid-cols-2">
<label class="col-span-1 text-right mb-3">
<div class="flex">
<p class="w-10/12 font-bold">Purchase or sale</p>
<input class="w-2/12" checked type="checkbox">
</div>
<p class="w-10/12 text-sm">
Kauf oder Verkauf
</p>
</label>
<label class="col-span-1 text-right mb-3">
<div class="flex">
<p class="w-10/12 font-bold">Return</p>
<input class="w-2/12" type="checkbox">
</div>
<p class="w-10/12 text-sm">
Retoure
</p>
</label>
<label class="col-span-1 text-right mb-3">
<div class="flex">
<p class="w-10/12 font-bold">Sample</p>
<input class="w-2/12" type="checkbox">
</div>
<p class="w-10/12 text-sm">
Muster
</p>
</label>
</div>
</div>
<!-- END 5. REASON FOR EXPORT -->
<!-- 6. SHIPMENT DETAILS -->
<div class="p-3 border-r">
<h2 class="font-black mb-3">6. Shipment details <span class="font-normal">- Details zur Sendung</span></h2>
<div class="grid grid-cols-2 mb-3">
<div>
<p class="font-bold">Number of parcels</p>
<p class="text-sm mb-1">Anzahl der Pakete</p>
<input class="appearance-none border border-gray-900 w-6/12 py-1 px-1 leading-tight" type="text" value="1">
</div>
<div>
<p class="font-bold">Total parcel(s) weight</p>
<p class="text-sm mb-1">Gesamtgewicht der Pakete</p>
<input class="appearance-none border border-gray-900 w-6/12 py-1 px-1 leading-tight" type="text" value="0.5kg">
</div>
</div>
<p class="font-black mb-3">Terms of delivery (Icoterms):<span class="font-normal"> DAP</span></p>
</div>
<!-- END 6. SHIPMENT DETAILS -->
</div>
<div class="flex">
<div class="w-1/12 overflow-hidden p-1">
</div>
<div class="w-4/12 overflow-hidden p-1">
<p class="font-black">Full name <span class="font-normal">- Vor- und Nachname</span></p>
</div>
<div class="w-2/12 overflow-hidden p-1">
</div>
<div class="w-2/12 overflow-hidden p-1">
<p class="font-black">City <span class="font-normal">- Stadt</span></p>
</div>
<div class="w-1/12 overflow-hidden p-1">
</div>
<div class="w-2/12 overflow-hidden p-1">
<p class="font-black">Date <span class="font-normal">- Datum</span></p>
</div>
</div>
<div class="flex">
<div class="w-1/12 overflow-hidden text-right p-1">
<p class="font-black">I,</p>
<p>Ich,</p>
</div>
<div class="w-4/12 overflow-hidden">
<input class="w-full appearance-none border border-black text-xl py-2 px-1 leading-tight" type="text" value="Torsten Linnecke">
</div>
<div class="w-2/12 overflow-hidden text-center p-1">
<p class="font-black">declare in</p>
<p>bestätige in</p>
</div>
<div class="w-2/12 overflow-hidden">
<input class="w-full appearance-none border border-black text-xl py-2 px-1 leading-tight" type="text" value="Magdeburg">
</div>
<div class="w-1/12 overflow-hidden text-center p-1">
<p class="font-black">on</p>
<p>am</p>
</div>
<div class="w-2/12 overflow-hidden">
<input class="w-full appearance-none border border-black text-xl py-2 px-1 leading-tight" type="text" value="{{ "now" | date: "%d.%m.%Y" }}">
</div>
</div>
<div class="flex mb-3">
<div class="w-1/12 overflow-hidden text-right p-1">
</div>
<div class="w-11/12 overflow-hidden p-1">
<p class="font-black">that the information contained in this invoice is true and correct.</p>
<p>die Richtigkeit der angeführten Informationen.</p>
</div>
</div>
<div class="flex">
<div class="w-7/12 overflow-hidden p-1">
</div>
<div class="w-5/12 overflow-hidden p-1">
<p class="font-black mb-1">Signature <span class="font-normal">- Unterschrift</span></p>
<div class="w-full h-32 border border-black block"></div>
</div>
</div>
</div>
Raw
style.css
.numeric-tabular {
font-variant-numeric: tabular-nums;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.6.1/tailwind.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment