Fix Input Widget css style and add alternate for Widget-Forms to allow customization

src/OrchardCore.Modules/OrchardCore.Forms/FormShapeTableProvider.cs

@@ -0,0 +1,24 @@
+using OrchardCore.ContentManagement;
+using OrchardCore.DisplayManagement;
+using OrchardCore.DisplayManagement.Descriptors;
+using OrchardCore.DisplayManagement.Utilities;
+using OrchardCore.Forms.Models;
+
+namespace OrchardCore.Forms;
+
+public class FormShapeTableProvider : IShapeTableProvider
+{
+    public void Discover(ShapeTableBuilder builder)
+    {
+        builder.Describe("Widget__Form")
+            .OnDisplaying(context =>
+            {
+                if (context.Shape.TryGetProperty<ContentItem>("ContentItem", out var contentItem) 
+                    && contentItem.TryGet<FormElementPart>(out var elementPart) 
+                    && !string.IsNullOrEmpty(elementPart.Id))
+                {
+                    context.Shape.Metadata.Alternates.Add($"Widget__{contentItem.ContentType}_{elementPart.Id.EncodeAlternateElement()}");
+                }
+            });
+    }
+}

src/OrchardCore.Modules/OrchardCore.Forms/OrchardCore.Forms.csproj

@@ -17,6 +17,7 @@
   <ItemGroup>
     <ProjectReference Include="..\..\OrchardCore\OrchardCore.Apis.GraphQL.Abstractions\OrchardCore.Apis.GraphQL.Abstractions.csproj" />
     <ProjectReference Include="..\..\OrchardCore\OrchardCore.ContentManagement.Display\OrchardCore.ContentManagement.Display.csproj" />
+    <ProjectReference Include="..\..\OrchardCore\OrchardCore.DisplayManagement.Abstractions\OrchardCore.DisplayManagement.Abstractions.csproj" />
     <ProjectReference Include="..\..\OrchardCore\OrchardCore.DisplayManagement\OrchardCore.DisplayManagement.csproj" />
     <ProjectReference Include="..\..\OrchardCore\OrchardCore.Navigation.Core\OrchardCore.Navigation.Core.csproj" />
     <ProjectReference Include="..\..\OrchardCore\OrchardCore.Module.Targets\OrchardCore.Module.Targets.csproj" />

src/OrchardCore.Modules/OrchardCore.Forms/Startup.cs

@@ -4,6 +4,7 @@
 using OrchardCore.ContentManagement;
 using OrchardCore.ContentManagement.Display.ContentDisplay;
 using OrchardCore.Data.Migration;
+using OrchardCore.DisplayManagement.Descriptors;
 using OrchardCore.Forms.Activities;
 using OrchardCore.Forms.Activities.Drivers;
 using OrchardCore.Forms.Drivers;
@@ -76,6 +77,7 @@ public override void ConfigureServices(IServiceCollection services)
                     .UseDisplayDriver<FormElementValidationPartDisplayDriver>();
 
             services.AddDataMigration<Migrations>();
+            services.AddScoped<IShapeTableProvider, FormShapeTableProvider>();
         }
     }
 

src/OrchardCore.Modules/OrchardCore.Forms/Views/Items/ButtonPart.Fields.Edit.cshtml

@@ -14,9 +14,9 @@
     <label asp-for="Type" class="@Orchard.GetLabelClasses()">@T["Type"]</label>
     <div class="@Orchard.GetEndClasses()">
         <select asp-for="Type" class="form-select content-preview-select">
-            <option value="submit">Submit</option>
-            <option value="button">Button</option>
-            <option value="reset">Reset</option>
+            <option value="submit">@T["Submit"]</option>
+            <option value="button">@T["Button"]</option>
+            <option value="reset">@T["Reset"]</option>
         </select>
         <span class="hint">@T["The button type."]</span>
     </div>

src/OrchardCore.Modules/OrchardCore.Forms/Views/Items/FormElementLabelPart.Fields.Edit.cshtml

@@ -11,9 +11,9 @@
         <label asp-for="LabelOption" class="@Orchard.GetLabelClasses()">@T["Label option"]</label>
         <div class="@Orchard.GetEndClasses()">
             <select asp-for="LabelOption" class="form-select content-preview-select field-label-option-select-menu">
-                <option value="@LabelOptions.None">@T["None"]</option>
-                <option value="@LabelOptions.Standard">@T["Standard"]</option>
-                <option value="@LabelOptions.ScreenReaders">@T["Screen Readers"]</option>
+                <option value="@nameof(LabelOptions.None)">@T["None"]</option>
+                <option value="@nameof(LabelOptions.Standard)">@T["Standard"]</option>
+                <option value="@nameof(LabelOptions.ScreenReaders)">@T["Screen Readers"]</option>
             </select>
             <span class="hint">@T["The type of label to create for this field."]</span>
         </div>

src/OrchardCore.Modules/OrchardCore.Forms/Views/Items/InputPart.Fields.Edit.cshtml

@@ -51,7 +51,7 @@
 </div>
 
 <script at="Foot">
-    var initilizeFieldType = (wrapper) => {
+    var initializeFieldType = (wrapper) => {
         var selectMenus = wrapper.getElementsByClassName('field-type-select-menu');
         for (let i = 0; i < selectMenus.length; i++) {
             var selectMenu = selectMenus[i];
@@ -74,9 +74,9 @@
     };
     var wrapper = document.getElementById('@wrapperId')
     if (wrapper != null) {
-        initilizeFieldType(wrapper);
+        initializeFieldType(wrapper);
     }
     document.addEventListener('DOMContentLoaded', function () {
-        initilizeFieldType(document);
+        initializeFieldType(document);
     });
 </script>

src/OrchardCore.Modules/OrchardCore.Forms/Views/Items/InputPart.cshtml

@@ -7,7 +7,7 @@
     var fieldName = formInputElementPart.Name;
     var fieldId = !string.IsNullOrEmpty(elementId) ? elementId : !string.IsNullOrEmpty(fieldName) ? Html.GenerateIdFromName(fieldName) : default(string);
     var fieldValue = Model.Value.DefaultValue;
-    var fieldClass = "form-control";
+    var fieldClass = Model.Value.Type == "checkbox" ? "form-check-input" : "form-control";
     var isChecked = false;
 
     if (ViewData.ModelState.TryGetValue(fieldName, out var fieldEntry))
@@ -23,9 +23,9 @@
 
         if (fieldEntry.Errors.Count > 0)
         {
-            fieldClass = "form-control input-validation-error is-invalid";
+            fieldClass += " input-validation-error is-invalid";
         }
     }
 }
 
-<input id="@fieldId" name="@fieldName" type="@Model.Value.Type" class="@fieldClass" value="@fieldValue" placeholder="@Model.Value.Placeholder" @(isChecked ? "checked" : "") />
+<input id="@fieldId" name="@fieldName" type="@Model.Value.Type" class="@fieldClass" value="@fieldValue" placeholder="@Model.Value.Placeholder" @(isChecked ? "checked" : string.Empty) />