HTML启动器

aula-template — HTML 启动器模板

作者 formgong

AULA 是面向高端室内设计工作室的单页 HTML 网站模板，页面内容集中在单个 index.html 中，表单接入 Formgong。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图

桌面端首页1 / 2

访问演示网站在新标签页打开

桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-09查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

单页结构，全部内容集中在一个 index.html 中

固定深色导航栏，含左侧滑入菜单、about 面板、居中字标和电话

4 × 2 方形照片磁贴，悬停放大并显示短文字，Services 与 furnishing 可滚动到表单并勾选服务

五条通栏项目行，照片与文字左右交替，每个项目用 --pc 定义独立颜色

页脚请求表单含空间类型、面积、服务 chips 及姓名、电话、邮箱字段，另有可打开回拨窗口的圆形电话按钮

表单接入 Formgong，需替换 fk_your_access_key，仅在返回 success: true 时显示感谢

模板详细介绍

AULA 是一个单页网站模板，面向室内设计工作室。整站放在一个 index.html 文件里，演示中的工作室名称 AULA、地址和项目均为虚构内容。

页面结构由几部分组成：顶部固定深色导航栏，包含菜单按钮、标语、打开工作室介绍面板的 about 按钮、居中的字标、discuss a project 按钮和电话号码；菜单从左侧滑入，Projects 项展开子列表。导航下方是 4 × 2 的八张方形照片磁贴，覆盖深色遮罩，分别对应 about us、projects、services、pricing、awards、press、furnishing、contacts，悬停时照片放大、遮罩淡出并显示一行短文字，其中 Services 和 furnishing 会滚动到请求表单并勾选对应服务。再往下是五条通栏项目行，照片与文字左右交替排列，每个项目通过 --pc 变量定义自己的颜色，用于标签、详情、标题和 view 链接，view 会放大显示照片。页脚为深色请求表单，包含空间类型、面积（各单选）和服务（多选）的 chips，以及姓名、电话、邮箱和 send request 按钮。另有一个圆形电话按钮，悬停时抖动，点击打开含号码和回拨表单的小窗口。

表单需要 Formgong：在 Formgong 后台创建表单并复制 access key，替换 index.html 中所有 fk_your_access_key（共两个表单：项目请求和回拨）。每个表单会发送隐藏的 request 字段，多个勾选的服务会以多个 services 值提交。只有 Formgong 返回 success: true 时表单才显示感谢信息，否则显示错误并保留已填内容。

可编辑项包括样式顶部的 --dark（页头页脚）和 --pill（按钮）颜色变量，每个项目行在自己的 style 属性中设置 --pc；字标是 body 顶部附近的一个 SVG symbol（id="wordmark"）。如果站点不止一页，需要把磁贴和菜单链接指向自己的页面。模板中的十三张照片由 ChatGPT 图像生成（OpenAI）为该模板制作并保存为 WebP，总计约 1.8 MB，可替换为自己的项目图片，保持文件名不变。

HTML启动器

适合你的项目吗？

适用场景

为室内设计工作室搭建单页展示网站
作为需要表单收集项目咨询与回拨请求的静态站点起点
用于演示深色导航、方形照片磁贴和交替项目行的页面布局
在已有 Formgong 账号的前提下快速接入表单提交

适合人群

室内设计或相关设计工作室的展示型网站
接受单页结构、不需要多页面路由的项目
愿意使用 Formgong 处理表单提交的开发者或工作室
需要 MIT 许可下可修改、可商用代码的静态站点

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
在 Formgong 后台创建表单并复制 access key，替换 index.html 中所有 fk_your_access_key（项目请求和回拨共两个表单）
2
表单仅在 Formgong 返回 success: true 时显示感谢，否则显示错误并保留已填内容
3
颜色变量位于样式顶部：--dark 控制页头页脚，--pill 控制按钮；每个项目行在 style 属性中设置自己的 --pc
4
字标为 body 顶部附近的一个 SVG symbol（id="wordmark"）；若站点不止一页，需把磁贴和菜单链接指向自己的页面
5
模板照片由 ChatGPT 图像生成并保存为 WebP（共约 1.8 MB），可替换为自己的项目图片并保持文件名不变

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用和分发该版本代码。
分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
使用表单功能需在 Formgong 注册并获取 access key，替换 index.html 中所有 fk_your_access_key；表单提交依赖 Formgong 外部服务。
表单仅在 Formgong 返回 success: true 时显示感谢，否则显示错误并保留已填内容，行为依赖外部服务响应。
模板内十三张照片由 ChatGPT 图像生成（OpenAI）并保存为 WebP，可替换为自己的项目图片，需保持文件名不变。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

replace every `fk_your_access_key` in `index.html` of your copy with your Formgong access key (free at https://formgong.com/new) and commit
README 原文

A form shows thanks only when Formgong answers `success: true`. If the answer is anything else, it shows the error and keeps what was typed.
README 原文

The thirteen photos were generated for this template with ChatGPT image generation (OpenAI) and saved as WebP, about 1.8 MB in all. You may use them in your own site.
README 原文

https://github.com/formgong/aula-template/blob/main/LICENSE https://github.com/formgong/aula-template/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-09。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料较完整 · 80 / 100
技术栈: HTML
网站类型: 启动器

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2026-10-09
截图检查日期: 2026-10-09

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 HTML。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: [email protected] · 2026-10-10

查看当时使用的来源资料

SHA-256: 57410543f136cbe3c14e335494e0c78b6611c5402b0eb3b36c3a3f05fecbed10

2026-10-09T18:14:15.538Z

来源文件 / 仓库

# AULA: a premium interior design studio site with Formgong forms

**Live demo:** https://aula.formgong.com · Download: the [latest release](https://github.com/formgong/aula-template/releases/latest) zip.

[![Deploy to Cloudflare](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=https://github.com/formgong/aula-template) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fformgong%2Faula-template&project-name=aula&repository-name=aula)

Each button copies the site to your GitHub and publishes it. Then replace every `fk_your_access_key` in `index.html` of your copy with your Formgong access key (free at https://formgong.com/new) and commit: the host republishes on its own.

Сайт преміальної студії дизайну інтер'єру з формами Формгонг

A one-page template for an interior design studio, in a single `index.html`. The demo studio, AULA, its address and projects are fictional.

- **Header.** A dark bar that stays on top. It has a menu button, the tagline, an "about" button that opens a panel with the studio text, a centred wordmark, a "discuss a project" pill and the phone number. The menu slides in from the left, and Projects opens a sub-list.
- **Tiles.** Eight square photos in a 4 × 2 grid under a dark veil: about us, projects, services, pricing, awards, press, furnishing, contacts. On hover the photo zooms, the veil lifts and a short line of text opens. "Services" and "furnishing" scroll to the request form and tick that service.
- **Latest projects.** Five full-width rows, photo and text side by side, swapping sides on every row. Each project has its own colour (`--pc`), used for the tag, the details, the title and the "view" link. "view" opens the photo large.
- **Request form.** On the dark footer: chips for type of space and area (pick one each) and for services (pick several), name, phone and email, and a "send request" pill.
- **Call button.** A round phone button that shakes on hover. It opens a small window with the number and a call-back form.

## English

**Set up the forms**

1. Create a form in the Formgong dashboard and copy its access key.
2. In `index.html`, replace every `fk_your_access_key` with that key. There are two forms, project request and call back.
3. Each form sends a hidden `request` field. Several ticked services arrive as several `services` values.

A form shows thanks only when Formgong answers `success: true`. If the answer is anything else, it shows the error and keeps what was typed.

**Edit**

- Colours are at the top of the styles: `--dark` for the header and footer, and `--pill` for the buttons. Each project row sets its own `--pc` in its `style` attribute.
- The wordmark is one SVG `<symbol id="wordmark">` near the top of `<body>`.
- Point the tiles and menu links at your own pages if your site has more than one page.

**Images.** The thirteen photos were generated for this template with ChatGPT image generation (OpenAI) and saved as WebP, about 1.8 MB in all. You may use them in your own site. Replace them with your own projects, keeping the file names.

## Українська

Односторінковий шаблон для студії дизайну інтер'єру. Студія AULA, адреса й проєкти вигадані.

На сторінці:

- темна шапка з бічним меню і панеллю «про нас»;
- вісім квадратних плиток із фото: під курсором фото збільшується, темна вуаль зникає і з'являється короткий текст;
- п'ять проєктів рядами, кожен зі своїм кольором, фото відкривається великим;
- форма запиту з чипами (тип приміщення, площа, послуги);
- кругла кнопка дзвінка з віконцем зворотного дзвінка.

**Налаштування.** Створіть форму в кабінеті Formgong і замініть усі `fk_your_access_key` у `index.html` на свій ключ (форм дві). Подяка з'являється лише тоді, коли Formgong відповідає `success: true`.

**Зображення:** тринадцять фото згенеровано для цього шаблону в ChatGPT (OpenAI) і збережено у WebP, разом близько 1,8 МБ. Їх можна використовувати на своєму сайті.

MIT license.

反馈内容错误