JotForm Logo

JotForm
Anywhere.

Embed 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.



Form Builder

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


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

  • How Breezi uses JotForm Anywhere on their website builder as a form builder.
  • Sidengo uses JotForm Anywhere to let users Create Personalized Forms.
  • What is JotForm Anywhere?

    JotForm is an online form builder. 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 Optionsbelow

    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 embed 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 Optionsbelow

    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