标签：#html

I maintain a small collection of single-purpose web tools. Last month I built a favicon checker: you type a URL, it reads the icon declarations in the HTML head, probes every referenced file, and also hits /favicon.ico directly, because plenty of software still requests that path without ever reading your HTML. The first thing you should do with any auditing tool is point it at your own stuff. So I did. Ten sites, all built by me, all shipped and verified in browsers I actually use. All ten failed. Not seven out of ten. Ten. Failure one: SVG-only icon sets Every site had a nice crisp favicon.svg and nothing else. Modern browsers request it, render it at any size, everything looks great in Chrome and Firefox. Then something older comes along: a bookmark sidebar, an RSS reader, a corporate proxy portal that lists your link, that one intern running Opera 12. These clients do not parse your <link> tags. They request /favicon.ico and hope. All ten sites returned a 404 for that path. The fix is not glamorous. You need an actual .ico file, ideally with 16, 32, and 48 pixel frames packed inside, plus a PNG for iOS. More on that below. Failure two: no apple-touch-icon Nine of the ten sites had no apple-touch-icon.png . When someone saves such a site to an iOS home screen, Safari does not use your favicon. It takes a screenshot of the page, letterboxes it, and calls that your app icon. If you have ever seen a bookmark that looked like a cropped text paragraph, that is why. The fix is one file and one tag: a 180 by 180 PNG, referenced with <link rel="apple-touch-icon" href="/apple-touch-icon.png"> . Done. No JavaScript, no media queries, no dark mode variants needed. iOS rounds the corners itself. Failure three: the 404 that would not leave This is the one that cost me an evening, so pay attention if any of your sites sit behind Cloudflare. I generated the missing icons, deployed them, and re-ran the checker. Still 404. I deployed again. Still 404. I started doubting my build,

GitHub热门项目 | Download videos from almost any website. Lightweight, self-hosted media downloader with a clean web UI. | Stars: 8,178 | 673 stars today | 语言: HTML

Most browsers render an HTML <hr> as a horizontal rule, but the default styling is not always what you want in a real interface. A common first attempt is to change height or color and move on. That can leave the browser's default border in place, which is why a divider may look thicker, doubled, or different from the design you expected. Here is a small, reusable pattern that makes the result predictable. Start with a stable divider class Add this HTML wherever a thematic break between sections makes sense: <hr class= "section-divider" > Then add this CSS: hr .section-divider { border : 0 ; border-top : 2px dashed #ca8a04 ; width : 60% ; max-width : 42rem ; margin : 2rem auto ; } This creates a centered, dashed divider that stays readable on both narrow and wide layouts. Why this pattern works There are four important choices in that snippet: border: 0 removes the browser's default border before you add your own style. border-top gives you one visible line to control. width and max-width keep the divider from becoming excessively long. margin: 2rem auto adds vertical breathing room and centers the element. The hr element is also semantic. It represents a thematic break in content, such as a shift from one topic to another. That makes it a better choice than a random empty div when the line actually separates ideas. Three useful variations Once the base pattern is in place, changing the appearance is straightforward. A quiet solid divider Use this when the line should support the layout without attracting attention: hr .section-divider { border : 0 ; border-top : 1px solid #cbd5e1 ; width : 100% ; margin : 1.5rem 0 ; } A dotted divider A dotted rule works well for lightweight notes, forms, or playful interfaces: hr .section-divider { border : 0 ; border-top : 2px dotted #94a3b8 ; width : 50% ; margin : 2rem auto ; } A stronger double divider For an editorial section break, use a double border with enough thickness for the two lines to remain visible: hr .section-div

Understanding when to use <ins> , <del> and <s> HTML tags Comparative Feature <ins> element <del> element <s> element Semantic Definition Represents the content that has been added to a document. Represents a range of text that has been deleted from a document. Represents content that is no longer accurate, correct, or relevant. Use Case New edits in a code, in a text, tracked changes Document edits, tracked changes, or visual/structural revisions (often paired with <ins> ). Outdated information, deprecation notices, old prices, or sold-out items. Accessible Code Pattern The meeting is on <span class="sr-only">previous date: </span><del>Monday</del> <span class="sr-only">new date: </span><ins>Wednesday</ins>. The meeting is on <span class="sr-only">previous date: </span><del>Monday</del> <span class="sr-only">new date: </span><ins>Wednesday</ins>. <span class="sr-only">Original price: </span><s>$100.00</s> Visible Representation The meeting is on Monday Wednesday The meeting is on Monday Wednesday $100.00 $34.99 Unique Attributes cite (URL pointing to the explanation of the deletion) datetime (date/time of the deletion) cite (URL pointing to the explanation of the deletion) datetime (date/time of the deletion) None Default Browser Style By default, it has an underline but it can be changed to a bold style, put a background green to show insertion, etc. Renders with a visual line-through (strikethrough) Renders with a visual line-through (strikethrough) Implicit ARIA Mapping: role="deletion" and role="insertion" The <del> and <s> tags map to the accessibility role of deletion (and <ins> to insertion ). Sighted users see these as struck through or underlined, but screen reader support for announcing these changes is inconsistent. Understanding the Accessibility Tree Mapping Under the W3C Accessibility API Mappings, these tags are programmatically mapped to specific accessibility roles that browsers expose to the OS accessibility tree: <del> maps to role="deletion" (se

When I first started learning HTML, I thought it would be the easiest part of web development. The basic tags seemed straightforward, and creating a simple page didn't take long. But as I kept learning, I realized that HTML is more than just putting elements on a page. Understanding semantic HTML , proper document structure, forms, accessibility, and knowing which element to use in different situations takes practice. For example, it can be tempting to use for almost everything, but learning when to use elements like <section>, <article> , <nav> , or <header> makes a big difference in writing meaningful markup. I'm curious about other developers' experiences: What HTML concept confused you the most when you were starting out, and what helped it finally click? I'd love to hear different perspectives, especially from people who have been working with HTML for a while.

What it is reimagine-it is a one-command agent skill that redesigns an existing HTML file into a beautiful, working artifact — using only the nouns, dates, colors, links, and numbers already in that file. No mood boards, no gold layouts with swapped labels. The output is a real page you can open. npx reimagine-it@2.4.2 -i mypage.html -o redesigned.html What's new in v2.4.2 1. Source fidelity floor raised to 80% across every token Before v2.4.2, 61 of 105 token×source cells fell below 80% fidelity — the engine preferred headings over real source anchors, so phrases like "Venator Become" or "Arcade Tee" never rendered. Now: Anchors = headings + source anchors , deduplicated — every clickable phrase survives. All 105 token×source cells ≥80% (worst token: 80%). All seven shipped examples report 100% fidelity in their auto.json reports. 2. Links and emails surface on every token A shared Source-index footer renders all content.links and emails on every generated page — not just the webpage/landing tokens. 3. All 15 design tokens in the browser extension The popup now exposes all 15 tokens: webpage, landing, dashboard, infographic, cinematic, artistic, photography, svg, 3js, simulation, glass, editorial, motion, gradient, showcase . 4. Docs can't drift anymore A new docs-drift CI job regenerates the case tables and fails the build if they diverge from ground truth. The 15 design tokens Token What it builds webpage Clean content-first page landing Conversion-focused landing dashboard KPI dashboard from facts infographic Paper-poster argument cinematic Film-poster energy artistic Expressive art direction photography Photo-led layout svg Living SVG mark 3js WebGL orbit scene simulation Interactive timeline glass Glassmorphism UI editorial Magazine layout motion Animated micro-interactions gradient Bold gradient arena showcase Product showcase Measured, not vibes 57/57 unit tests pass 15-token benchmark : all tokens hold the 100/100 usability bar 100-source stress test : 0 er

WebForms Core 2.1 is coming soon from Elanat . The new version introduces a collection of capabilities designed to further expand the server-driven approach of WebForms Core. One of these new capabilities is Morphing . Morphing provides a way to synchronize an existing DOM element with a new HTML structure without necessarily replacing the existing element itself . This makes it possible to update HTML structures while preserving the identity of existing DOM elements. Morphing Morphing is a DOM synchronization mechanism that compares an existing HTML element with a new HTML structure and applies the required changes to the existing DOM. Unlike a traditional replacement operation such as: element . outerHTML = html ; Morphing does not simply discard the existing element and create another one. Instead, it analyzes the existing element and the new element and performs the necessary operations: Add new attributes Update existing attributes Remove attributes that no longer exist Add new child elements Update existing child elements Remove obsolete child elements Match elements using id and cb-data-id Preserve existing DOM element identity whenever possible Preserve registered event listeners when new Nodes have to be created The goal is to make the smallest necessary changes to the DOM. Reflection vs Morphing WebForms Core 2.1 contains both Reflection and Morphing , but they serve different purposes. Reflection is primarily a merge operation . For example, if the target contains: <div id= "userCard" > <h3> User </h3> </div> and the source contains: <div class= "premium" > <button> VIP </button> </div> Reflection can merge the source into the target, adding the class and child without treating the source as a complete replacement definition. Morphing has a different philosophy. The source represents the desired structure . If the source does not contain an element or attribute that exists in the target, Morphing can remove it. Therefore: Reflection Target + Source ↓ Merg

A user told me the .webp files my tool produced wouldn't open on their desktop. I opened one in a hex editor. First four bytes: 89 50 4E 47 . It was a PNG. With a .webp extension. The encoder wasn't broken. I had simply never checked whether the browser actually did what I asked. The spec says it's allowed to do this Here's the code. Nothing looks wrong with it: canvas . toBlob ( blob => { download ( blob , ' output.webp ' ); }, ' image/webp ' ); The callback fires. The blob isn't null. Its size looks reasonable. Everything succeeds — except it isn't WebP. This is not a bug. The HTML spec explicitly requires it: if the user agent doesn't support the requested type, it must create the file using the PNG format instead. No exception, no warning, no second argument telling you what happened. There's exactly one place that information exists — blob.type : canvas . toBlob ( blob => { console . log ( blob . type ); // iOS below 16.4: "image/png" }, ' image/webp ' ); toDataURL does the same thing, but at least there the fallback is visible to the naked eye, since the data URL literally starts with data:image/png;base64, . There is no capability query for this My first instinct was to special-case iOS. That falls apart quickly. Every browser on iOS is WebKit underneath, so "is this Safari" isn't a meaningful question. Embedded webviews inside apps track the system version in ways that don't always match the standalone browser. And a user can flip on "Request Desktop Website" and hand you a macOS user agent from an iPhone. More fundamentally: the user agent string answers "who are you" , and I need to know "can you encode WebP right now" . Between those two questions sit the engine version, OS version, host app, and build flags. Any mismatch in that chain and your lookup table lies to you. So I went looking for an official capability API. Media has them: MediaRecorder . isTypeSupported ( ' video/webm;codecs=vp9 ' ); // → boolean await navigator . mediaCapabilities . encoding

A game can be mechanically correct and still feel flat. The button works. The enemy loses health. The coin counter increases. The level completes. Everything technically functions, but the player's actions do not seem to have much weight. Particle effects are one of the cheapest ways to fix that. Not because every screen needs fireworks, but because particles give actions a visible consequence. Feedback Should Happen Immediately Imagine tapping an enemy in a mobile game. Version A: tap enemy HP decreases Version B: tap small flash impact particles enemy reacts HP decreases The underlying mechanic is almost identical. The second version communicates the result more clearly. The player sees exactly where the hit happened. That matters on mobile screens where fingers frequently cover part of the action. Particles Can Explain the Game VFX is not only decoration. It can communicate state. Damage Particles show where an impact happened. Healing A slow upward effect can visually separate healing from damage. Selection A subtle glow or ring can show which object is active. Currency Particles moving toward a counter connect the collected object with the UI value that changed. Cooldowns A burst or dissolve can show that an ability has become available. Danger Smoke, sparks, or unstable energy can communicate that an object is close to breaking. Good VFX helps the player understand the game without another label or tutorial popup. Timing Matters More Than Particle Count A common mistake is assuming better effects need more particles. They usually need better timing. Consider a button press. You could emit 100 particles over two seconds. Or you could emit 12 particles exactly when the interaction occurs. The second effect will often feel better because it reinforces the player's action. For responsive games, the sequence might look like this: 0 ms input 0 ms visual response begins 20 ms burst expands 80 ms largest particles appear 200 ms effect begins disappearing 350 ms effect

A browser preview can look correct while the downloaded image is wrong. The usual failure is timing: CSS eventually applies the custom font to the preview, but Canvas draws once. If the font is not ready at that exact moment, fillText() can silently use a fallback face. The user sees one design and downloads another. I ran into this while building GraffForge, a browser-based graffiti text tool. The free editor compares the same user-entered word across multiple bundled styles, then exports the selected result as a transparent 2048 × 2048 PNG. That gave the export path a clear contract: preserve the exact text; use the selected font; keep spacing, outline, shadow, and skew; fit inside a safe area; preserve real transparency; never upload the user's text or image. Here is the approach that made the output deterministic. 1. Treat export as a separate rendering target Do not enlarge the preview DOM and take a screenshot. Create a fresh Canvas with explicit bitmap dimensions: const EXPORT_SIZE = 2048 ; const canvas = document . createElement ( ' canvas ' ); canvas . width = EXPORT_SIZE ; canvas . height = EXPORT_SIZE ; const context = canvas . getContext ( ' 2d ' ); if ( ! context ) { throw new Error ( ' Canvas rendering is unavailable. ' ); } The width and height attributes define the actual PNG pixel dimensions. CSS sizing and devicePixelRatio are useful for an on-screen preview, but neither should determine the export contract. A fixed bitmap size also makes automated verification straightforward. 2. Load the font before measuring anything Canvas does not redraw automatically when a font finishes loading. Load the exact family, weight, size, and text before calling measureText() : await document . fonts . load ( `400 160px " ${ fontFamily } "` , text ); Passing the actual text is useful because the browser can confirm that the required glyphs are available. After this point, set the Canvas font explicitly: context . font = `400 ${ fontSize } px " ${ fontFamily } "` ;

🌀 MOKSHA Devlog — August 15, 2026 Overview Today's session focused on implementing and refining the Shareera Gatee (body-motion) mechanic as a companion to Samaya Gatee (time-flow). Major work included UI/UX polish, physics integration, and karmic carry-over mechanics for praarabdha (accumulated karma from past lives). Commits & Changes 1. UI: Added HUD Element for Shareera Gati Commit: 8874bcc | 06:33 UTC Scope: HTML/JS refactoring of HUD elements Changes: Added new shareera-gatee HUD indicator (cyan, #67e8f9 ) Renamed ui-gatee → samaya-gatee for clarity Updated engine state tracking: _oldStats and _uiScales now include both samayaGatee and shareeraGatee _uiGlows state expanded for dual-gatee animations Files Modified: index.html — HUD markup src/engine.js — State initialization src/main.js — UI element references src/state.js — Animation loop updates Status: ✅ Foundational UI structure ready 2. UI:UX: Implemented Shareera Gatee Commit: 387e488 | 09:30 UTC Scope: Physics integration + dynamic speed modulation Changes: Karma-speed coupling: Punya/Paapa/Praarabdha now reduce player movement speed Base speed modifier: _sMod = 0.7^ashuvhaKarma × 0.8^shuvhaKarma × 0.7^praarabdha Body-motion indicators: 🐌 = slowed (< 100%) 🚶 = normal (100%) 🏃 = accelerated (> 100%) Samaya Gatee now represents relative time flow: Inverted modifier: karmaSpeedMul = (1/0.7)^ashuvhaKarma × (1/0.8)^shuvhaKarma Time accelerates under karma-debt, slows under merit Dynamic emojis: 🧊 (slow) / ⌛ (normal) / ⚡ (fast) Praarabdha snapshot on death: Speed multiplier carries forward to next rebirth Stored in _praarabdhaSpeedMul for persistent karma-weight Game Feel: Karma now directly affects both movement speed and time progression , creating dual gameplay feedback Files Modified: src/engine.js — Physics + HUD animation src/karma.js ��� Rebirth speed carry-over index.html — Icon symbols Status: ✅ Core mechanic implemented 3. praarabdha: No Reset of Samaya Gatee on Punarjanma Commit: 4305106 | 10:25 UTC

A static site has no backend. That is the point of one — and it is also why the contact form is the first thing that breaks. The usual answers are a third-party form service with its own signup, a serverless function you now maintain, or a mailto: link nobody clicks. There is a third option that falls out of how static hosting already works: the host is in the path of every HTML response it serves. It can collect the form itself. On harvis.dev that is one attribute: <form harvis-form= "contact" > <input name= "email" type= "email" required > <textarea name= "message" ></textarea> <button> Send </button> </form> Deploy, and submissions show up in the dashboard. No script tag, no API key in the page, no fetch() , no JavaScript at all — the form works with JS disabled, because it is a plain HTML form doing what plain HTML forms have always done. The page I am describing is live at harvis-forms-example.harvis.dev — submit the form and see where you land. Everything below is what makes that page work. What actually happens The rewrite happens on the way out, while the HTML is being served: action and method are replaced with /__harvis/form/contact on your site's own subdomain. Same origin, so there is no CORS, no preflight, and nothing in the page has to know a project id. A honeypot field is inserted. It is positioned off-screen rather than display: none , because a bot that skips hidden inputs is a bot that would otherwise get through. Anything that fills it in gets the success page and is stored nowhere — a bot that can tell it was caught is a bot that tries again differently. data-harvis-redirect="/thanks.html" becomes a hidden field, since the handler never sees your HTML — only what the browser posts. It is re-validated on arrival, and a protocol-relative //somewhere-else is refused. The reply is a 303 , so the browser follows it with a GET and a refresh on the thank-you page cannot post the form twice. The form name is part of a URL and a dashboard heading, so it

GitHub热门项目 | 29 editorial diagram types for Claude Code. Self-contained HTML + SVG. No shadows, no Mermaid-slop. | Stars: 6,003 | 1,612 stars today | 语言: HTML

There's a lot of nuance to the <dialog> element, a seemingly little piece of web architecture. I've got some notes from digging into it. Using and Styling the Dialog Element originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.

What are Semantic Tags? When we create a webpage, we don't just want it to look good. We also want the browser and other developers to understand what each part of the page is. This is where semantic tags help us. The word semantic means having meaning. These tags describe the purpose of the content instead of just creating a box like a <div> . Common Semantic Tags HTML provides different semantic tags for different parts of a webpage. <header> – Used for the top section of the webpage. <nav> – Contains navigation links like Home, About, and Contact. <main> – Holds the main content of the webpage. <section> – Groups related content together. <article> – Used for a complete piece of content like a blog or news article. <aside> – Contains extra information such as related links or advertisements. <footer> – Used for the bottom section of the webpage, usually containing copyright or contact details. Why Semantic Tags? Semantic tags make HTML code clean and easy to read. When another developer opens the code, they can quickly understand the structure of the webpage. Search engines like Google can also understand the content better, which helps with SEO. They also improve accessibility because screen readers can identify different sections of the webpage and help visually impaired users navigate the page more easily. Instead of using many <div> tags everywhere, semantic tags make the code more meaningful and easier to maintain.

Do you ever get that feeling when you’re working on a task, hit a wall with some problem, and something inside you whispers that there has to be a solution? When it seems like all is lost, like you’ve run into a fundamental limit of reality, but your refusal to accept it keeps driving you deeper into spec docs, 10-year-old GitHub threads, and articles from giants who’ve already blazed this trail and shared their findings? And then, after hours of intense brain-grinding, you add that final line of code, refresh the page, and there it is — the exact result you wanted, staring back at you from the screen? That rush of success is probably familiar to every engineer in some form or another. In those moments, I always want to share the win with my colleagues and, if it could help others, write an article about it. In this post, I’ve collected 3 such cases from our work where we came up with solutions that, as far as I know, are pretty unique and haven’t been fully documented before. I invite you to share in the joy of discovering a solution that seemed impossible! Fixed inside a Scroll Container For a warm-up, let’s take an easier task. One of my most popular CodePens is an example of a fixed block inside a scrolling container. People find it via Stack Overflow answers, so it’s an in-demand problem, so it might come in handy for you too. I’ve been working on an Angular component library called Taiga UI for many years. Everything I’ll talk about in this article comes from there, but that’s just the backstory. We won’t need Angular or any of its specifics here. We’re talking pure CSS. Our library uses a custom scrollbar. While modern browsers let you tweak its appearance a bit , for full control over behavior and visuals, we need to place our own elements inside the container to act as the scrollbar. But how do you do that when absolutely positioned elements fly to the top on scroll, and fixed-position ones are pinned to the viewport? Experienced devs will immediately think

Learning CSS can feel like magic, but it can also be incredibly frustrating. One minute your website looks perfect, and the next minute, a single line of code breaks the entire layout.If you are struggling to get your web pages to look exactly how you want, don't worry. Here are 5 of the most common CSS mistakes beginners make and exactly how you can fix them. 1. Forgetting the CSS Box Model (Adding Padding Breaks Width) The Mistake : You set a box's width to 100%, but as soon as you add padding: 20px; or a border, horizontal scrollbars appear and your layout breaks.Why it happens: By default, CSS adds padding and borders on top of the width you specified. So, 100% width + 20px padding left + 20px padding right = wider than the screen!The Fix: Always use box-sizing: border-box; at the top of your CSS file. This forces the browser to include padding and borders inside the specified width. /* Add this to the very top of your CSS file */ { box-sizing: border-box; margin: 0; padding: 0; } 2. Confusing Block vs. Inline Elements The Mistake: You try to add a vertical margin, width, or height to a or an tag, but nothing changes on the screen.Why it happens: Tags like , , and are inline elements. By default, inline elements ignore top/bottom margins, heights, and widths.The Fix: Change the element's display property to inline-block or block. /* Fix: This will now respect your width and margin settings */ a { display: inline-block; width: 150px; margin-top: 20px; } 3. Overusing Absolute Positioning (position: absolute) The Mistake: Using position: absolute; to push elements around the screen until they look "perfect" on your laptop, only to find the layout completely scrambled on a mobile screen.Why it happens: Absolute positioning takes elements out of the normal document flow. It makes your website completely rigid and unresponsive.The Fix: Stop using absolute positioning for general layouts. Instead, learn and use CSS Flexbox or CSS Grid to build flexible layouts. /* Inst

Many independent service businesses already use WhatsApp to confirm appointments. The missing piece is often a small, clear landing page that answers the obvious questions before the first message: what is offered, how much it costs, and what a visitor should do next. I built a dependency-free Spanish booking-page pattern around that handoff. The booking flow A useful booking page does not need a heavy scheduling stack to start doing its job. Its core flow can be simple: Show a small set of services with understandable prices and durations. Put a clear call to action on every relevant section. Open WhatsApp with enough context that the owner does not have to ask the same first question again. Keep the page fast and editable. The key implementation detail is generating the WhatsApp link from a service-specific message: const phone = " 56900000000 " ; document . querySelectorAll ( " .whatsapp-link " ). forEach (( link ) => { const message = link . dataset . message ; if ( message ) { link . href = `https://wa.me/ ${ phone } ?text= ${ encodeURIComponent ( message )} ` ; } }); That lets a CTA such as “Reserve a hair ritual” arrive as a message like “Hola, quiero reservar el Ritual de cabello.” It is a small interaction, but it removes friction for both the customer and the business. Design choices that help Mobile-first layout: appointment links are frequently opened from a phone. Visible prices and durations: clearer expectations usually mean better-quality enquiries. Short FAQs: rescheduling, location, and confirmation are common blockers. Semantic HTML: headings, buttons, and disclosure details work without a framework. No fake live contact details: the phone number, copy, price, and social links are clearly marked for replacement. Live demo You can inspect the working beauty-studio demo here: WhatsApp Booking Landing Kit — Interactive Demo Editable bundle I also made the complete editable source available as a paid digital kit. It now includes three standalone Spani

Most guides about Google Forms and your website answer a question you did not ask. Search for how to replace a Google Form with your own HTML and you get three kinds of answer. Embed the iframe but style the container. Use a service that hides Google's branding. Or the clever one: build your own HTML form and point it at Google's endpoint, so responses still land in your existing spreadsheet. All three keep Google Forms in the loop. If that is what you want, they work, and I will show you the third one because it is genuinely useful when you need it. But if you actually want the Google Form gone, replaced by markup you own, here is how that works and what it costs you. One-line summary: Google Forms does one thing your static site can't, accept a POST; swap that for a form endpoint and you get your markup back, at the cost of owning spam and losing free-unlimited. Why the iframe is the problem The embed is an iframe. That means: You cannot restyle it. Your fonts and colours stop at the border. It does not resize with its content, so a long form becomes a scroll area inside your page. It looks like Google on your site, because it is. You inherit its accessibility behaviour and can do nothing about it. None of that matters for an internal survey or a sports club sign-up sheet. It matters a lot on a business site, where a Google-branded iframe reads as a stopgap someone never got round to replacing. The clever workaround, and where it breaks You can POST your own HTML form straight at a Google Form's response endpoint. Open your form, inspect the page, dig the field IDs out of the markup, and build a form whose input names match: <form action= "https://docs.google.com/forms/d/e/YOUR_FORM_ID/formResponse" method= "POST" > <input name= "entry.1234567890" type= "email" required > <textarea name= "entry.9876543210" required ></textarea> <button type= "submit" > Send </button> </form> Responses land in the same spreadsheet. No new service. For a throwaway internal page, thi