요즘 CANVA 코드 핫 하죠. 저도 6월에 외부 강의가 있어서 구글 설문 대신 캔바 코드로 신청서 만들어 보고 공유합니다.
신청서 만드는 방법
신청서는 크게 세 부분으로 구성됩니다:
안내 정보 (행사 제목, 설명, 일시 등)
입력 폼 (이름, 연락처 등 참가자 정보)
제출 버튼 및 처리 로직
아래에 간단한 신청서 예시가 있습니다. 이 코드를 복사하여 필요에 맞게 수정하시면 됩니다.
신청서 만들기 단계
1. HTML 기본 구조 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>신청서 제목</title>
</head>
<body>
<form>
<!-- 여기에 입력 필드들이 들어갑니다 -->
</form>
</body>
</html>
2. 입력 필드 추가하기
<form>
<div>
<label for="name">이름 *</label>
<input type="text" id="name" name="name" required>
</div>
<div>
<label for="email">이메일 *</label>
<input type="email" id="email" name="email" required>
</div>
<button type="submit">신청하기</button>
</form>
3. 스타일 추가하기
CSS를 사용하거나 Tailwind CSS 같은 프레임워크를 활용하여 디자인할 수 있습니다.
<head>
<!-- Tailwind CSS 추가 -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 또는 직접 CSS 작성 -->
<style>
form {
max-width: 500px;
margin: 0 auto;
}
input, textarea {
width: 100%;
padding: 8px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
background-color: #4f46e5;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
4. 폼 제출 처리하기
JavaScript를 사용하여 폼 제출을 처리합니다.
<script>
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault(); // 기본 제출 동작 방지
// 폼 데이터 수집
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
// 유효성 검사
if (!name || !email) {
alert('필수 항목을 모두 입력해주세요.');
return;
}
// 여기서 데이터를 서버로 전송하거나 처리합니다
// 실제로는 fetch API나 AJAX를 사용할 수 있습니다
// 성공 메시지 표시
alert('신청이 완료되었습니다!');
// 폼 초기화
this.reset();
});
</script>