@lub-crm/forms 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -7
- package/dist/index.html +119 -0
- package/dist/lub-forms.es.js +1927 -3082
- package/dist/lub-forms.es.js.map +1 -1
- package/dist/lub-forms.standalone.js.map +1 -1
- package/dist/lub-forms.umd.js +99 -99
- package/dist/lub-forms.umd.js.map +1 -1
- package/dist/vite.svg +1 -0
- package/package.json +10 -8
- package/src/embed.ts +4 -4
- package/src/main.tsx +1 -1
package/README.md
CHANGED
|
@@ -28,7 +28,7 @@ bun add @lub/forms
|
|
|
28
28
|
No build step required. Includes React and all dependencies:
|
|
29
29
|
|
|
30
30
|
```html
|
|
31
|
-
<script src="https://forms.lub.
|
|
31
|
+
<script src="https://forms.lub.marketing/v1/lub-forms.standalone.js"></script>
|
|
32
32
|
```
|
|
33
33
|
|
|
34
34
|
### Script Tag (UMD)
|
|
@@ -38,8 +38,8 @@ For pages that already have React loaded:
|
|
|
38
38
|
```html
|
|
39
39
|
<script src="https://unpkg.com/react@19/umd/react.production.min.js"></script>
|
|
40
40
|
<script src="https://unpkg.com/react-dom@19/umd/react-dom.production.min.js"></script>
|
|
41
|
-
<script src="https://forms.lub.
|
|
42
|
-
<link rel="stylesheet" href="https://forms.lub.
|
|
41
|
+
<script src="https://forms.lub.marketing/v1/lub-forms.umd.js"></script>
|
|
42
|
+
<link rel="stylesheet" href="https://forms.lub.marketing/v1/lub-forms.css" />
|
|
43
43
|
```
|
|
44
44
|
|
|
45
45
|
## Usage
|
|
@@ -54,7 +54,7 @@ function ContactPage() {
|
|
|
54
54
|
return (
|
|
55
55
|
<LubForm
|
|
56
56
|
formId="abc123"
|
|
57
|
-
baseUrl="https://api.lub.
|
|
57
|
+
baseUrl="https://api.lub.marketing"
|
|
58
58
|
onSuccess={(data) => {
|
|
59
59
|
console.log("Submission ID:", data.submission_id);
|
|
60
60
|
window.location.href = "/thank-you";
|
|
@@ -74,7 +74,7 @@ Forms automatically mount to elements with `data-lub-form-id`:
|
|
|
74
74
|
```html
|
|
75
75
|
<div
|
|
76
76
|
data-lub-form-id="abc123"
|
|
77
|
-
data-lub-base-url="https://api.lub.
|
|
77
|
+
data-lub-base-url="https://api.lub.marketing"
|
|
78
78
|
data-lub-class="my-custom-class"
|
|
79
79
|
data-lub-on-success="handleSuccess"
|
|
80
80
|
data-lub-on-error="handleError"
|
|
@@ -97,7 +97,7 @@ Forms automatically mount to elements with `data-lub-form-id`:
|
|
|
97
97
|
|
|
98
98
|
<script>
|
|
99
99
|
LubForms.render("abc123", "my-form", {
|
|
100
|
-
baseUrl: "https://api.lub.
|
|
100
|
+
baseUrl: "https://api.lub.marketing",
|
|
101
101
|
onSuccess: (data) => {
|
|
102
102
|
console.log("Success!", data);
|
|
103
103
|
},
|
|
@@ -237,7 +237,7 @@ Use the client directly for custom integrations:
|
|
|
237
237
|
```tsx
|
|
238
238
|
import { LubFormsClient } from "@lub/forms";
|
|
239
239
|
|
|
240
|
-
const client = new LubFormsClient("https://api.lub.
|
|
240
|
+
const client = new LubFormsClient("https://api.lub.marketing");
|
|
241
241
|
|
|
242
242
|
// Fetch form definition
|
|
243
243
|
const form = await client.getForm("abc123");
|
package/dist/index.html
ADDED
|
@@ -0,0 +1,119 @@
|
|
|
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>Lub Forms - Embeddable Forms</title>
|
|
7
|
+
<style>
|
|
8
|
+
* {
|
|
9
|
+
box-sizing: border-box;
|
|
10
|
+
margin: 0;
|
|
11
|
+
padding: 0;
|
|
12
|
+
}
|
|
13
|
+
body {
|
|
14
|
+
font-family:
|
|
15
|
+
system-ui,
|
|
16
|
+
-apple-system,
|
|
17
|
+
sans-serif;
|
|
18
|
+
background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%);
|
|
19
|
+
min-height: 100vh;
|
|
20
|
+
color: #f8fafc;
|
|
21
|
+
}
|
|
22
|
+
.container {
|
|
23
|
+
max-width: 800px;
|
|
24
|
+
margin: 0 auto;
|
|
25
|
+
padding: 60px 24px;
|
|
26
|
+
}
|
|
27
|
+
h1 {
|
|
28
|
+
font-size: 2.5rem;
|
|
29
|
+
margin-bottom: 16px;
|
|
30
|
+
}
|
|
31
|
+
.subtitle {
|
|
32
|
+
font-size: 1.25rem;
|
|
33
|
+
opacity: 0.8;
|
|
34
|
+
margin-bottom: 48px;
|
|
35
|
+
}
|
|
36
|
+
.card {
|
|
37
|
+
background: rgba(255, 255, 255, 0.1);
|
|
38
|
+
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
39
|
+
border-radius: 12px;
|
|
40
|
+
padding: 24px;
|
|
41
|
+
margin-bottom: 24px;
|
|
42
|
+
}
|
|
43
|
+
.card h2 {
|
|
44
|
+
font-size: 1.125rem;
|
|
45
|
+
margin-bottom: 16px;
|
|
46
|
+
color: #60a5fa;
|
|
47
|
+
}
|
|
48
|
+
pre {
|
|
49
|
+
background: #0f172a;
|
|
50
|
+
border-radius: 8px;
|
|
51
|
+
padding: 16px;
|
|
52
|
+
overflow-x: auto;
|
|
53
|
+
font-size: 0.875rem;
|
|
54
|
+
line-height: 1.6;
|
|
55
|
+
}
|
|
56
|
+
code {
|
|
57
|
+
font-family: "Monaco", "Menlo", monospace;
|
|
58
|
+
}
|
|
59
|
+
.highlight {
|
|
60
|
+
color: #60a5fa;
|
|
61
|
+
}
|
|
62
|
+
.string {
|
|
63
|
+
color: #34d399;
|
|
64
|
+
}
|
|
65
|
+
.comment {
|
|
66
|
+
color: #64748b;
|
|
67
|
+
}
|
|
68
|
+
a {
|
|
69
|
+
color: #60a5fa;
|
|
70
|
+
}
|
|
71
|
+
</style>
|
|
72
|
+
</head>
|
|
73
|
+
<body>
|
|
74
|
+
<div class="container">
|
|
75
|
+
<h1>Lub Forms</h1>
|
|
76
|
+
<p class="subtitle">Embeddable form library for Lub CRM</p>
|
|
77
|
+
|
|
78
|
+
<div class="card">
|
|
79
|
+
<h2>Quick Start - Standalone Script</h2>
|
|
80
|
+
<pre><code><span class="comment"><!-- Add this to your HTML --></span>
|
|
81
|
+
<span class="highlight"><script</span> src="<span class="string">https://forms.lub.marketing/lub-forms.standalone.js</span>"<span class="highlight">></script></span>
|
|
82
|
+
|
|
83
|
+
<span class="comment"><!-- Add a container with your form ID --></span>
|
|
84
|
+
<span class="highlight"><div</span>
|
|
85
|
+
data-lub-form-id="<span class="string">YOUR_FORM_ID</span>"
|
|
86
|
+
data-lub-base-url="<span class="string">https://api.lub.marketing</span>"
|
|
87
|
+
<span class="highlight">></div></span></code></pre>
|
|
88
|
+
</div>
|
|
89
|
+
|
|
90
|
+
<div class="card">
|
|
91
|
+
<h2>Manual Render with Callbacks</h2>
|
|
92
|
+
<pre><code><span class="highlight"><div</span> id="<span class="string">my-form</span>"<span class="highlight">></div></span>
|
|
93
|
+
|
|
94
|
+
<span class="highlight"><script></span>
|
|
95
|
+
LubForms.render('<span class="string">YOUR_FORM_ID</span>', '<span class="string">my-form</span>', {
|
|
96
|
+
baseUrl: '<span class="string">https://api.lub.marketing</span>',
|
|
97
|
+
onSuccess: (data) => {
|
|
98
|
+
console.log('Submitted!', data.submission_id);
|
|
99
|
+
window.location.href = '/thank-you';
|
|
100
|
+
},
|
|
101
|
+
onError: (err) => {
|
|
102
|
+
console.error('Error:', err);
|
|
103
|
+
}
|
|
104
|
+
});
|
|
105
|
+
<span class="highlight"></script></span></code></pre>
|
|
106
|
+
</div>
|
|
107
|
+
|
|
108
|
+
<div class="card">
|
|
109
|
+
<h2>Available Files</h2>
|
|
110
|
+
<pre><code><span class="comment"># Standalone (includes React)</span>
|
|
111
|
+
https://forms.lub.marketing/lub-forms.standalone.js
|
|
112
|
+
|
|
113
|
+
<span class="comment"># UMD (requires React on page)</span>
|
|
114
|
+
https://forms.lub.marketing/lub-forms.umd.js
|
|
115
|
+
https://forms.lub.marketing/lub-forms.css</code></pre>
|
|
116
|
+
</div>
|
|
117
|
+
</div>
|
|
118
|
+
</body>
|
|
119
|
+
</html>
|