Skip to content

Commit 7099f25

Browse files
lpssformspreeclaude
lpssformspree
and
claude
committed
Address PR review feedback from colevscode
- Add command dispatch to global API: formspree('initForm', config) - Split renderFormMessage into renderSuccess and renderFormError - Rename demo files: index-packages.html and index-cdn.html - Extract shared CSS into styles.css - Update placeholder messages to realistic copy - Keep form HTML consistent between both demos - Add Larissa Oliveira to contributors - Fix install instructions (core is a transitive dep) - Replace real form ID with YOUR_FORM_ID in CDN demo Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 291e86f commit 7099f25

File tree

17 files changed

+426
-501
lines changed

17 files changed

+426
-501
lines changed

‎README.md‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,13 @@ _Note: `@formspree/core` is a dependency of `@formspree/react`, so you don't nee
3737
Vanilla JavaScript library for declarative form handling with plain HTML forms. No framework required — use data attributes and a single `initForm()` call, or load via a script tag with the `window.formspree()` global API.
3838

3939
```sh
40-
npm install @formspree/ajax @formspree/core
40+
npm install @formspree/ajax
4141

42-
yarn add @formspree/ajax @formspree/core
42+
yarn add @formspree/ajax
4343
```
4444

45+
_Note: `@formspree/core` is a dependency of `@formspree/ajax`, so you don't need to install it separately._
46+
4547
Or via CDN (no bundler needed):
4648

4749
```html
@@ -51,7 +53,7 @@ Or via CDN (no bundler needed):
5153
function () {
5254
(formspree.q = formspree.q || []).push(arguments);
5355
};
54-
formspree({ formElement: '#my-form', formId: 'YOUR_FORM_ID' });
56+
formspree('initForm', { formElement: '#my-form', formId: 'YOUR_FORM_ID' });
5557
</script>
5658
<script src="https://unpkg.com/@formspree/ajax@1/dist/global.js" defer></script>
5759
```

‎examples/ajax-demo/public/global.html‎

Lines changed: 0 additions & 237 deletions
This file was deleted.

‎examples/ajax-demo/public/index-cdn.html‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Formspree AJAX - CDN Demo</title>
7+
<link rel="stylesheet" href="/styles.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<a href="/index-packages.html" class="back-link">&larr; Package Demo</a>
12+
13+
<h1>Contact Form <span class="badge">CDN</span></h1>
14+
<p class="subtitle">Using <code>window.formspree()</code> global API &mdash; no bundler required</p>
15+
16+
<div data-fs-success>Thanks for reaching out! We'll get back to you soon.</div>
17+
<div data-fs-error>Something went wrong. Please try again.</div>
18+
19+
<form id="contact-form">
20+
<div class="form-group">
21+
<label for="name">Name</label>
22+
<input
23+
type="text"
24+
id="name"
25+
name="name"
26+
placeholder="Your name"
27+
data-fs-field
28+
>
29+
<span data-fs-error="name"></span>
30+
</div>
31+
32+
<div class="form-group">
33+
<label for="email">Email</label>
34+
<input
35+
type="email"
36+
id="email"
37+
name="email"
38+
placeholder="your.email@example.com"
39+
data-fs-field
40+
>
41+
<span data-fs-error="email"></span>
42+
</div>
43+
44+
<div class="form-group">
45+
<label for="message">Message</label>
46+
<textarea
47+
id="message-field"
48+
name="message"
49+
placeholder="Write your message here..."
50+
data-fs-field
51+
></textarea>
52+
<span data-fs-error="message"></span>
53+
</div>
54+
55+
<button type="submit" data-fs-submit-btn>
56+
Send Message
57+
</button>
58+
</form>
59+
60+
<div class="note">
61+
<strong>How it works:</strong> Load <code>global.js</code> via a script tag.
62+
It sets up <code>window.formspree()</code>, then call it to initialize your form.
63+
No bundler needed!
64+
</div>
65+
</div>
66+
67+
<!--
68+
Production usage:
69+
70+
<script>
71+
window.formspree=window.formspree||function(){(formspree.q=formspree.q||[]).push(arguments)};
72+
formspree('initForm', { formElement: '#contact-form', formId: 'YOUR_FORM_ID' });
73+
</script>
74+
<script src="https://unpkg.com/@formspree/ajax@1/dist/global.js" defer></script>
75+
76+
In this Vite demo, global.js is loaded via a module entry that aliases to the source.
77+
-->
78+
79+
<!-- Step 1: Load the library -->
80+
<script type="module" src="/global-entry.ts"></script>
81+
82+
<!-- Step 2: Initialize the form -->
83+
<script type="module">
84+
formspree('initForm', {
85+
formElement: '#contact-form',
86+
formId: 'YOUR_FORM_ID',
87+
debug: true,
88+
});
89+
</script>
90+
</body>
91+
</html>

0 commit comments

Comments
 (0)