How to style Drupal contact block

Submitted by gazza on Tue, 28/05/2019 - 16:35
Example of a styled Drupal 8 Contact block

This is some styling that I use with the Drupal 8 Contact Block module to make the contact form in a block:

How to style Drupal 8 contact block
#block-contactblock #edit-submit { margin-left: auto; margin-right: auto; background-color: HEX-COLOUR !important; } /* This will centre the submit button and change it's colour */

#block-contactblock .form-actions { margin: 0rem 0; } /* This removes the unnecessary margins around the submit button  */

#block-contactblock form { margin: 0 0 0rem; } /* This removes the unnecessary margins around the form elements  */

#block-contactblock .block__content { padding: 8px; } /* Adds some padding between the form elements and the dashed outer line  */

#block-contactblock-title { padding: 5px; margin: 0 0 0rem; line-height: 1.0; text-align: center; background: HEX-COLOUR; color: HEX-COLOUR; } /* Makes the block title stand out better  */

#block-contactblock { border: 2px dashed HEX-COLOUR; } /* Gives a coupon style border around the whole form  */

Be sure to remove the Preview option in Structure > Contact forms > Edit and un tick "allow preview?" tick box.

I also tend to remove the option to send a copy to the form submitter. I find using the Contact Ajax module makes for a better user experience.