CANVA 코드로 쉽게 행사 신청서 만들기

요즘 CANVA 코드 핫 하죠. 저도 6월에 외부 강의가 있어서 구글 설문 대신 캔바 코드로 신청서 만들어 보고 공유합니다.

신청서 만드는 방법

신청서는 크게 세 부분으로 구성됩니다:

  1. 안내 정보 (행사 제목, 설명, 일시 등)

  2. 입력 폼 (이름, 연락처 등 참가자 정보)

  3. 제출 버튼 및 처리 로직

아래에 간단한 신청서 예시가 있습니다. 이 코드를 복사하여 필요에 맞게 수정하시면 됩니다.

한국 웹 사이트의 가입 양식

신청서 만들기 단계

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>
                            
2

👉 이 게시글도 읽어보세요