Overview

You can customize the look of your submitted forms using CSS in this editor. This CSS can apply to the web view version you see when you toggle a submitted form, the generated encrypted password protected PDF version as well as the print view version of the form. This allows you to control how your submitted forms in all 3 formats.


To apply specific styles to the web version only prepend your styles with .cm-hipaa-submitted-form-fields {}.

 

To apply specific styles to the PDF version only prepend your styles with .pdf-body {}.

 

To apply specific styles to the print version wrap your styles in an @media print {}.

 

*TIP: Right click on an element you want to change the style of on the web view version of your form and select "inspect element". This will open the inspector window in order to see what classes/ids/tags/etc to hook your CSS into as well as allow you to see how your changes may look prior to changing them.


* MPDF does not recognize the label tag & are replaced with spans in the PDF version.

* Some styles may not apply quite as expected in the PDF version, for documentation on CSS for the PDF version see the MPDF CSS DOCUMENTION


Example


Typically, you will assign a custom class to a field.  Below is an example.  You can also use the Caldera and Gravity classes.

CalderaGravity


Within HIPAA Forms/Settings/Forms CSS use the following code to hide this field.  Any CSS code is allowed, this is just an example.


Here is the code that you can copy:

.cm-hipaa-submitted-form-fields  .hide-this{

    display: none;

}


.pdf-body  .hide-this{

    display: none;

}


@media print{

    .hide-this{

          display: none;

}}



Here are the results:


Online Form:Backend Web Version:
Print:
PDF Generation: