Next와 함께 양식을 구성합니다.js 및 Getform
Next.js는 Vercel에 의해 만들어진 React 기반의 전단 프레임워크로 검색엔진에 좋은 정적 및 동적 웹 응용 프로그램을 개발하는 데 사용된다.서버측 렌더링과 정적 사이트 생성 등의 기능을 지원합니다.
모든 웹 사이트나 응용 프로그램에서 HTML 양식 제출을 처리할 수 있는 현대 양식 백엔드 플랫폼입니다.정적 사이트 폼 관리에 적용되며 온라인 폼의 데이터 관리자로 사용됩니다.
본고에서 Getform을 사용하여 정적 파일 업로드 폼을NextJS 사이트에 추가하고 버셀을 사용하여 기능 폼이 있는ready 사이트를 배치하는 방법을 소개합니다.
Getform을 사용하여 NextJS 양식 작성 방법
단계 1: Getform 계정을 만들고 새 양식 끝점을 생성합니다.
2단계: 다음 생성js 응용
우선, 우리는 새로운 다음 것이 필요하다.js 응용 프로그램은 처음부터 시작합니다.이렇게 하려면 응용 프로그램을 만들고 실행할 위치를 탐색할 수 있습니다.
$ yarn create next-app [project-name]
#or
$ npx create-next-app [project-name]
다음js가 의존항을 설치하면 프로젝트 디렉터리로 내비게이션을 하고 개발 서버를 시작하도록 표시합니다.
$ cd my-nextjs-getform-form
yarn dev나 npm run dev를 뛰고 나면 다음 단계를 진행할 준비가 되어 있어야 한다.js 응용 프로그램:
3단계: NextJS 응용 프로그램에 HTML 양식 추가
우리의 형식에 대해 우리는 정말 우리가 원하는 어떤 것도 사용할 수 있다.연락처는 이메일 주소, 이름 및 메시지 필드로 간단할 수 있으며, 다양한 옵션을 포함하여 기업이 특정 질문에 대답할 수 있도록 도와줍니다.
이 예에서, 우리는 방문객에게 그들의 전체 이름, 이메일 주소를 남기고, 그들이 가장 좋아하는 devops 플랫폼, 예를 들어 Bitbucket, Github,Gitlab을 포함하여, 마지막으로 이력서를 보내도록 요구할 것이다.
새 js 파일을 만들고contact라고 이름을 붙입니다.페이지 디렉토리의 js 파일에서 다음 코드 블록을 사용하여 내용을 변경합니다.
import axios from 'axios';
import {useState} from 'react'
const GETFORM_FORM_ENDPOINT = "https://getform.io/{your-form-endpoint}";
function Form() {
const [formStatus, setFormStatus] = useState(false);
const [query, setQuery] = useState({
name: "",
email: "",
platform: "",
file: ""
});
const handleFileChange = () => (e) => {
setQuery((prevState) => ({
...prevState,
files: e.target.files[0]
}));
};
const handleChange = () => (e) => {
const name = e.target.name;
const value = e.target.value;
setQuery((prevState) => ({
...prevState,
[name]: value
}));
};
const handleSubmit = (e) => {
e.preventDefault();
const formData = new FormData();
Object.entries(query).forEach(([key, value]) => {
formData.append(key, value);
});
axios
.post(
GETFORM_FORM_ENDPOINT,
formData,
{headers: {Accept: "application/json"}}
)
.then(function (response) {
setFormStatus(true);
setQuery({
name: "",
email: "",
platform: ""
});
console.log(response);
})
.catch(function (error) {
console.log(error);
});
};
return (
<div class="container-md">
<h2>Getform.io Next.js File Upload Form Example</h2>
<form
acceptCharset="UTF-8"
method="POST"
enctype="multipart/form-data"
id="ajaxForm"
onSubmit={handleSubmit}
>
<div className="form-group mb-2">
<label for="exampleInputEmail1">Email address</label>
<input
type="email"
className="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
placeholder="Enter email"
required
name="email"
value={query.email}
onChange={handleChange()}
/>
</div>
<div className="form-group mb-2">
<label for="exampleInputName">Name</label>
<input
type="text"
className="form-control"
id="exampleInputName"
placeholder="Enter your name"
required
name="name"
value={query.name}
onChange={handleChange()}
/>
</div>
<div className="form-group">
<label for="exampleFormControlSelect1">Favourite Platform</label>
<select
className="form-control"
id="exampleFormControlSelect1"
required
name="platform"
value={query.platform}
onChange={handleChange()}
>
<option>Github</option>
<option>Gitlab</option>
<option>Bitbucket</option>
</select>
</div>
<hr/>
<div className="form-group mt-3">
<label className="mr-2">Upload your CV:</label>
<input name="file" type="file" onChange={handleFileChange()}/>
</div>
<hr/>
{formStatus ? (
<div className="text-success mb-2">
Your message has been sent.
</div>
) : (
""
)}
<button type="submit" className="btn btn-primary">Submit</button>
</form>
</div>
);
}
export default Form
yarn add axios 을 통해 axios를 저장소에 추가해야 합니다yarn add react-bootstrap bootstrap을 통해 부트를 저장소에 추가합니다.import 'bootstrap/dist/css/bootstrap.min.css를 페이지 디렉터리에 추가_app.js합니다.
4단계: 제출 양식 샘플을 제출함으로써 당신의 양식을 테스트합니다!
우리의 연락처 페이지는 현재 제출을 받을 수 있습니다.필드를 작성하고 제출을 누르겠습니다.
커밋 후 Getform 대시보드의 모양은 다음과 같습니다.
업로드된 파일과 제출된 컨텐트는 파일 탭에서 찾아 미리 볼 수 있습니다.
파일 업로드 양식 및 지원되는 미리 보기 파일 유형에 대한 자세한 내용은 다음 문서 링크에서 확인할 수 있습니다.
File Upload Form Installation | Getform Documentation
이렇게!니 다음.js 응용 프로그램은 현재 Getform을 사용하여 폼 백엔드를 처리합니다.
5단계: 다음 단계를 배치합니다.Vercel에 제출된 js 테이블(선택 사항)
Vercel는 서버가 없는 어플리케이션을 배포할 수 있는 매우 간단한 플랫폼을 제공합니다.그리고 NextJs에 대한 오픈 지원으로 더욱 간단해졌다.
우선 전 세계적으로 now 플랫폼을 설치합니다
$ npm i -g now
now만 입력하면 응용 프로그램을 플랫폼에 배치할 수 있다.$ now
다음 명령을 사용하여 로컬
now 플랫폼에서 실행할 수 있습니다.$ now dev
Getform으로 무엇을 할 수 있습니까?
Email Notification Plugin | Getform Documentation
Zapier Integration | Getform Documentation
Reference
이 문제에 관하여(Next와 함께 양식을 구성합니다.js 및 Getform), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/mertcanyucel/building-forms-with-next-js-and-getform-5f3b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
