</div>
    <div>
      <button class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' type='submit'>
        <data:contactFormSendMsg/>
      </button>
      <div class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
      <div class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
    </div>
  </form>
</bp:template>

<bp:sass>
//
// Contact form
//

.wg-contact-form {
  .contact-form-button {
    @extend .btn;
    @extend .btn-secondary;
  }

.contact-form-success-message,
  .contact-form-error-message {
    display: none;
  }

.contact-form-success-message-with-border,
  .contact-form-error-message-with-border {
    @extend .alert;
    margin-top: 1rem;
    margin-bottom: 0;
  }

.contact-form-success-message-with-border {
    @extend .alert-success;
  }
  .contact-form-error-message-with-border {
    @extend .alert-danger;

.contact-form-cross {
      position: absolute;
      top: 0;
      right: 0;
      padding: .25rem;
    }
  }
}
</bp:sass>