개발자를 위한 양식 작성기
목차
Code examples
현재 개발자 양식 도구의 문제점
오늘날 사용할 수 있는 많은 양식 작성기와 양식 도구가 있습니다. 간단한 양식을 가족과 공유하거나, 복잡한 등록 양식을 작성하거나, 지불 정보를 수집해야 하는 경우 양식 작성기 또는 도구가 있습니다. 아니면...틈이 보입니다.
양식 백엔드 서비스는 JAMstack 웹사이트가 서버 없이 양식 제출을 수집하고 데이터를 타사 시스템에 연결하는 데 도움이 됩니다. 그러나 여전히 HTML 양식과 클라이언트 측 유효성 검사와 같은 지원 기능을 직접 작성해야 합니다. 게다가 양식 제출을 코드에서 로컬로 사용하고 백엔드 서비스를 사용하려는 경우에는 불가능합니다!
Formik 및 Angular Forms와 같은 코드 라이브러리는 양식 상태 및 유효성 검사를 관리하는 데 매우 유용합니다. 자체 구성 요소를 사용하고 표준 HTML보다 훨씬 빠르게 고품질 양식을 작성할 수 있습니다. 안타깝게도 여전히 모든 단일 양식과 해당 유효성 검사 규칙을 직접 작성하는 데 시간을 소비해야 합니다. 또한 양식 제출을 처리하고 데이터를 통합하기 위해 백엔드를 만드는 데 시간을 투자해야 합니다.
양식은 개발자가 지속적으로 수작업으로 작성하기에는 너무 반복적이고 시간이 많이 걸립니다.
양식 가져오기
fetchforms.io
그래서 Fetch Forms를 만들었습니다. 양식 백엔드 서비스의 이점을 원했고 반복적인 측면을 제거하는 양식 작성기에서 양식을 작성할 수 있기를 원했습니다.
Fetch 양식 빌더의 기본값과 템플릿은 기록적인 시간 내에 양식을 작성하고 협업하는 데 도움이 됩니다.
Fetch API를 사용하면 고품질 양식을 클라이언트 측 유효성 검사와 몇 분 만에 애플리케이션에 통합할 수 있습니다.
업데이트도 쉽습니다. 변경 사항을 완료하고 클릭 한 번으로 게시합니다. 업데이트된 Fetch 양식을 사용하는 모든 애플리케이션은 새 양식을 가져오기 시작합니다.
양식 가져오기 시작하기
코드 제어로 양식 작성기의 속도를 얻으십시오. 방법은 다음과 같습니다.
1. 빌드
Fetch 양식 작성기를 사용하여 양식을 작성하고 작성하십시오. 템플릿과 기본값으로 가득 차 있어 양식을 쉽게 만들 수 있습니다.
2. 배포
당사의 NPM 모듈, 포함 스크립트를 사용하거나 기본 가져오기 API를 사용하여 양식을 배포합니다. 가능성은 무한합니다!
3. 제출물
Fetch Forms로 제출을 보낼 필요가 없습니다. 제출된 모든 데이터는 어떤 경우에도 로컬 코드에서 사용할 수 있습니다.
제출물을 Fetch Forms 라이브러리에 저장하도록 양식을 구성한 경우 서버에서 확인되고 스팸 필터링을 통해 전송됩니다. 제출하면 설정한 모든 연결이 활성화됩니다.
코드를 살펴볼까요?
Fetch Forms 사용은 필요에 따라 간단하거나 복잡할 수 있습니다. 처음 두 예제는 Fetch Forms에서 제공하는 스타일 구성 요소를 사용하고 있습니다. 자체 구성 요소 라이브러리를 사용하여 Fetch 양식을 구현할 수도 있습니다(예제 3 참조).
당신은 내가 the walkthrough here에서 양식을 만들고 배포하는 과정을 지켜봅니다.
간단한 자바스크립트 및 HTML 예제
www.fetchforms.io/docs/fetch-forms-javascript에서 자세히 보기
<!DOCTYPE html>
<html>
<main style="max-width: 600px; margin: auto">
<h1>Fetch Forms Javascript</h1>
<hr />
<h2 id="form_name" style="margin-bottom: 25px"></h2>
<div id="fetch_form"></div>
<pre id="result"></pre>
</main>
<script>
import { renderForm } from "@fetchforms/core";
// Called when data is submitted
const onComplete = (data) => {
document.getElementById("result").innerHTML = JSON.stringify(data, null, 2);
};
// Called when the Fetch form is loaded from the API
const onLoad = (data) => {
// Set the form name on the HTML
document.getElementById("form_name").innerHTML = data.name;
};
// Pass in the form slug, element Id to attach the form to, and optional utility functions
renderForm(
"__form_slug__",
"fetch_form",
onComplete,
onLoad
);
</script>
</html>
간단한 반응 예제
www.fetchforms.io/docs/fetch-forms-react에서 자세히 보기
import React, { useState } from "react";
import { FetchForm } from "@fetchforms/react";
const ManagedForm = () => {
const [formSubmission, setFormSubmission] = useState(null);
const [formName, setFormName] = useState("");
const onSubmit = async (values) => {
/* To show an error on the form, uncomment the line below */
// return 'There was an error submitting the form.';
setFormSubmission(values);
};
const onLoad = async (values) => {
setFormName(values.name);
};
return (
<div className="">
<div className="text-3xl mb-2">Component Form</div>
<p className="text-gray-600">
The easiest way to use Fetch Forms. Pass in a form slug and we'll handle
client-side validation, input formatting, submissions, and styling.
</p>
<br />
<div>
<h2 className="text-2xl">{formName}</h2>
<FetchForm slug={__form_slug__} onSubmit={onSubmit} onLoad={onLoad} />
<br />
{formSubmission && <pre>{JSON.stringify(formSubmission, null, 2)}</pre>}
</div>
</div>
);
};
사용자 지정 구성 요소 예제 사용
이 예제는 Ant Design을 구성 요소 라이브러리로 사용하고 있습니다.
www.fetchforms.io/docs/fetch-forms-react에서 전체 작동 예제를 참조하십시오.
import React, { useState } from "react";
import "antd/dist/antd.css";
import { useFetchForms } from "@fetchforms/react";
import { Form, Input, Button, Checkbox, Select, Radio, InputNumber, Alert } from "antd";
const CustomFetchForm = () => {
const [fetchForm, loading, error, doCloudSubmit] = useFetchForms("__form_slug__");
// Called when submission passes client-side validation
const onFinish = async (values) => {
if (fetchForm.cloudSave) {
console.log("Saving to the Fetch Form's cloud");
try {
const isSaved = await doCloudSubmit(fetchForm.id, values);
if (!isSaved) {
throw new Error("There was an error submitting your form.");
}
} catch (err) {
console.error(err);
}
}
};
const onFinishFailed = (errorInfo) => {
console.log("Failed:", errorInfo);
};
// This takes the validation rules from the Fetch form and formats them for
// the Ant Design form component.
const createValidationRules = (fieldType, validations) => {
const rules = validations.map((validation) => {
if (validation.rule === "required") {
return { required: true, message: validation.message };
} else if (validation.rule === "regex") {
return {
pattern: new RegExp(validation.limit),
message: validation.message
};
} else {
return {
[validation.rule]: validation.limit,
message: validation.message,
type: fieldType === "number" ? "number" : "string"
};
}
});
return rules;
};
// Builds out the field based on it's configuration
const dynamicField = (item) => {
switch (item.fieldType) {
case "select":
const { Option } = Select;
return (
<Select key={item.name}>
<Option value=""></Option>
{item.options.map((option) => (
<Option value={option.value} key={option.value}>
{option.label}
</Option>
))}
</Select>
);
case "checkbox":
return <Checkbox key={item.name} />;
case "textarea":
const { TextArea } = Input;
return <TextArea key={item.name} />;
case "number":
return <InputNumber key={item.name} />;
case "radio":
return (
<Radio.Group>
{item.options.map((opt) => (
<Radio value={opt.value} key={opt.value}>
{opt.label}
</Radio>
))}
</Radio.Group>
);
default:
return <Input {...item.fieldHtml} key={item.name} />;
}
};
return (
<div className="">
{loading ? (
<div>Loading...</div>
) : (
fetchForm && (
<Form
name="HookForm"
labelCol={{ span: 6 }}
wrapperCol={{ span: 18 }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
noValidate
>
{fetchForm.formItems.map((item, i) => (
<Form.Item
key={i}
label={item.label}
name={item.name}
valuePropName={
item.fieldType === "checkbox" ? "checked" : "value"
}
rules={createValidationRules(item.fieldType, item.validation)}
validateTrigger="onBlur"
>
{dynamicField(item)}
</Form.Item>
))}
<Form.Item
wrapperCol={{
span: 8,
offset: 6
}}
>
<Button type="primary" htmlType="submit">
{fetchForm.submitText}
</Button>
</Form.Item>
</Form>
)
)}
</div>
);
};
Fetch Forms는 개발자가 양식을 쉽게 작성하고 관리하여 더 중요한 일에 집중할 수 있도록 도와주는 헤드리스 양식 작성기입니다. 헤드리스 웹사이트, JAMstack 웹사이트 및 웹 앱에 적합합니다.
웹사이트: www.fetchforms.io
문서: www.fetchforms.io/docs
트위터:
Reference
이 문제에 관하여(개발자를 위한 양식 작성기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/lukefrogger/the-form-builder-for-developers-5afc텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
