양식은 모든 사이트의 표준 요구 사항입니다. Netlify의 Forms 기능은 Jamstack 사이트의 양식을 쉽게 만들어 주며 Stackbit 사이트에 내장되어 있습니다. 이 가이드는 Netlify Forms에 대해 알아야 할 모든 것을 보여줍니다.

https://www.stackbit.com/blog/complete-guide-netlify-forms 

개발자가 양식을 처리해야 할 때 Jamstack 사이트를 구축 할 수 있는 많은 옵션이 있습니다. 예를 들어, 양식 처리 목록에 대한 Bejamas의 이 훌륭한 참조 게시물은 24 가지 옵션을 비교합니다! ?

이 게시물에서는 이러한 옵션 중 하나 인 Netlify Forms에 중점을 두고 싶습니다. Netlify에 배포하는 경우 설정 및 사용이 매우 쉽습니다. 더 좋은 점은 사이트가 Stackbit를 사용하여 구축 된 경우 생성 된 사이트 코드 내의 모든 양식이 Netlify Forms 용으로 미리 연결되어 있다는 것입니다. 작동 방식을 이해하면 기존 양식을 더 쉽게 업데이트하거나 사이트에서 새 양식을 만들 수 있습니다.

Netlify Forms 가격 

코드를 조사하기 전에 가격 논의를 중단하는 것이 좋습니다. Netlify 양식은 무료로 시작할 수 있지만 무료 계획의 일부로 사이트 당 매월 100 건의 제출이 포함됩니다. 많은 사이트에서 이 정도면 충분하지만 더 많은 사이트가 필요한 경우에는 $19에 1,000 개의 제출물을 구매할 수 있으며 그 이후에 500 개의 추가 제출에 대해 $9를 구입할 수 있습니다. 자세한 내용은 Netlify의 가격 페이지에서 확인할 수 있습니다.

또한 Stackbit이 Netlify에 배포하고 Netlify 양식이 기본적으로 활성화되어 있지만, 양식 pricng 및 청구는 Netlify 계정의 일부이며 어떤 식으로든 Stackbit 계정에 연결되지 않습니다.

Netlify 양식 기본 사항 

Netlify Forms의 강력한 기능은 구현이 얼마나 간단한 지에 있습니다. 일반적인 사이트에서 볼 수 있는 간단한 연락처 양식을 살펴 보겠습니다 (아래는 사이트 빌더에서 생성 된 프로젝트에 대해 Stackbit가 생성하는 연락처 양식을 기반으로 함).

<form name="simpleContactForm" method="POST" id="simple-contact-form" class="contact-form">

    <p class="form-row">

        <label id="contact-form-name-label" for="contact-form-name" class="form-label">Name</label>

        <input type="text" name="name" id="contact-form-name" aria-labelledby="contact-form-name-label" class="form-input">

    </p>

    <p class="form-row">

        <label id="contact-form-email-label" for="contact-form-email" class="form-label">Email address</label>

        <input type="email" name="email" id="contact-form-email" aria-labelledby="contact-form-email-label" class="form-input">

    </p>

    <p class="form-row">

        <label id="contact-form-message-label" for="contact-form-message" class="form-label">Message</label>

        <textarea name="message" id="contact-form-message" aria-labelledby="contact-form-message-label" class="form-textarea" rows="7"></textarea>

    </p>

    <p class="form-row form-submit">

        <button type="submit" class="button">Send Message</button>

    </p>

</form>

이 양식을 Netlify 양식과 함께 사용하려면 다음과 같이 양식 요소에 data-netlify = "true"속성을 추가하기 만하면 됩니다.

<form name="simpleContactForm" method="POST" data-netlify="true" id="simple-contact-form" class="contact-form">

...

이제 아래와 같이 양식을 제출하면

... Netlify에서 제공하는 기본 감사 페이지로 이동합니다 ...

... Netlify 대시 보드에서 이미 양식 제출에 액세스 할 수 있습니다.