Waitlist · 2 designs
ベータ版アクセス

A private-beta / early-access form authored entirely in Japanese (ja-JP). The Zen design embraces "ma" — the Japanese principle of negative space as substance. The form sits on a warm off-white canvas, separated by hairlines instead of borders, with a vertical kanji column (申 — "apply") running down the right edge as the only decoration. Labels carry a tiny romaji ruby beneath them so non-Japanese readers can still parse the form. The Minimal variant strips the same fields down to three underline inputs for sidebar / footer placements. Both ship with a Mincho-flavoured serif title paired with a clean Kaku Gothic body, the canonical Japanese editorial pairing.
Open in builder
HTML · 1 file
beta-access-zen.html
<!-- SaveForm.io: beta-access (zen) -->
<style>
[data-sf-tpl="beta-access"] {
  all: revert;
  box-sizing: border-box;
  display: block;
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #18181b;
  -webkit-font-smoothing: antialiased;
}
[data-sf-tpl="beta-access"] *,
[data-sf-tpl="beta-access"] *::before,
[data-sf-tpl="beta-access"] *::after {
  box-sizing: border-box;
}
[data-sf-tpl="beta-access"] input,
[data-sf-tpl="beta-access"] textarea,
[data-sf-tpl="beta-access"] select,
[data-sf-tpl="beta-access"] button {
  font: inherit;
  color: inherit;
  margin: 0;
}
[data-sf-tpl="beta-access"] button {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
[data-sf-tpl="beta-access"] label {
  display: block;
}
[data-sf-tpl="beta-access"].sf-beta-access--zen {
  max-width: 580px;
  background: #faf9f6;
  padding: 56px 64px 48px 56px;
  position: relative;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "Inter", system-ui, sans-serif;
  color: #292524;
  display: grid;
  grid-template-columns: 1fr 24px;
  column-gap: 28px;
  overflow: hidden;
}
[data-sf-tpl="beta-access"] .sf-beta-access__column {
  min-width: 0;
}
[data-sf-tpl="beta-access"] .sf-beta-access__seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 0;
}
[data-sf-tpl="beta-access"] .sf-beta-access__seal-kanji {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", "Georgia", serif;
  font-size: 22px;
  font-weight: 500;
  color: #b91c1c;
  border: 1px solid #b91c1c;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  line-height: 1;
}
[data-sf-tpl="beta-access"] .sf-beta-access__seal-rule {
  flex: 1;
  width: 1px;
  background: #d6d3d1;
  min-height: 80px;
}
[data-sf-tpl="beta-access"] .sf-beta-access__seal-text {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 11px;
  letter-spacing: 0.5em;
  color: #78716c;
  padding: 14px 0;
  white-space: nowrap;
}
[data-sf-tpl="beta-access"] .sf-beta-access__eyebrow {
  font-size: 10px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: #a8a29e;
  margin: 0 0 28px 0;
  font-weight: 500;
}
[data-sf-tpl="beta-access"] .sf-beta-access__title {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", "Georgia", serif;
  font-size: 38px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.18;
  margin: 0 0 18px 0;
  color: #292524;
}
[data-sf-tpl="beta-access"] .sf-beta-access__title-en {
  display: block;
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #a8a29e;
  font-weight: 500;
  margin-top: 8px;
}
[data-sf-tpl="beta-access"] .sf-beta-access__lede {
  font-size: 13px;
  color: #57534e;
  line-height: 2;
  margin: 0 0 36px 0;
}
[data-sf-tpl="beta-access"] .sf-beta-access__field {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: baseline;
  gap: 18px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid #e7e5e4;
}
[data-sf-tpl="beta-access"] .sf-beta-access__field--stack {
  grid-template-columns: 1fr;
  gap: 12px;
}
[data-sf-tpl="beta-access"] .sf-beta-access__label {
  font-size: 12px;
  font-weight: 500;
  color: #44403c;
  letter-spacing: 0.04em;
}
[data-sf-tpl="beta-access"] .sf-beta-access__label-ruby {
  display: block;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #a8a29e;
  margin-top: 4px;
  font-weight: 500;
}
[data-sf-tpl="beta-access"] .sf-beta-access__input,
[data-sf-tpl="beta-access"] .sf-beta-access__textarea {
  width: 100%;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: #292524;
  outline: none;
  padding: 0;
  letter-spacing: 0.02em;
  transition: color 160ms ease;
}
[data-sf-tpl="beta-access"] .sf-beta-access__textarea {
  resize: vertical;
  min-height: 36px;
  line-height: 1.7;
}
[data-sf-tpl="beta-access"] .sf-beta-access__input::placeholder,
[data-sf-tpl="beta-access"] .sf-beta-access__textarea::placeholder {
  color: #d6d3d1;
}
[data-sf-tpl="beta-access"] .sf-beta-access__interests {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 6px;
}
[data-sf-tpl="beta-access"] .sf-beta-access__interests input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
[data-sf-tpl="beta-access"] .sf-beta-access__interests label {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid #d6d3d1;
  font-size: 12px;
  color: #57534e;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
[data-sf-tpl="beta-access"] .sf-beta-access__interests label:hover {
  border-color: #78716c;
  color: #292524;
}
[data-sf-tpl="beta-access"] .sf-beta-access__interests input:checked + label {
  border-color: #292524;
  background: #292524;
  color: #faf9f6;
}
[data-sf-tpl="beta-access"] .sf-beta-access__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}
[data-sf-tpl="beta-access"] .sf-beta-access__counter {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 11px;
  color: #a8a29e;
  letter-spacing: 0.15em;
}
[data-sf-tpl="beta-access"] .sf-beta-access__counter strong {
  color: #292524;
  font-weight: 500;
  margin: 0 2px;
}
[data-sf-tpl="beta-access"] .sf-beta-access__button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0 10px;
  background: transparent;
  color: #292524;
  font-family: inherit;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.1em;
  border: 0;
  border-bottom: 1px solid #292524;
  cursor: pointer;
  transition: gap 200ms ease, color 200ms ease;
}
[data-sf-tpl="beta-access"] .sf-beta-access__button:hover {
  gap: 18px;
  color: #b91c1c;
}
[data-sf-tpl="beta-access"] .sf-beta-access__button-arrow {
  font-size: 16px;
}
[data-sf-tpl="beta-access"] .sf-beta-access__honey {
  position: absolute;
  left: -9999px;
}
</style>
<form
  class="sf-beta-access--zen"
  data-sf-tpl="beta-access"
  action="https://saveform.io/api/submit/YOUR_FORM_ID"
  method="POST"
>
  <div class="sf-beta-access__column">
    <p class="sf-beta-access__eyebrow">先行受付</p>
    <h2 class="sf-beta-access__title">
      静かに、はじめます。
      <span class="sf-beta-access__title-en">Private Beta · 2026</span>
    </h2>
    <p class="sf-beta-access__lede">
      限定百名の招待制で、新しい道具をご紹介します。<br />
      フォームの送信から数日以内に、ご案内をお届けします。
    </p>

    <input type="text" name="_honey" class="sf-beta-access__honey" tabindex="-1" autocomplete="off" />

    <div class="sf-beta-access__field">
      <div>
        <span class="sf-beta-access__label">お名前</span>
        <span class="sf-beta-access__label-ruby">Name</span>
      </div>
      <input class="sf-beta-access__input" type="text" name="name" placeholder="山田 花子" required />
    </div>

    <div class="sf-beta-access__field">
      <div>
        <span class="sf-beta-access__label">メール</span>
        <span class="sf-beta-access__label-ruby">Email</span>
      </div>
      <input class="sf-beta-access__input" type="email" name="email" placeholder="you@example.jp" required />
    </div>

    <div class="sf-beta-access__field">
      <div>
        <span class="sf-beta-access__label">役職</span>
        <span class="sf-beta-access__label-ruby">Role</span>
      </div>
      <input class="sf-beta-access__input" type="text" name="role" placeholder="デザイナー、開発者、編集者…" />
    </div>

    <div class="sf-beta-access__field sf-beta-access__field--stack">
      <div>
        <span class="sf-beta-access__label">興味のある分野</span>
        <span class="sf-beta-access__label-ruby">Interests · choose any</span>
      </div>
      <div class="sf-beta-access__interests">
        <input type="checkbox" id="sf-beta-access-i1" name="interests" value="design" />
        <label for="sf-beta-access-i1">デザイン</label>
        <input type="checkbox" id="sf-beta-access-i2" name="interests" value="writing" />
        <label for="sf-beta-access-i2">文章</label>
        <input type="checkbox" id="sf-beta-access-i3" name="interests" value="research" />
        <label for="sf-beta-access-i3">研究</label>
        <input type="checkbox" id="sf-beta-access-i4" name="interests" value="engineering" />
        <label for="sf-beta-access-i4">開発</label>
        <input type="checkbox" id="sf-beta-access-i5" name="interests" value="craft" />
        <label for="sf-beta-access-i5">手仕事</label>
      </div>
    </div>

    <div class="sf-beta-access__field sf-beta-access__field--stack">
      <div>
        <span class="sf-beta-access__label">ひとこと（任意）</span>
        <span class="sf-beta-access__label-ruby">Optional message</span>
      </div>
      <textarea class="sf-beta-access__textarea" name="message" placeholder="どのように使ってみたいですか？"></textarea>
    </div>

    <div class="sf-beta-access__actions">
      <p class="sf-beta-access__counter">
        定員 <strong>100</strong> 名
      </p>
      <button class="sf-beta-access__button" type="submit">
        申し込む
        <span class="sf-beta-access__button-arrow" aria-hidden="true">→</span>
      </button>
    </div>
  </div>

  <aside class="sf-beta-access__seal" aria-hidden="true">
    <span class="sf-beta-access__seal-kanji">申</span>
    <span class="sf-beta-access__seal-rule"></span>
    <span class="sf-beta-access__seal-text">先行受付・限定百名</span>
    <span class="sf-beta-access__seal-rule"></span>
  </aside>
</form>
Replace YOUR_FORM_ID with the id of a form in your SaveForm dashboard. Every class is namespaced under [data-sf-tpl="beta-access"] so the template cannot collide with (or be overridden by) your site styles.
Other templates

See all