Jotform Anywhere.

Add a form builder into your website builder.



See it in action

Jotform Anywhere is a small JavaScript SDK that brings the capabilities of Jotform Form Builder to all web apps.

Jotform Anywhere provides a set of client side functionality to let you add a Form Builder inside your web app.Your users can create/edit and embed forms without leaving your site.


7500+ Ready-to-use Form Templates

Users can directly embed forms from over 7500 beautiful form templates with just a few clicks.

Ready to use Form Templates

Form Builder

Let your users create any kind of web forms with 25+ form question types and 350+ widgetss.

Jotform Form Builder

Copy and paste this code in order to initialize javascript library:

  <script type="text/javascript" src="//js.jotform.com/JotFormAnywhere.js"></script>

Copy and paste html code below to add a button that launches a form builder

  <button onclick="JotFormAnywhere.launchFormBuilder({});">Add Form</button>

Clicking that button will launch Jotform iframe (embeddable form builder) and created/selected form will be appended to body by default. Check out documentation for further customization options.


Demo Download

What is Jotform Anywhere?

Jotform is an online form builder. By using Jotform's drag & drop form editor and its 7500+ ready-to-use form templates, creating forms is quick, easy, and fun.

Jotform Anywhere is a small JavaScript SDK that brings the capabilities of Jotform Form Builder to all web apps. You can embed Jotform Form Builder to your app easily, and your users will be able launch the form builder as a lightbox wizard, create their forms and add them to their web pages.


Who is Jotform Anywhere for?

Jotform Anywhere is especially useful for website builders and blog providers.But, any kind of web app that needs to let users create web forms can use it.


What capabilities does Jotform Anywhere currently have?

1. Add Form
Your users can add a form to anywhere on the page. Adding a form will launch a wizard in a modal box.Your users can select from one of the 7500+ ready made form templates or use form builder to create their form.

2. Edit/Delete Form
Once a form is added on your editor, user can hover over the form and click on Edit button to re-launch the form builder wizard.

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.

If you have other needs please contact us.We'd be happy to implement additional functionality to support a tighter integration.


Are there any requirements or restrictions?

You can use Jotform Anywhere without permission. We do not require you to get an API key or fill an application. Simply copy and paste the code samples and you are ready to go.

There is no restrictions on the amount of use. You can place it on any page on your web app.


Do My Users Need to Create a Jotform Account?

No, they do not need to have a Jotform account to create forms or get their form submissions emailed. Since they will enter an email address to get their form submissions we accept the email address as a registration and we create guest accounts in the background.


Why Should I use Jotform Anywhere?

If you have a platform where users asks to be able to create forms to their pages Jotform Anywhere is a great way to provide them this functionality.


What I Should Do If I have Further Questions?

Please feel free to contact us.We will be happy to help you with your questions and if you need further help we will assign a developer to you to help with integration.


Load JotformAnywhere javascript library

  <script type="text/javascript" src="//js.jotform.com/JotFormAnywhere.js"></script>

After loading the script above you can use JotformAnyhere object. This JS object provides neccessary methods to enable web sites to create and embed forms through Jotform.


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.

Most probably you will call this method as callback of a click event.

Example
JotFormAnywhere.launchFormBuilder({
builderMaskColor: "#FFFFFF"
})
Parameters
Name Type Description
options Object

See Options below

Options
Property Type Description Argument Default
formID String If given builder directly shows editor for corresponding form. Optional undefined
insertTo String DOM css selector where Jotform builder iframe will be appended to. Optional undefined
returnIframe Boolean true to obtain jotForm builder iframe element, builder iframe will not be rendered. Optional false
openInModal Boolean false to not to open builder in modal box. Optional true
builderMaskColor String CSS color code for builder modal box mask. Optional "#000000"
remember Boolean false to not to remember last user's email Optional true

JotFormAnywhere.insertForm

JotFormAnywhere.insertForm creates a div with id "jotform_form_container_{formID}" and embeds the form inside.

Using this method to put form inside your web page is strongly recommended on both edit and live stages

Example
JotFormAnywhere.insertForm({
formID: "30647084188965",
insertTo: "#formHere",
putEditButton: false,
putDeleteButton: false
})
Parameters
Name Type Description
options Object

See Options below

Options
Property Type Description Argument Default
formID String Form id to be inserted Required null
insertTo String CSS selector of DOM element where form will be inserted. If you do not provide it the form will be appended to body. Optional "body"
putEditButton Boolean Add edit button in front of form. Optional true
putDeleteButton Boolean Add delete button in front of form. Optional 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.

Example
JotFormAnywhere.createInstantForm({
email: "me@example.com",
templateName: "contact-us"
})
Parameters
Name Type Description
options Object

See Options below

Options
Property Type Description Argument Default
email String Email which will be used during form creation Required undefined
templateName String Jotform Form Template name (https://www.jotform.com/form-templates/contact-form) Required undefined
See demo

JotFormAnywhere.editForm

You can open edit screen of inserted forms with this method so users do not have to edit their forms through "Edit Form" button.

Example
JotFormAnywhere.editForm(
"31343042093342"
)
Parameters

This method takes only one required parameter as form-id

Name Type Description
formID String

See Options below


JotFormAnywhere.deleteForm

You can delete inserted forms with this method so users do not have to delete their forms through "Delete Form" button.

Example
JotFormAnywhere.deleteForm(
"31343042093342"
)
Parameters

This method takes only one required parameter as form-id

Name Type Description
formID String

See Options below

See demo

JotFormAnywhere.subscribe

JotFormAnywhere.subscribe method attaches handler to an event defined by JS library and invokes your callback when the event fires.

Example

You will probably want to be notified with related data when the form is successfully created on Jotform.

JotFormAnywhere.subscribe("jotform.formCreated", 
function(response){
console.log("Form is created with properties:", response)
}
)

Or when form was updated

JotFormAnywhere.subscribe("jotform.formUpdated", 
function(response){
console.log("Form is updated with properties:", response)
}
)
Events

Global events you can subscribe:

  • jotform.formCreated - fired when form created on Jotform
  • jotform.formUpdated - fired when form edited and saved on Jotform
  • jotform.formDeleted - fired when form deleted
  • jotform.formLoaded - fired when form iframe fully loaded

The response object passed into the callback function for formCreated and formUpdated events looks like the following:

{
formEmbedUrl:"https://form.jotformpro.com/jsform/30654794751967">", 
height:465, 
width:320, 
formID:"30654794751967", 
}

The response object passed into the callback function for formDeleted and formLoaded event looks like the following:

{
formID:"30654794751967", 
}

JotFormAnywhere.customize

With JotFormAnywhere.customize method you can customize default colors of the Jotform iframe

Example
JotFormAnywhere.customize({
formBuilderBarColor: "#FFFFFF",
primaryButtonColor: "#FF00FF",
primaryButtonHoverColor: "blue"
})
Parameters
Name Type Description
options Object

See Options below

Options
Property Type Description Argument Default
formBuilderBarColor String Jotform builder toolbar color Optional #FC7C03
primaryButtonColor String Main action button color Optional #139045
primaryButtonHoverColor Boolean Main action button hover color Optional #16a24e
See demo