#1
  1. A Change of Season
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,548
    Rep Power
    221

    Best approach to make form Widget


    Hi;

    I want to make a product where my clients can log in, build simple forms (max 5 fields), grab the code for the form and add to their websites. Basically simple form widgets.

    In the past, I did it with this approach
    Code:
    <div id = "form_to_ad"> <script type="text/javascript" src="https://timers.site.com/form/bc.php" data-id="1132" data-lt="broadcast"></script></div>
    And this is the JS that loads the iframe

    Code:
    (function(window)
        { 
             
                var currentScript = document.currentScript; 
                var apiUrl = currentScript.src; 
    
                if (!('jQuery' in window))
                    { 
                        loadJQuery(initialize); 
                    }
                else 
                    { 
                        initialize(); 
                    } 
                function loadJQuery(cb)
                    { 
                        var script = document.createElement('script'); 
                        script.src = 'https://code.jquery.com/jquery-3.3.1.min.js'; 
                        script.type = 'text/javascript'; 
                        script.addEventListener('load', cb); 
                        document.getElementsByTagName('head')[0].appendChild(script); 
                    } 
                function initialize()
                    { 
                        //Validate 
                        var $currentScript = $(currentScript); 
                        var params = $.param({ 
                            action: 'load-template' 
                            , launch_owner_email_hashed: $currentScript.data('launch_owner_email_hashed') 
                            , launch_id: $currentScript.data('launch_id') 
                        }); 
    
                        $.get(apiUrl, params).then(function(html){ 
                            var div = $('<div style="margin:0; padding: 0;">').html(html); 
                            $currentScript.after(div); 
                        });
    
                    }
    
    
        }
    (this));
    I wanna take some ideas before starting. What do you recommend as simple, fast and good option? Best approach to make form Widget. Are there any other ways than doing this Iframe approach?


    Thanks
    Last edited by English Breakfast Tea; June 30th, 2018 at 06:11 PM.
  2. #2
  3. Impoverished Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,829
    Rep Power
    9646
    What is the form for, how does it work, and how will it be used?
  4. #3
  5. A Change of Season
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,548
    Rep Power
    221
    Originally Posted by requinix
    What is the form for, how does it work, and how will it be used?
    Capture name and email, store into the database, pass to another API endpoint, redirect to some page.

    Example
  6. #4
  7. Impoverished Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,829
    Rep Power
    9646
    Javascript sounds too complicated. You can probably guess the form's rough dimensions, so an iframe should be fine.
  8. #5
  9. A Change of Season
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,548
    Rep Power
    221
    Originally Posted by requinix
    Javascript sounds too complicated. You can probably guess the form's rough dimensions, so an iframe should be fine.
    I heard in a few places iframes will be deprecated (blocked from devices etc). Worth doing the job? Or is this deprecation Bs?
    Last edited by English Breakfast Tea; July 2nd, 2018 at 09:46 PM.
  10. #6
  11. Wiser? Not exactly.
    Devshed God 2nd Plane (6000 - 6499 posts)

    Join Date
    May 2001
    Location
    Bonita Springs, FL
    Posts
    6,270
    Rep Power
    4193
    I highly doubt iframes are being deprecated. They are very widely used for things like sandboxing third-party content (ie, ads, widgets, etc), as a simple integration method, and for WYSIWYG editors.

    <frame> is deprecated/gone, but <iframe> is here to stay as far as I know.
    Recycle your old CD's



    If I helped you out, show some love with some reputation, or tip with Bitcoins to 1N645HfYf63UbcvxajLKiSKpYHAq2Zxud
  12. #7
  13. A Change of Season
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,548
    Rep Power
    221
    Thoughts on this approach?
    <script type="text/javascript" src="https://behnams.formstack.com/forms/js.php/test"></script><noscript><a href="https://behnams.formstack.com/forms/test" title="Online Form">Online Form - test</a></noscript><div style="text-align:right; font-size:x-small;"><a href="http://www.formstack.com?utm_source=jsembed&utm_medium=product&utm_campaign=product+branding&fa=h,3118029" title="Powered by Formstack">Powered by Formstack</a></div>
  14. #8
  15. A Change of Season
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,548
    Rep Power
    221
    I am just gonna give them iframe embed option. Js will be too messy. Look at competition:

    Code:
    <script type="text/javascript" src="https://behnams.formstack.com/forms/js.php/test"></script><noscript><a href="https://behnams.formstack.com/forms/test" title="Online Form">Online Form - test</a></noscript><div style="text-align:right; font-size:x-small;"><a href="http://www.formstack.com?utm_source=jsembed&utm_medium=product&utm_campaign=product+branding&fa=h,3118029" title="Powered by Formstack">Powered by Formstack</a></div>

IMN logo majestic logo threadwatch logo seochat tools logo