fix: embed styling/validation + field settings cleanup (1.0.0-rc.2) (#68)

* fix(embed): left-align, novalidate; field settings cleanup

Embed (server-rendered):
- reset text-align:left so the form doesn't inherit the host page's centering
- set form.noValidate so the plugin's own validation + server errors render
  (custom/required messages) instead of the browser's native bubble

Field settings panel:
- Required lives only on the Validation tab now (removed the duplicate General
  toggle); its custom error message is stored as a required validation rule
- Placeholder shown only where it applies (text-like + textarea); relabeled to
  'Empty option text' for select; hidden for checkbox/radio/checkbox-group/date/time
- Validation rules limited per type (email/url/number auto-validate by type, so
  those rules aren't re-offered); the Rules block hides entirely for
  select/radio/checkbox/date where only Required applies

* chore: release 1.0.0-rc.2

Author: devCluna

CHANGELOG.md

@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [1.0.0-rc.2] - 2026-07-02
+
+### Fixed
+- Embed: reset `text-align` so the form no longer inherits the host page's centering.
+- Embed: set the form to `novalidate` so required/validation errors render the plugin's own messages (custom or default) instead of the browser's native bubble.
+
+### Changed
+- Field settings: "Required" now lives only on the Validation tab (removed the duplicate on General) and supports a custom error message.
+- Field settings: settings are now conditional per field type — Placeholder only where it applies (relabeled "Empty option text" for select; hidden for checkbox/radio/checkbox-group/date/time); validation rules limited to those valid for the type (email/url/number auto-validate by type, so those rules aren't re-offered; the Rules block hides for choice/date fields where only Required applies).
+
+---
+
 ## [1.0.0-rc.1] - 2026-07-02
 
 ### Changed

admin/src/components/FieldSettingsPanel.tsx

@@ -8,6 +8,25 @@ interface Props {
   onChange: (updated: FormField) => void;
 }
 
+// Which settings apply to which field type (drives conditional visibility).
+const PLACEHOLDER_TYPES = ['text', 'email', 'number', 'phone', 'url', 'password', 'textarea', 'select'];
+
+const RULE_LABELS: Record<string, string> = {
+  minLength: 'Min. length', maxLength: 'Max. length',
+  min: 'Min. value', max: 'Max. value',
+  email: 'Email', url: 'URL', pattern: 'Pattern (regex)',
+};
+
+// Extra validation rules (beyond Required) that make sense for a given type.
+// email/url/number already auto-validate their format by type, so those rules
+// are only offered where you'd validate free text.
+function ruleTypesFor(type: string): string[] {
+  if (type === 'number') return ['min', 'max'];
+  if (type === 'text' || type === 'textarea') return ['minLength', 'maxLength', 'pattern', 'email', 'url'];
+  if (['email', 'url', 'phone', 'password'].includes(type)) return ['minLength', 'maxLength', 'pattern'];
+  return []; // select, radio, checkbox, checkbox-group, date, time → only Required
+}
+
 // One-time style block for input focus + placeholder (inline styles can't do :focus).
 const STYLE_ID = 'sfb-settings-style';
 function ensureStyle() {
@@ -89,19 +108,28 @@ export function FieldSettingsPanel({ field, onChange }: Props) {
     update({ options: (field.options || []).map((o, j) => (j === i ? { ...o, ...patch } : o)) });
   const removeOption = (i: number) => update({ options: (field.options || []).filter((_, j) => j !== i) });
 
+  const ruleTypes = ruleTypesFor(field.type);
   const addValidation = () => {
     const used = field.validation.map((r) => r.type);
-    const def =
-      field.type === 'number' ? (used.includes('min') ? (used.includes('max') ? 'pattern' : 'max') : 'min') :
-      field.type === 'email'  ? (used.includes('email') ? 'minLength' : 'email') :
-      field.type === 'url'    ? (used.includes('url') ? 'minLength' : 'url') :
-      used.includes('minLength') ? (used.includes('maxLength') ? 'pattern' : 'maxLength') : 'minLength';
-    update({ validation: [...field.validation, { type: def }] });
+    const next = ruleTypes.find((t) => !used.includes(t));
+    if (!next) return;
+    update({ validation: [...field.validation, { type: next }] });
   };
   const updateValidation = (i: number, patch: Partial<ValidationRule>) =>
     update({ validation: field.validation.map((v, j) => (j === i ? { ...v, ...patch } : v)) });
   const removeValidation = (i: number) => update({ validation: field.validation.filter((_, j) => j !== i) });
 
+  // "required" is a boolean flag; its custom message lives in a validation rule of type 'required'
+  const reqMsg = field.validation.find((v) => v.type === 'required')?.message || '';
+  const setRequired = (on: boolean) => {
+    const rest = field.validation.filter((v) => v.type !== 'required');
+    update({ required: on, validation: on ? field.validation : rest });
+  };
+  const setReqMsg = (msg: string) => {
+    const rest = field.validation.filter((v) => v.type !== 'required');
+    update({ validation: msg ? [...rest, { type: 'required', message: msg }] : rest });
+  };
+
   const kicker = `${typeName(field.type)} field`.toUpperCase();
 
   const tabBtn = (id: 'general' | 'validation', label: string) => (
@@ -133,7 +161,13 @@ export function FieldSettingsPanel({ field, onChange }: Props) {
           {!deco && (
             <>
               <TextField label="Name (technical)" value={field.name} onChange={(v) => update({ name: v })} mono hint="Used as the key in submissions & the API payload." />
-              <TextField label="Placeholder" value={field.placeholder || ''} onChange={(v) => update({ placeholder: v })} />
+              {PLACEHOLDER_TYPES.includes(field.type) && (
+                <TextField
+                  label={field.type === 'select' ? 'Empty option text' : 'Placeholder'}
+                  value={field.placeholder || ''}
+                  onChange={(v) => update({ placeholder: v })}
+                />
+              )}
               <TextField label="Help text" value={field.helpText || ''} onChange={(v) => update({ helpText: v })} />
             </>
           )}
@@ -154,16 +188,6 @@ export function FieldSettingsPanel({ field, onChange }: Props) {
             </Labeled>
           )}
 
-          {!deco && (
-            <>
-              <div style={{ height: 1, background: C.n150, margin: '2px 0' }} />
-              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
-                <span style={{ font: `600 13px ${FF}`, color: C.n700 }}>Required</span>
-                <Toggle on={field.required} onClick={() => update({ required: !field.required })} />
-              </div>
-            </>
-          )}
-
           {field.type !== 'divider' && (
             <Labeled label="Width">
               <Seg value={field.width} onChange={(v) => update({ width: v })} />
@@ -176,49 +200,57 @@ export function FieldSettingsPanel({ field, onChange }: Props) {
 
       {tab === 'validation' && !deco && (
         <div style={{ padding: 18, display: 'flex', flexDirection: 'column', gap: 12 }}>
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <span style={{ font: `700 11px ${FF}`, letterSpacing: '.5px', textTransform: 'uppercase', color: C.n500 }}>Rules</span>
-            <button type="button" onClick={addValidation} style={{ height: 30, padding: '0 10px', borderRadius: 4, border: `1px solid ${C.p200}`, background: C.p100, color: C.p700, font: `600 12px ${FF}`, cursor: 'pointer' }}>+ Add rule</button>
+          {/* Required — flag + custom message */}
+          <div style={{ border: `1px solid ${C.n200}`, borderRadius: 5, padding: 11, display: 'flex', flexDirection: 'column', gap: 8, background: C.n0 }}>
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+              <span style={{ font: `600 13px ${FF}`, color: C.n800 }}>Required</span>
+              <Toggle on={field.required} onClick={() => setRequired(!field.required)} />
+            </div>
+            {field.required && (
+              <input className="sfb-inp" value={reqMsg} placeholder={`${field.label || 'This field'} is required`} onChange={(e) => setReqMsg(e.target.value)} style={inpStyle} />
+            )}
           </div>
 
-          {field.validation.length === 0 && (
-            <span style={{ font: `400 12px ${FF}`, color: C.n500, lineHeight: 1.5 }}>No rules yet. Required is set on the General tab; add length, value or pattern rules here.</span>
-          )}
-
-          {field.validation.map((rule, i) => {
-            const used = field.validation.filter((_, j) => j !== i).map((r) => r.type);
-            const isNumber = field.type === 'number', isEmail = field.type === 'email', isUrl = field.type === 'url';
-            const available = [
-              !isNumber && { value: 'minLength', label: 'Min. length' },
-              !isNumber && { value: 'maxLength', label: 'Max. length' },
-              isNumber && { value: 'min', label: 'Min. value' },
-              isNumber && { value: 'max', label: 'Max. value' },
-              !isEmail && { value: 'email', label: 'Email' },
-              !isUrl && { value: 'url', label: 'URL' },
-              { value: 'pattern', label: 'Pattern (regex)' },
-            ].filter((o): o is { value: string; label: string } => !!o && (o.value === rule.type || !used.includes(o.value)));
-            const hasValue = ['minLength', 'maxLength', 'min', 'max', 'pattern'].includes(rule.type);
-            return (
-              <div key={i} style={{ border: `1px solid ${C.n200}`, borderRadius: 5, padding: 11, display: 'flex', flexDirection: 'column', gap: 8, background: C.n0 }}>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                  <select className="sfb-inp" value={rule.type} onChange={(e) => updateValidation(i, { type: e.target.value, value: undefined, message: '' })} style={{ ...inpStyle, flex: 1, cursor: 'pointer' }}>
-                    {available.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
-                  </select>
-                  <button type="button" onClick={() => removeValidation(i)} style={{ width: 28, height: 28, borderRadius: 4, border: `1px solid ${C.n200}`, color: C.n400, background: C.n0, cursor: 'pointer', flex: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                    <Trash width="14px" height="14px" fill="currentColor" />
-                  </button>
-                </div>
-                {hasValue && (
-                  <input className="sfb-inp" placeholder={rule.type === 'pattern' ? '^[a-z0-9]+$' : 'Value'} value={String(rule.value ?? '')} onChange={(e) => updateValidation(i, { value: e.target.value })} style={{ ...inpStyle, ...(rule.type === 'pattern' ? { fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 12 } : {}) }} />
-                )}
-                <input className="sfb-inp" placeholder="Custom error message (optional)" value={rule.message || ''} onChange={(e) => updateValidation(i, { message: e.target.value })} style={inpStyle} />
+          {ruleTypes.length > 0 && (
+            <>
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                <span style={{ font: `700 11px ${FF}`, letterSpacing: '.5px', textTransform: 'uppercase', color: C.n500 }}>Rules</span>
+                <button type="button" onClick={addValidation} style={{ height: 30, padding: '0 10px', borderRadius: 4, border: `1px solid ${C.p200}`, background: C.p100, color: C.p700, font: `600 12px ${FF}`, cursor: 'pointer' }}>+ Add rule</button>
               </div>
-            );
-          })}
 
-          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 7, font: `400 11px ${FF}`, color: C.n500, lineHeight: 1.5 }}>
-            <span style={{ color: C.wrn600 }}>⚠</span>Rules run on the public form and in the preview.
-          </div>
+              {field.validation.filter((v) => v.type !== 'required').length === 0 && (
+                <span style={{ font: `400 12px ${FF}`, color: C.n500, lineHeight: 1.5 }}>No extra rules yet.</span>
+              )}
+
+              {field.validation.map((rule, i) => {
+                if (rule.type === 'required') return null;
+                const used = field.validation.filter((_, j) => j !== i).map((r) => r.type);
+                // options = rules valid for this type, minus ones already used (keep current)
+                const available = ruleTypes.filter((t) => t === rule.type || !used.includes(t));
+                const hasValue = ['minLength', 'maxLength', 'min', 'max', 'pattern'].includes(rule.type);
+                return (
+                  <div key={i} style={{ border: `1px solid ${C.n200}`, borderRadius: 5, padding: 11, display: 'flex', flexDirection: 'column', gap: 8, background: C.n0 }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                      <select className="sfb-inp" value={rule.type} onChange={(e) => updateValidation(i, { type: e.target.value, value: undefined, message: '' })} style={{ ...inpStyle, flex: 1, cursor: 'pointer' }}>
+                        {available.map((t) => <option key={t} value={t}>{RULE_LABELS[t]}</option>)}
+                      </select>
+                      <button type="button" onClick={() => removeValidation(i)} style={{ width: 28, height: 28, borderRadius: 4, border: `1px solid ${C.n200}`, color: C.n400, background: C.n0, cursor: 'pointer', flex: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                        <Trash width="14px" height="14px" fill="currentColor" />
+                      </button>
+                    </div>
+                    {hasValue && (
+                      <input className="sfb-inp" placeholder={rule.type === 'pattern' ? '^[a-z0-9]+$' : 'Value'} value={String(rule.value ?? '')} onChange={(e) => updateValidation(i, { value: e.target.value })} style={{ ...inpStyle, ...(rule.type === 'pattern' ? { fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 12 } : {}) }} />
+                    )}
+                    <input className="sfb-inp" placeholder="Custom error message (optional)" value={rule.message || ''} onChange={(e) => updateValidation(i, { message: e.target.value })} style={inpStyle} />
+                  </div>
+                );
+              })}
+
+              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 7, font: `400 11px ${FF}`, color: C.n500, lineHeight: 1.5 }}>
+                <span style={{ color: C.wrn600 }}>⚠</span>Rules run on the public form and in the preview.
+              </div>
+            </>
+          )}
         </div>
       )}
     </div>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "strapi-plugin-form-builder-cms",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.2",
   "description": "Visual drag-and-drop form builder plugin for Strapi 5. Create, publish and embed forms on any website.",
   "keywords": [
     "strapi",

package.json

@@ -88,6 +88,9 @@ function embedScript(): string {
   function mount(el, form, base) {
     var formEl = document.createElement('form');
     formEl.className = 'sfb-form';
+    // let the plugin's own validation + server errors drive messages instead of
+    // the browser's native required bubble
+    formEl.noValidate = true;
 
     // honeypot: hidden field bots tend to fill; humans never see it
     if (form.settings && form.settings.enableHoneypot) {
@@ -332,7 +335,7 @@ function embedScript(): string {
     var s = document.createElement('style');
     s.id = 'sfb-css';
     s.textContent = [
-      '.sfb-form { font-family: inherit; }',
+      '.sfb-form { font-family: inherit; text-align: left; color: #32324d; line-height: 1.5; }',
       '.sfb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }',
       '.sfb-field { display: flex; flex-direction: column; gap: 4px; }',
       '.sfb-label { font-size: 13px; font-weight: 600; color: #32324d; }',