Styling Your Custom Form

Did you know that you have quite comprehensive styling available for your forms? You can change the color and fonts etc. to really suit your corporate style if you wish. Here is an example of an extensively styled form which was done with only a handful of custom CSS:

Here is the custom CSS which was entered into Forms -> Configure -> Form Layout:

.cf-form-area {
  background-color: ivory;
  font-size: 1.5em;
  font-family: "Georgia";
}


.cf-notification-area {
  background-color: palegoldenrod;
}


.form-control {
  background-color: azure;
}


.cf-submit-button {
  background-color: mediumvioletred;
}
<br>

Here is a much more complex example that you can achieve (complete with a CSS pattern background):

And below is the CSS that gives you this result:

.cf-body {
  background-color: #553c7a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='charlie-brown' fill='%237b939a' fill-opacity='0.4'%3E%3Cpath d='M9.8 12L0 2.2V.8l10 10 10-10v1.4L10.2 12h-.4zm-4 0L0 6.2V4.8L7.2 12H5.8zm8.4 0L20 6.2V4.8L12.8 12h1.4zM9.8 0l.2.2.2-.2h-.4zm-4 0L10 4.2 14.2 0h-1.4L10 2.8 7.2 0H5.8z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}


.cf-form-area {
  background-color: cornflowerblue;
  color: white;
}


.cf-notification-area {
  background-color: palegoldenrod;
}


.form-control {
  background-color: linen;
  color: purple;
  font-size: 1.25em;
}
<br>

If you want to know the HTML DIV elements which have custom classes that you can style, all the DIVs with a ' cf-' prefix class are shown below:

Please note that you have to have fairly competent knowledge of CSS formatting in order to make changes to your forms which will not break them. We take no responsibility if any non-standard changes cause your forms not to display or work properly. If in doubt, please reach out to our support team.