개요
Jform Anywhere는 Jfrom 양식 빌더의 기능을 모든 웹 앱에 제공하는 작은 JavaScript SDK입니다.
Jform Anywhere는 웹 앱 내에 양식 빌더를 추가할 수 있는 일련의 클라이언트 측 기능을 제공합니다. 사용자는 사이트를 떠나지 않고도 양식을 생성/편집하고 삽입할 수 있습니다.
7500개 이상의 즉시 사용 가능한 양식 템플릿
사용자는 단 몇 번의 클릭만으로 7500개가 넘는 아름다운 양식 템플릿의 양식을 직접 포함할 수 있습니다.

양식 빌더
사용자가 25개 이상의 양식 질문 유형과 350개 이상의 위젯을 사용하여 모든 종류의 웹 양식을 만들 수 있도록 하세요.

빠른 사용
자바스크립트 라이브러리를 초기화하려면 다음 코드를 복사하여 붙여넣으세요.
<script type="text/javascript" src="//js.jotform.com/JotFormAnywhere.js"></script>
양식 작성기를 실행하는 버튼을 추가하려면 아래 HTML 코드를 복사하여 붙여넣으세요.
<button onclick="JotFormAnywhere.launchFormBuilder({});">Add Form</button>
그 버튼을 클릭하면 Jform iframe(임베드 가능한 양식 빌더)이 시작되고 선택한 양식이 기본적으로 본문에 추가됩니다. 추가적인 사용자 정의 옵션에 대한 자세한 내용은 문서를 확인하세요.
데모 써보기
데모를 시도하고 소스 코드를 다운로드해보세요.
예시
다음은 Jform Anywhere 통합의 몇 가지 예입니다. Jform Anywhere와 통합하셨나요? 우리에게 알려주세요.
- Breezi가 Jform Anywhere를 사용하는 방법 on their website builder as a form builder.
- Sidengo는 Jform Anywhere를 활용해 사용자가 개인화된 양식을 만들 수 있도록 지원합니다.
Jform Anywhere FAQ
c란 무엇입니까?
Jform은 온라인 양식 작성 도구입니다. Jform의 드래그 앤 드롭 양식 편집기와 즉시 사용 가능한 7500개 이상의 양식 템플릿을 사용하면 양식을 빠르고 쉽고 재미있게 만들 수 있습니다.
Jform Anywhere는 모든 웹 앱에 Jform 양식 빌더의 기능을 제공하는 작은 JavaScript SDK입니다. Jform 양식 빌더를 앱에 쉽게 임베드할 수 있으며, 사용자는 라이트박스 위젯으로 양식 빌더를 시작하여 양식을 만들고 웹 페이지에 추가할 수 있습니다.
Jform Anywhere는 누구를 위한 것인가요?
Jform Anywhere는 웹사이트 제작자와 블로그 제공자에게 특히 유용합니다. 그러나 사용자가 웹 양식을 만들 수 있도록 해야 하는 모든 종류의 웹 앱에서 사용할 수 있습니다.
Jform Anywhere에는 현재 어떤 기능이 있나요?
1. 양식 추가
사용자는 페이지의 어느 위치에나 양식을 추가할 수 있습니다. 양식을 추가하면 모달 상자에서 마법사가 시작됩니다. 사용자는 7500개 이상의 기성 양식 템플릿 중 하나를 선택하거나 양식 작성기를 사용하여 양식을 만들 수 있습니다.
2. 양식 편집/삭제
양식이 편집기에 추가되면 사용자는 양식 위에 마우스를 놓고 편집 버튼을 클릭하여 양식 작성 마법사를 다시 시작할 수 있습니다.
3. Get Form Code
JotformAnywhere javaScript library returns a form code so that you can place it on the live version of the site.You can also get additional data such as the width/height of the form from JotformAnywhere.
다른 요구 사항이 있는 경우 저희에게 문의하세요. 더욱 긴밀한 통합을 지원하기 위해 추가 기능을 구현해 드리겠습니다.
요구 사항이나 제한 사항이 있나요?
허가 없이 Jform Anywhere를 사용할 수 있습니다. 우리는 귀하에게 API 키를 받거나 신청서를 작성할 것을 요구하지 않습니다. 코드 샘플을 복사하여 붙여넣기만 하면 바로 사용할 수 있습니다.
사용량에는 제한이 없습니다. 웹 앱의 모든 페이지에 배치할 수 있습니다.
내 사용자가 Jform 계정을 만들어야 합니까?
아니요. 양식을 작성하거나 양식 제출을 이메일로 받기 위해 Jform 계정이 필요하지 않습니다. 양식 제출을 위해 이메일 주소를 입력하므로 우리는 이메일 주소를 등록으로 받아들이고 백그라운드에서 게스트 계정을 생성합니다.
왜 Jform Anywhere를 사용해야 합니까?
사용자가 자신의 페이지에 양식을 만들 수 있도록 요청하는 플랫폼이 있는 경우 Jform Anywhere는 이 기능을 제공하는 좋은 방법입니다.
추가 질문이 있는 경우 어떻게 해야 합니까?
문의 사항이 있으시면 언제든지 저희에게 연락해주세요. 궁금한 점이 있으면 기쁜 마음으로 도와드리겠습니다. 추가적인 도움이 필요하시면 통합에 대해 도와드릴 개발자를 지정해드리겠습니다.
문서
JotformAnywhere 자바스크립트 라이브러리 로드
<script type="text/javascript" src="//js.jotform.com/JotFormAnywhere.js"></script>
위의 스크립트를 로드한 후에는 JotformAnywhere 객체를 사용할 수 있습니다. 이 JS 객체는 Jform을 통해 양식을 만들고 임베드하는 데 필요한 메서드를 제공합니다.
Methods
JotFormAnywhere.launchFormBuilder
If no option is provided JotFormAnywhere.launchFormBuilder will open a modalbox including iframe provided by Jotform. All form creation/edit process is done inside this iframe.
아마도 이 메서드를 클릭 이벤트의 콜백으로 호출할 것입니다.
예
JotFormAnywhere.launchFormBuilder({ builderMaskColor: "#FFFFFF" })
매개변수
이름 | 유형 | 설명 |
---|---|---|
options | Object |
아래 옵션을 참조하세요 |
옵션들
속성 | 유형 | 설명 | 인자 | 기본설정 |
---|---|---|---|---|
formID |
스트링 | 주어진 빌더가 해당 양식에 대한 편집기를 직접 표시합니다. | 선택적인 | undefined |
insertTo |
스트링 | Jform 빌더 iframe이 추가될 DOM CSS 선택기입니다. | 선택적인 | undefined |
returnIframe |
연산자 | Jform 빌더 iframe 요소를 얻으려면 true 로 설정하세요. 빌더 iframe이 렌더링되지 않습니다. |
선택적인 | false |
openInModal |
연산자 | 모달 상자에서 빌더를 열지 않으려면 false 입니다. |
선택적인 | true |
builderMaskColor |
스트링 | 빌더 모달 박스 마스크의 CSS 색상 코드입니다. | 선택적인 | "#000000" |
remember |
연산자 | false 마지막 사용자의 이메일을 기억하지 않습니다 |
선택적인 | true |
JotFormAnywhere.insertForm
JotFormAnywhere.insertForm creates a div with id "jotform_form_container_{formID}" and embeds the form inside.
이 방법을 사용하여 양식을 웹 페이지에 넣는 것은 편집 및 라이브 단계에서 강력히 권장됩니다.
예
JotFormAnywhere.insertForm({ formID: "30647084188965", insertTo: "#formHere", putEditButton: false, putDeleteButton: false })
매개변수
이름 | 유형 | 설명 |
---|---|---|
options | Object |
아래 옵션을 참조하세요 |
옵션들
속성 | 유형 | 설명 | 인자 | 기본설정 |
---|---|---|---|---|
formID |
스트링 | 삽입할 양식 ID | 필수 | null |
insertTo |
스트링 | DOM 요소의 CSS 선택자를 제공하면 양식이 해당 요소에 삽입됩니다. 제공하지 않으면 양식이 본문에 추가됩니다. | 선택적인 | "body" |
putEditButton |
연산자 | 양식 앞에 편집 버튼을 추가합니다. | 선택적인 | true |
putDeleteButton |
연산자 | 양식 앞에 삭제 버튼을 추가합니다. | 선택적인 | true |
JotFormAnywhere.createInstantForm
Using JotFormAnywhere.createInstantForm method you can instruct JotformAnywhere library to create a form immediately after loading javascript file. Note that calling this method will publish jotform.formCreated event which you can subscribe to.
예
JotFormAnywhere.createInstantForm({ email: "[email protected]", templateName: "contact-us" })
매개변수
이름 | 유형 | 설명 |
---|---|---|
options | Object |
아래 옵션을 참조하세요 |
옵션들
속성 | 유형 | 설명 | 인자 | 기본설정 |
---|---|---|---|---|
email |
스트링 | 양식 작성 시 사용될 이메일 | 필수 | undefined |
templateName |
스트링 | Jform 양식 템플릿 이름(https://www.jotform.com/form-templates/contact-form) | 필수 | undefined |
JotFormAnywhere.editForm
이 방법을 사용하면 삽입된 양식의 편집 화면을 열 수 있으므로 사용자는 "양식 편집" 버튼을 통해 양식을 편집할 필요가 없습니다.
예
JotFormAnywhere.editForm( "31343042093342" )
매개변수
이 메소드는 하나의 필수 매개변수만 form-id로 사용합니다.
이름 | 유형 | 설명 |
---|---|---|
formID | String |
아래 옵션을 참조하세요 |
JotFormAnywhere.deleteForm
이 방법을 사용하면 삽입된 양식을 삭제할 수 있으므로 사용자가 "양식 삭제" 버튼을 통해 양식을 삭제할 필요가 없습니다.
예
JotFormAnywhere.deleteForm( "31343042093342" )
매개변수
이 메소드는 하나의 필수 매개변수만 form-id로 사용합니다.
이름 | 유형 | 설명 |
---|---|---|
formID | String |
아래 옵션을 참조하세요 |
JotFormAnywhere.subscribe
JotFormAnywhere.subscribe method attaches handler to an event defined by JS library and invokes your callback when the event fires.
예
Jform에서 양식이 성공적으로 생성되면 관련 데이터에 대한 알림을 받고 싶을 것입니다.
JotFormAnywhere.subscribe("jotform.formCreated", function(response){ console.log("Form is created with properties:", response) } )
또는 양식이 업데이트되었을 때
JotFormAnywhere.subscribe("jotform.formUpdated", function(response){ console.log("Form is updated with properties:", response) } )
이벤트
구독할 수 있는 글로벌 이벤트:
- jotform.formCreated - Jform에서 양식이 생성되면 실행됩니다.
- jotform.formUpdated - 양식을 편집하고 Jform에 저장하면 실행됩니다.
- jotform.formDeleted - 양식이 삭제되면 실행됩니다.
- jotform.formLoaded - iframe 양식이 완전히 로드되면 실행됩니다.
formCreated 및 formUpdated 이벤트에 대한 콜백 함수에 전달된 응답 객체는 다음과 같습니다:
{ formEmbedUrl:"https://form.jotformpro.com/jsform/30654794751967">", height:465, width:320, formID:"30654794751967", }
formDeleted 및 formLoaded 이벤트에 대한 콜백 함수에 전달된 응답 객체는 다음과 같습니다:
{ formID:"30654794751967", }
JotFormAnywhere.customize
With JotFormAnywhere.customize method you can customize default colors of the Jform iframe
예
JotFormAnywhere.customize({ formBuilderBarColor: "#FFFFFF", primaryButtonColor: "#FF00FF", primaryButtonHoverColor: "blue" })
매개변수
이름 | 유형 | 설명 |
---|---|---|
options | Object |
아래 옵션을 참조하세요 |
옵션들
속성 | 유형 | 설명 | 인자 | 기본설정 |
---|---|---|---|---|
formBuilderBarColor |
스트링 | Jform 빌더 도구 모음 색상 | 선택적인 | #FC7C03 |
primaryButtonColor |
스트링 | 기본 작업 버튼 색상 | 선택적인 | #139045 |
primaryButtonHoverColor |
Boolean | 기본 작업 버튼 호버 색상 | 선택적인 | #16a24e |