diff --git a/docs/docassets/images/form-style-sample.png b/docs/docassets/images/form-style-sample.png
new file mode 100644
index 0000000000..7ed73bf299
Binary files /dev/null and b/docs/docassets/images/form-style-sample.png differ
diff --git a/docs/form.component.md b/docs/form.component.md
index a2ab45cc0b..dfc904f366 100644
--- a/docs/form.component.md
+++ b/docs/form.component.md
@@ -269,6 +269,40 @@ formService.formEvents.subscribe((event: Event) => {
 });
 ```
 
+#### Customize form outcomes (buttons) styles
+
+If you want custtomize the outcoumes style of your form you can do it using plain css selectors.
+Any outcome has an Id that is composed in the following way:
+
+
+```
+  adf-form-YOUR_OUTCAME_NAME
+```
+
+Using the CSS you can target any outcome ID and change the style as in this example:
+
+```css
+#adf-form-complete {
+    background-color: blue !important;
+    color: white;
+}
+
+
+#adf-form-save {
+    background-color: green !important;
+    color: white;
+}
+
+#adf-form-customoutcome {
+    background-color: yellow !important;
+    color: white;
+}
+```
+
+![](docassets/images/form-style-sample.png)
+
+
+
 ## See also
 
 -   [Stencils](stencils.md)
diff --git a/lib/core/form/components/form.component.html b/lib/core/form/components/form.component.html
index 19edbb04a6..47972a0448 100644
--- a/lib/core/form/components/form.component.html
+++ b/lib/core/form/components/form.component.html
@@ -30,7 +30,7 @@
         </mat-card-content>
         <mat-card-actions *ngIf="form.hasOutcomes()" class="adf-form-mat-card-actions">
             <!--[class.mdl-button--colored]="!outcome.isSystem"-->
-            <button *ngFor="let outcome of form.outcomes" 
+            <button [id]="'adf-form-'+ outcome.name  | lowercase" *ngFor="let outcome of form.outcomes"
                     [color]="getColorForOutcome(outcome.name)"
                     mat-button
                     [disabled]="!isOutcomeButtonEnabled(outcome)"