728x90
728x90
폼메일이란?
웹브라우저에서 이메일을 보내는것을 말합니다.
메일로 뉴스레터나 신청폼을 받는 사용자는 신청내용이 스타일이 적용되어서 보이게됩니다.
사용방법
아래와같이 HTML로 구성해 사용가능합니다. 주의사항은 인라인으로 작성해야하는점과 메일별로 환경이 다르기때문에 다양한 메일환경에서 테스트해보아야합니다. 반응형으로 작업하지 않는것이 좋고 테이블로 작업하는것이 좋습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
</head>
<body>
<div style="width:450px; box-sizing:border-box;">
<div style="padding:50px; box-sizing:border-box;border:1px solid #d9d9d9; border-top:2px solid #94d006;">
<div style="margin-bottom:25px;">
<img src="http://namwonunion.co.kr/images/layout/logo.png" alt="">
</div>
<div style="word-break:break-all; font-size:28px; color:#333; font-weight:500; font-family: 'Noto Sans KR', sans-serif; vertical-align: initial;">
<span style="color:#94d006; ">문의사항</span> 정보입니다.
</div>
<table summary="기본정보" style="text-align:left; width:100%; margin-top:10px; margin-bottom:20px;">
<caption style="display:none">기본정보</caption>
<colgroup>
<col width="80px">
<col width="260px">
</colgroup>
<tbody>
<tr>
<th style="word-break:break-all; font-size:14px; color:#333; font-weight:500; font-family: 'Noto Sans KR', sans-serif; vertical-align: initial;">이름</th>
<td style="word-break:break-all; font-size:14px; color:#666; font-weight:300; font-family: 'Noto Sans KR', sans-serif; vertical-align: initial;">__NAME__</td>
</tr>
<tr>
<th style="word-break:break-all; font-size:14px; color:#333; font-weight:500; font-family: 'Noto Sans KR', sans-serif; vertical-align: initial;">회사명</th>
<td style="word-break:break-all; font-size:14px; color:#666; font-weight:300; font-family: 'Noto Sans KR', sans-serif; vertical-align: initial;">__COMPANY__</td>
</tr>
<tr>
<th style="word-break:break-all; font-size:14px; color:#333; font-weight:500; font-family: 'Noto Sans KR', sans-serif; vertical-align: initial;">휴대전화</th>
<td style="word-break:break-all; font-size:14px; color:#666; font-weight:300; font-family: 'Noto Sans KR', sans-serif; vertical-align: initial;">__PHONE__</td>
</tr>
<tr>
<th style="word-break:break-all; font-size:14px; color:#333; font-weight:500; font-family: 'Noto Sans KR', sans-serif; vertical-align: initial;">이메일</th>
<td style="word-break:break-all; font-size:14px; color:#666; font-weight:300; font-family: 'Noto Sans KR', sans-serif; vertical-align: initial;">__EMAIL__</td>
</tr>
<tr>
<th style="word-break:break-all; font-size:14px; color:#333; font-weight:500; font-family: 'Noto Sans KR', sans-serif; vertical-align: initial;">문의사항</th>
<td style="word-break:break-all; font-size:14px; color:#666; font-weight:300; font-family: 'Noto Sans KR', sans-serif; vertical-align: initial;" >__CONTENT__</td>
</tr>
</tbody>
</table>
<div style="width:100%;margin-top:30px;">
<a href="http://namwonunion.co.kr/" target="_blank" style="width:200px; height:40px; line-height:40px; background:#94d006;display:inline-block;text-align: center;color:#fff;font-size:15px;text-decoration:none;">홈페이지 바로가기</a>
</div>
</div>
</div>
</body>
</html>
반응형
'Code > Html' 카테고리의 다른 글
탭 만들기 (페이지 내에서 사용하는) (0) | 2023.02.23 |
---|---|
링크 이동하는 방법들 (a태그, onclick) (0) | 2023.01.27 |
페이지 내에서 탭으로 변경하는 컨텐츠 (0) | 2023.01.25 |
웹 성능을 올리는 방법 (Image Lazy Loading) (0) | 2023.01.04 |
확장자 .htm과 .html의 차이점 (0) | 2023.01.04 |