diff --git a/template/components/form_color_opacity.go b/template/components/form_color_opacity.go
new file mode 100644
index 0000000..1998386
--- /dev/null
+++ b/template/components/form_color_opacity.go
@@ -0,0 +1,14 @@
+package components
+
+type FormColorOpacity struct {
+	ColorID       string
+	OpacityID     string
+	Label         string
+	ColorHexValue string
+	OpacityValue  string
+	Hint          string
+	Error         string
+	IsDisabled    bool
+	IsRequired    bool
+	HasOpacity    bool
+}
diff --git a/template/components/form_color_opacity.html b/template/components/form_color_opacity.html
new file mode 100644
index 0000000..b429d55
--- /dev/null
+++ b/template/components/form_color_opacity.html
@@ -0,0 +1,28 @@
+{{ define "form_color_opacity"}}
+<div class="input-container">
+  <script src="/public/jscolor.js"></script>
+  <label class="form-label" for="{{.ColorID}}">{{.Label}}</label><br>
+  <input id="{{ .ColorID }}" data-jscolor="{alphaElement:'#{{ .OpacityID }}'}" value="{{ .ColorHexValue }}" name="{{ .ColorID }}"
+  {{if eq .IsDisabled true}}
+    disabled
+  {{end}}
+  {{if eq .IsRequired true}}
+    required
+  {{end}}
+  >
+  {{if eq .HasOpacity true}}
+  opacity: <input id="{{ .OpacityID }}" value="{{ .OpacityValue }}" name="{{ .OpacityID }}" size="5" 
+          {{if eq .IsDisabled true}}
+              disabled
+          {{end}}
+          {{if eq .IsRequired true}}
+              required
+          {{end}}
+          >
+  {{if ne .Hint ""}}<small id="{{.ID}}Help" class="form-text text-muted">{{.Hint}}</small>{{end}}
+  {{if ne .Error ""}}<div class="error">{{.Error}}</div>{{end}}
+  {{end}}
+</div> 
+
+{{end}}
+<input type="text" id="name" name="name" placeholder class="form-control" required autocomplete="off" value="Plaza estrella" aria-describedby="nameHelp">
\ No newline at end of file