# 연락처 페이지 생성

포트폴리오 사이트에 연락처 페이지가 있으면 잠재 고객, 고용주 또는 기술에 관심 있는 다른 전문가와 연결하는 데 도움이 됩니다.

이 튜토리얼 섹션에서는 Wagtail 폼을 사용하여 포트폴리오 사이트에 연락처 페이지를 추가합니다.

`base/models.py` 파일을 수정하여 시작합니다:

```python
from django.db import models

# parentalKey 가져오기:
from modelcluster.fields import ParentalKey

# FieldRowPanel 및 InlinePanel 가져오기:
from wagtail.admin.panels import (
    FieldPanel,
    FieldRowPanel,
    InlinePanel,
    MultiFieldPanel,
    PublishingPanel,
)

from wagtail.fields import RichTextField
from wagtail.models import (
    DraftStateMixin,
    PreviewableMixin,
    RevisionMixin,
    TranslatableMixin,
)

# AbstractEmailForm 및 AbstractFormField 가져오기:
from wagtail.contrib.forms.models import AbstractEmailForm, AbstractFormField

# FormSubmissionsPanel 가져오기:
from wagtail.contrib.forms.panels import FormSubmissionsPanel
from wagtail.contrib.settings.models import (
    BaseGenericSetting,
    register_setting,
)
from wagtail.snippets.models import register_snippet


# ...NavigationSettings 및 FooterText 정의를 유지합니다. FormField 및 FormPage를 추가합니다:
class FormField(AbstractFormField):
    page = ParentalKey('FormPage', on_delete=models.CASCADE, related_name='form_fields')


class FormPage(AbstractEmailForm):
    intro = RichTextField(blank=True)
    thank_you_text = RichTextField(blank=True)

    content_panels = AbstractEmailForm.content_panels + [
        FormSubmissionsPanel(),
        FieldPanel('intro'),
        InlinePanel('form_fields', label="폼 필드"),
        FieldPanel('thank_you_text'),
        MultiFieldPanel([
            FieldRowPanel([
                FieldPanel('from_address'),
                FieldPanel('to_address'),
            ]),
            FieldPanel('subject'),
        ], "이메일"),
    ]
```

이전 코드에서 `FormField` 모델은 `AbstractFormField` 에서 상속됩니다. `AbstractFormField` 를 사용하면 관리 인터페이스에서 원하는 폼 필드 유형을 정의할 수 있습니다. `page = ParentalKey('FormPage', on_delete=models.CASCADE, related_name='form_fields')` 는 `FormField` 와 `FormPage` 모델 간의 부모-자식 관계를 정의합니다.

반면에 `FormPage` 모델은 `AbstractEmailForm` 에서 상속됩니다. `AbstractFormField` 와 달리 `AbstractEmailForm` 은 폼-이메일 기능을 제공합니다. 또한 `to_address`, `from_address`, `subject` 필드를 정의합니다. `form_fields` 가 정의되어야 합니다.

`FormField` 및 `FormPage` 모델을 정의한 후 `form_page` 및 `form_page_landing` 템플릿을 생성해야 합니다. `form_page` 템플릿은 일반적인 Wagtail 템플릿과 다릅니다. 일반적인 `Page` 변수 외에 Django `Form` 객체를 포함하는 `form` 이라는 변수가 전달되기 때문입니다. 반면에 `form_page_landing.html` 은 표준 Wagtail 템플릿입니다. 사용자가 폼을 성공적으로 제출하면 사이트에서 `form_page_landing.html` 을 표시합니다.

이제 `base/templates/base/form_page.html` 파일을 생성하고 다음을 추가합니다:

```html+django
{% extends "base.html" %}
{% load wagtailcore_tags %}

{% block body_class %}template-formpage{% endblock %}

{% block content %}
    <h1>{{ page.title }}</h1>
    <div>{{ page.intro|richtext }}</div>

    <form class="page-form" action="{% pageurl page %}" method="POST">
        {% csrf_token %}
        {{ form.as_div }}
        <button type="Submit">제출</button>
    </form>
{% endblock content %}
```

또한 `base/templates/base/form_page_landing.html` 파일을 생성하고 다음을 추가합니다:

```html+django
{% extends "base.html" %}
{% load wagtailcore_tags %}

{% block body_class %}template-formpage{% endblock %}

{% block content %}
    <h1>{{ page.title }}</h1>
    <div>{{ page.thank_you_text|richtext }}</div>
{% endblock content %}
```

이제 포트폴리오 웹사이트에 연락처 페이지를 만드는 데 필요한 모든 코드 줄과 템플릿을 추가했습니다.

이제 `python manage.py makemigrations` 를 실행한 다음 `python manage.py migrate` 를 실행하여 데이터베이스를 마이그레이션합니다.

(add_your_contact_information)=

## 연락처 정보 추가

포트폴리오 사이트에 연락처 정보를 추가하려면 다음 단계를 따르십시오:

1.  다음 단계를 따라 **홈**의 자식 페이지로 **폼 페이지**를 생성합니다:

    a.  서버를 다시 시작합니다.
    b.  관리 인터페이스로 이동합니다.
    c.  [사이드바](https://guide.wagtail.org/en-latest/how-to-guides/find-your-way-around/#the-sidebar)에서 ` 페이지 ` 를 클릭합니다.
    d.  ` 홈 ` 을 클릭합니다.
    e.  결과 페이지 상단의 `+` 아이콘(자식 페이지 추가)을 클릭합니다.
    f.  ` 폼 페이지 ` 를 클릭합니다.

2.  필요한 데이터를 추가합니다.
3.  ` 폼 페이지 ` 를 게시합니다.

## 연락처 페이지 스타일 지정

연락처 페이지 스타일을 지정하려면 `mysite/static/css/mysite.css` 파일에 다음 CSS를 추가합니다:

```css
.page-form label {
    display: block;
    margin-top: 10px;
    margin-bottom: 5px;
}

.page-form :is(textarea, input, select) {
    width: 100%;
    max-width: 500px;
    min-height: 40px;
    margin-top: 5px;
    margin-bottom: 10px;
}

.page-form .helptext {
    font-style: italic;
}
```

이 튜토리얼의 다음 섹션에서는 사이트에 포트폴리오 페이지를 추가하는 방법을 배웁니다.