<aside> 💡
추가 CSS에 입력하여 사용했다.
</aside>
/* Contact Form 7 (#contact-form) */
#contact-form {
max-width: 600px;
margin: 0 auto;
padding: 2rem;
}
.form-label {
display: block;
margin-bottom: 8px;
color: #212529;
font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI",
sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 1.6;
}
#form-input,
#form-select,
#form-text-area,
#contact-form input[type="text"],
#contact-form input[type="tel"],
#contact-form input[type="email"],
#contact-form select,
#contact-form textarea {
display: flex;
width: 100%;
height: 48px;
padding: 12px 16px;
margin-top: 8px;
align-items: center;
gap: 8px;
border: 1px solid #d1d5db;
border-radius: 8px;
background: #fff;
color: #111827;
font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI",
sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
letter-spacing: -0.16px;
font-feature-settings: "liga" off, "clig" off;
transition: border-color 0.3s ease;
box-sizing: border-box;
}
#form-text-area,
#contact-form textarea {
height: auto;
min-height: 120px;
resize: vertical;
}
#form-input::placeholder,
#form-select::placeholder,
#form-text-area::placeholder,
#contact-form input::placeholder,
#contact-form select::placeholder,
#contact-form textarea::placeholder {
color: #9ca3af;
font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI",
sans-serif;
font-size: 16px;
line-height: 1.6;
letter-spacing: -0.16px;
font-feature-settings: "liga" off, "clig" off;
}
#form-input:focus,
#form-select:focus,
#form-text-area:focus,
#contact-form input:focus,
#contact-form select:focus,
#contact-form textarea:focus {
outline: none;
border-color: #0d2c4f;
box-shadow: 0 0 0 3px rgba(13, 44, 79, 0.1);
}
#contact-form .wpcf7-acceptance {
margin: 1rem 0;
}
.wpcf7-list-item-label,
#contact-form .wpcf7-list-item-label,
.wpcf7-acceptance .wpcf7-list-item-label {
color: #ffffff !important;
font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI",
sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 1.6 !important;
letter-spacing: -0.16px !important;
margin-left: 8px !important;
cursor: pointer !important;
display: inline-block !important;
}
#form-checkbox,
#contact-form input[type="checkbox"] {
width: 20px;
height: 20px;
margin: 0;
cursor: pointer;
vertical-align: middle;
}
#form-button {
display: flex;
width: 100%;
height: 52px;
padding: 14px 32px;
justify-content: center;
align-items: center;
gap: 10px;
border: 2px solid #0d2c4f;
background: #fff;
color: #0d2c4f;
font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI",
sans-serif;
font-size: 16px;
font-weight: 600;
cursor: pointer;
border-radius: 8px;
transition: all 0.3s ease;
margin-top: 2rem;
}
#form-button:hover:not(:disabled) {
background: #0d2c4f;
color: #fff;
}
#form-button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
#contact-form p {
margin-bottom: 1.5rem;
}
#contact-form .wpcf7-not-valid-tip {
color: #dc2626;
font-size: 14px;
margin-top: 4px;
}
#contact-form .wpcf7-response-output {
margin: 2rem 0 0;
padding: 1rem;
border-radius: 8px;
text-align: center;
font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI",
sans-serif;
}
#contact-form .wpcf7-mail-sent-ok {
background-color: #d1fae5;
color: #065f46;
border: 1px solid #a7f3d0;
}
#contact-form .wpcf7-mail-sent-ng,
#contact-form .wpcf7-validation-errors,
#contact-form .wpcf7-spam-blocked {
background-color: #fee2e2;
color: #991b1b;
border: 1px solid #fecaca;
}
#contact-form .wpcf7-spinner {
margin-left: 10px;
}
<div style="font-family: 'Malgun Gothic', '맑은 고딕', AppleSDGothicNeo, sans-serif; max-width: 680px; margin: 0 auto;">
<div style="background-color: #212529; padding: 20px; text-align: center;">
<h1 style="color: #ffffff; font-size: 24px; margin: 0;">파도세무회계 신규 상담문의</h1>
</div>
<div style="padding: 30px; border: 1px solid #eeeeee;">
<p style="font-size: 16px; color: #333333;">
홈페이지를 통해 새로운 세무 상담문의가 접수되었습니다.<br>
아래 내용을 확인 후 신속한 답변 부탁드립니다.
</p>
<table style="width: 100%; border-collapse: collapse; margin-top: 25px;">
<tr style="border-bottom: 1px solid #eeeeee;">
<td style="padding: 15px 10px; background-color: #f7f7f7; font-weight: bold; width: 140px; font-size: 15px;">보내는 사람</td>
<td style="padding: 15px 10px; font-size: 15px;">[your-name]</td>
</tr>
<tr style="border-bottom: 1px solid #eeeeee;">
<td style="padding: 15px 10px; background-color: #f7f7f7; font-weight: bold; width: 140px; font-size: 15px;">휴대전화번호</td>
<td style="padding: 15px 10px; font-size: 15px;">[your-phone]</td>
</tr>
<tr style="border-bottom: 1px solid #eeeeee;">
<td style="padding: 15px 10px; background-color: #f7f7f7; font-weight: bold; width: 140px; font-size: 15px; vertical-align: top;">문의 내용</td>
<td style="padding: 15px 10px; font-size: 15px; line-height: 1.6;">[your-message]</td>
</tr>
<tr style="border-bottom: 1px solid #eeeeee;">
<td style="padding: 15px 10px; background-color: #f7f7f7; font-weight: bold; width: 140px; font-size: 15px;">개인정보 이용 동의</td>
<td style="padding: 15px 10px; font-size: 15px; color: #0073aa;">[acceptance-656]</td>
</tr>
<tr>
<td style="padding: 15px 10px; background-color: #f7f7f7; font-weight: bold; width: 140px; font-size: 15px;">마케팅 수신 동의</td>
<td style="padding: 15px 10px; font-size: 15px; color: #0073aa;">[acceptance-218]</td>
</tr>
</table>
</div>
<div style="background-color: #f0f0f0; padding: 20px; text-align: center; font-size: 12px; color: #888888;">
이 메일은 파도세무회계 홈페이지([_site_url])에서 자동으로 발송되었습니다.
</div>
</div>
E.o.D