Lewati ke konten utama
iotools.cloudiotools.cloud

Generator Template Email HTML

API reference

Buat templat HTML email yang responsif dan aman untuk klien email (tata letak berbasis tabel dengan gaya inline) dari header, isi teks, tombol ajakan bertindak, footer, dan warna merek. Salin HTML siap kirim atau lihat pratinjaunya secara langsung.

Input

Digunakan untuk tag <title> email.

Cuplikan pratinjau tersembunyi yang ditampilkan kebanyakan kotak masuk di samping baris subjek.

Setiap baris kosong memulai paragraf baru; pemisah baris tunggal menjadi <br>.

Biarkan kosong untuk menghilangkan tombol ajakan bertindak.

Digunakan untuk teks header dan tombol.

Output

Pratinjau email Anda akan muncul di sini.

HTML email

Tata letak berbasis tabel dengan gaya inline — tempelkan ke penyedia layanan email Anda.

Apakah ini membantu?

Cara lain menggunakan alat ini

REST API

curl -X POST https://api.iotools.cloud/v1/tool/html-email-template-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "subject": "Welcome to Acme",
    "preheader": "Everything you need to get started.",
    "headerText": "Acme",
    "bodyContent": "Hi there,\n\nThanks for signing up. Your account i…",
    "buttonText": "Get Started",
    "buttonUrl": "https://example.com/start",
    "footerText": "You received this email because you signed up at…",
    "brandColor": "#464aff",
    "bgColor": "#f4f4f7"
  }'

Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.

Tanyakan ke agen AI

Use the IOTools `html-email-template-generator` tool (HTML Email Template Generator) on this input:

YOUR_INPUT_HERE

Tempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.

Widget sematan

<iframe
  src="https://iotools.cloud/embed/html-email-template-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Generator Template Email HTML — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.

Biaya per panggilan API/MCPMulai dari 5 kredit
Butuh kredit lebih?Lihat harga

Juga tersedia melalui

IntegrasiEkstensi browserEkstensi VS Code

Panduan

Buat email HTML yang responsif dan siap kirim dalam hitungan detik. Isi header, beberapa teks isi, tombol ajakan bertindak, footer, dan warna merek Anda, lalu alat ini akan menghasilkan HTML berbasis tabel yang rapi dengan gaya inline yang tampil andal di Gmail, Outlook, Apple Mail, Yahoo, dan klien lainnya — kemudian salin atau unduh sebagai file .html.

Mengapa HTML email berbeda dari HTML web

HTML yang Anda tulis untuk situs web tidak berfungsi di kotak masuk. Klien email tertinggal bertahun-tahun di belakang browser dan sangat tidak konsisten: Outlook di Windows merender pesan dengan mesin tata letak Microsoft Word, Gmail menghapus blok <style> dan stylesheet eksternal, dan hampir tidak ada yang mendukung flexbox, grid, atau posisi CSS modern. Kode yang tampak sempurna di Chrome bisa rusak berantakan di kotak masuk.

Pengembang email mengatasi hal ini dengan pendekatan kuno yang disengaja, dan generator ini mengikutinya:

  • Tata letak berbasis tabel. Struktur dibangun dari elemen <table> bersarang, bukan <div> + flexbox, karena tabel adalah satu-satunya primitif tata letak yang dipahami setiap klien.
  • Hanya gaya inline. Setiap gaya berada dalam atribut style="" langsung pada elemen. Tidak ada blok <style> yang bisa dihapus.
  • Atribut width. Kontainer utama menggunakan width="600" — lebar konten yang aman dan banyak dipakai — sebagai atribut HTML, karena Outlook tetap menghormati atribut meskipun mengabaikan CSS.
  • Kerangka dokumen yang lengkap. Pembungkus <!DOCTYPE html>, <title>, dan <div> preheader tersembunyi (baris pratinjau pendek yang ditampilkan kebanyakan kotak masuk di samping subjek) semuanya disertakan.

Cara menggunakannya

  1. Masukkan baris subjek (dipakai untuk <title>) dan preheader.
  2. Ketik teks header/logo dan isi badan. Beri satu baris kosong di antara paragraf — setiap bagian menjadi <p> sendiri; pemisah baris tunggal menjadi <br>.
  3. Tambahkan label dan URL tombol untuk ajakan bertindak Anda (kosongkan label untuk menghilangkan tombol).
  4. Pilih warna merek (teks header dan tombol) dan warna latar belakang.
  5. Lihat pratinjau langsung yang diperbarui, lalu salin HTML atau unduh email-template.html.

Semuanya berjalan di browser Anda — tidak ada yang Anda ketik yang dikirim ke server.

Bisakah saya menempelkan ini ke Mailchimp atau ESP lain?

Bisa. Keluarannya adalah HTML standar yang mandiri. Sebagian besar penyedia layanan email memiliki opsi "tempel kode Anda sendiri" atau "impor HTML" — letakkan markup yang dihasilkan di sana.

Apakah input saya aman?

Semua teks yang Anda masukkan di-escape HTML sebelum ditempatkan dalam templat, sehingga karakter seperti <, >, &, dan tanda kutip tampil sebagai teks biasa, bukan merusak markup.

Apakah berfungsi di Outlook?

Ya. Tata letak tabel, gaya inline, dan atribut width adalah teknik yang persis digunakan untuk menjaga pesan tetap utuh di perender Outlook yang berbasis Word.

emailhtmltemplatenewslettergeneratorinline-cssmarketing

Suka alat-alatnya? Hilangkan iklannya.

Satu kali pembayaran menghapus semua iklan dari akun Anda, selamanya. Tanpa langganan, tanpa pelacakan.

Hapus iklan