How do I pass a dynamic parameter to JotForm embedded form?

  • Profile Image
    ocrmlabs
    Asked on May 15, 2017 at 12:59 PM

    Hello,

    I am trying to work with an embedded lightbox popup and I am struggling with passing through a parameter. I can successfully pass in a hard coded string when using the "iframeParameters" function however I can not pass through a dynamic string (a textbox on the page). My code us currently:

    iframeParameters: { 'subject': document.getElementById("lead_email_address").value },

     This is just passing in a blank subject field however when I do:

    iframeParameters: { 'subject': 'Email Address' },

     This is working. 

    Any assistance would be appreciated.

    Thanks

  • Profile Image
    ashwin_d
    Answered on May 15, 2017 at 02:21 PM

    Hello ocrmlabs,

    Can you please share the complete code which you are trying to use? It will help us figure out the issue you are having.

    Is it possible for you to us jQuery code in your page? If yes, I would suggest you to please try the following code and see if that helps you:

    iframeParameters: { 'subject':  $('#lead_email_address').val();},

     

    We will wait for your response.

    Thank you!

     

  • Profile Image
    ocrmlabs
    Answered on May 16, 2017 at 04:30 AM

    Hi thanks for you response, I tried using jQuery however I am stilling getting the same results. The full code is (wrapped in the standard <script> tag supplied by JotForm however pasting them in here makes the code disappear):

    var JFL_63434163112950 = new JotformFeedback({ formId: '63434163112950', base: 'https://form.jotformpro.com/', iframeParameters: { 'subject': $('#lead_email_address').val() }, windowTitle: 'Sam s Testing form 2', background: '#FFA500', fontColor: '#FFFFFF', type: 'false', height: 500, width: 700, openOnLoad: false });

    This is being triggered by this button:

    <input class="btn lightbox-63434163112950" name="submit_lead" type="submit" />

    I have tried removing the onclick event I added to see if that was causing the issue and the problem is still not fixed.

    Thanks in advance :)

     

  • Profile Image
    ashwin_d
    Answered on May 16, 2017 at 04:51 AM

    Hello ocrmlabs,

    Sorry for the confusion. Can you please let us know the webpage URL where you have added this lightbox email code? That would help us debug the issue you are having.

    We will wait for your response.

    Thank you!

  • Profile Image
    ocrmlabs
    Answered on May 16, 2017 at 06:00 AM

    Hello,

    Sorry for the delay, here is the URL we have this webform hosted: https://billy-hostedjotform-ocrm.opencrm.co.uk/new_website.php

    Thanks in advanced :)

  • Profile Image
    Sven
    Answered on May 16, 2017 at 06:45 AM

    Hi, 

    Thanks for providing the link. I have put a note to @ashwin_d to look into it, and you will be updated via this thread. 

     

    Thank you!

  • Profile Image
    ashwin_d
    Answered on May 16, 2017 at 07:49 AM

    Hello ocrmlabs,

    Please delete all the existing codes you have in your webpage and use the following code:

     

    <input type="text" name="lead_email_address" id="lead_email_address"> <input type="submit" onclick="createLead()" name="submit_lead">

    <input type="submit" style="display: none;" name="hidden_open_jotform" class="btn lightbox-71233645349963">

     

    <script src="https://staging.opencrm.co.uk/wp-content/themes/opencrm/js/jquery-3.1.0.min.js?ver=4.7.4" type="text/javascript"></script>

    <script src="https://form.jotformpro.com/static/feedback2.js" type="text/javascript"> </script> 

    <script type="text/javascript">

        /*

        * Validate Email

        * Checks if an email address is valid

        * @param (string) Email Address to validate

        * @author http://stackoverflow.com/a/46181

        */

        function validateEmail(email) {

            var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

            return re.test(email);

        }

        /*

        * Create Lead

        * This will call the OpenCRM api to create a lead based just on the email address

        * @author William Winter

        */

        function createLead()

        {

            // Get the email address from the form

            var email_address = $("#lead_email_address").val();        

            // Check if the email is valid

            if(validateEmail(email_address)){

                // Do an ajax call to the opencrm api, this URL will change when this goes live

                $.ajax({

                    type: 'POST',

                    url: 'free_trial.php',

                    crossDomain: true,

                    data: {module: "Leads", email: email_address},

                    dataType: 'json'

                });

       var JFL_71233645349963 = new JotformFeedback({

           formId: '71233645349963',

            base: 'https://form.jotformpro.com/',

           iframeParameters: {

               'email': $('#lead_email_address').val()

           },

            windowTitle: 'Free Trial',

           background: '#FFA500',

            fontColor: '#FFFFFF',

           type: '1',

            height: 620,

           width: 700,

            openOnLoad: false

       });

                $("input[name='hidden_open_jotform']").click(); // We need a hidden button on the page to open the jotform, if we use the original button then it opens the form without doing email validation  

            }else{

                // If the email is not valid then we need to alert the user to this

                alert("Email not valid");

            }    

        }

    </script>

    Hope this helps.

    Do get back to us if the issue persists.

    Thank you!

  • Profile Image
    ocrmlabs
    Answered on May 16, 2017 at 08:12 AM

    Thanks, I have changed my code and all is working perfectly now :)