Snippet / Theme Options > Custom CSS or Contact Form module CSS class

Elegant Contact Form Styling

A polished CSS baseline for Divi Contact Form fields, focus states, validation messages, and submit button styling.

Add dfy-contact-soft to the Divi Contact Form module.

.dfy-contact-soft .et_pb_contact_field input,
.dfy-contact-soft .et_pb_contact_field textarea {
  border: 1px solid #d7dee6;
  border-radius: 8px;
  background: #f7f9fb;
  color: #17212b;
  padding: 14px 16px;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.dfy-contact-soft .et_pb_contact_field input:focus,
.dfy-contact-soft .et_pb_contact_field textarea:focus {
  border-color: #2563eb;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
  outline: 0;
}

.dfy-contact-soft .et_pb_contact_submit {
  border-radius: 8px;
  border: 0;
  background: #17212b;
  color: #ffffff;
  font-weight: 800;
}

.dfy-contact-soft .et_pb_contact_submit:hover,
.dfy-contact-soft .et_pb_contact_submit:focus-visible {
  background: #2563eb;
}

.dfy-contact-soft .et-pb-contact-message {
  border-left: 4px solid #2563eb;
  background: #eef4ff;
  padding: 12px 14px;
}

Notes

• Match the radius to the rest of the site. Do not let form controls become softer than the surrounding design system.
• Check error and success states, not only the empty form.

Sources

• https://www.cobalt.graphics/divi-css-snippets/
• https://wpzone.co/blog/snippet-category/divi-modules/