Advanced Forms

support
1

Hello I have transitioned my site from Drupal to Hugo. I love Hugo because it really puts me in control of my content and its fast. The problem is I have relied to much on modules to do a lot of the advanced stuff for me. I have now moved onto migrating a couple of specific forms to collect user data. Some of these forms use conditional fields to hide and show other fields, and populate fields based on previous data entries by the visitor. I haven’t worked much with javascript and have strictly stuck with HTML CSS. But I want to get into designing my own forms so I dont have to rely on third parties.

As you probably can guess this is a major task of having to learn how to design forms from the ground up with this kind of fuctionality. Im starting to wonder if its worth my time to do this. Maybe I am being too purist about this.

I wanted to solicit responses from others to see what solutions they have used to make their sites work and take data from the public. I am a one man show repairing computers and recovering data for the public. Im trying to get my site with some of the functionality I had before a migrated to Hugo. I was wondering if anyone could point me to any resources I can use to learn how to code these forms myself, or sugges a 3rd party replacement for form specific pages. I am going use netlify to publish my site from github and it looks like they have form capabilities.

I left Drupal because of a few reasons, cost (hosting wise) performance (over time) and migration when I did not like what a host was doing. I want to make it less of a headache to be able to migrate my site if a host’s policies become too much for me to handle.

Any help would be greatly appreciated.

2

I use https://www.teamdesk.net/, a commercial service. It’s a frontend over a MS SQL backend, hosted in the US. You can specify a web form in it, that provides an embed code (javascript called from script tag), which you then add to your Hugo page.

You can also then access and process the collected data in the Teamdesk UI, which has a lot of bells and whistles for the data admin you might want to do after you collect the data.

Dislaimer: I’m a Teamdesk “expert” and do a lot of dev work on this platform.

3

If you are using jQuery, it’s not difficult to create conditional fields. Here’s an example: https://formden.com/blog/conditional-form-field

And with a cookies script, you can save the form data and display it on page load.

I did this (save form date to a cookie) on this page: https://www.brightline.org/resources/thinkers50-strategy-at-work-book/

https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js

The code is this:

{{ define "footerScripts" }}
<script>
  
    (function ($) {
        $.fn.serializeJSON = function () {
            var json = {};
            $.map($(this).serializeArray(), function (n, _) {
                json[n['name']] = n['value'];
            });
            return json;
        };
    })($);

    ensureNumber = function (n) {
        n = parseInt(n, 10);
        if (isNaN(n) || n <= 0) {
            n = 0;
        }
        return n;
    };

    saveFormToCookie = function (form) {
        var name = $(form).attr('id');
        var data = $(form).find(":input:not(:hidden)").serializeJSON();
        Cookies.set(name, data, {expires: 365});
    };

    loadFormFromCookie = function (form) {
        var name = $(form).attr('id');
        var data = Cookies.get(name);

        if (typeof data === 'undefined') {
            return;
        }

        JSON.parse(data, function (key, value) {
            if (typeof (value) !== 'object') {
                var el = $(form).find('*[name="' + key + '"]');

                if (el.is('input')) {
                    if (false) {
                        // code formatting stub
                    } else if (el.attr('type') === 'number') {
                        el.val(ensureNumber(value));
                    } else if (el.attr('type') === 'checkbox') {
                        if (el.val() === value) $(el).prop('checked', true);
                    } else if (el.attr('type') === 'radio') {
                        $.each(el, function (_, elc) {
                            if (elc.value === value) $(elc).prop('checked', true);
                        });
                    } else {
                        el.val(value);
                    }
                } else if (el.is('select')) {
                    el.val(value);
                } else if (el.is('textarea')) {
                    el.val(value);
                }
            }
        });
    };
</script>

<script>
    $("#resources-form").submit(function(e) {
        e.preventDefault();
        
        var $form = $(this);
        $.post($form.attr("action"), $form.serialize()).then(function() {
        $("#resources-form").fadeOut();
        $('#js-msg').slideDown();                
        });
    });

    $(function () {
        var form = $('#resources-form');
        if (form.length > 0) {
            loadFormFromCookie(form);
        }
        // loadFormFromCookie(form);
        form.submit(function() {
        saveFormToCookie(this);
        });
    });
                    
</script>

{{ end }}

PS: I’m also using Netlify to handle the forms.

4

Thank you for the recommedation. And the code does not look to hard thank you for the resources guys, I have really been tearing y hair out because I did know where to start. I think im going to try and code this form as I want to gain more experience with JavaScript/query.

5

Hi @scottrlarson,

One way to add advanced forms to your Hugo site is with Kwes.io. It offers an easy way to implement conditional logic on anything, not just fields https://kwes.io/docs/hide-show-logic.

Also, if you’re trying to populate fields using previous answers during the same session you can probably use the answer piping option https://kwes.io/docs/dynamic-data.

I hope this helps.