How do you handle online forms with Kentico Cloud?

There are a few questions we regularly field when introducing the concept of a headless CMS to people. After explaining the terms 'headless' and 'microservices', we invariably hit the topic of online forms - a staple feature of any traditional web CMS, but curiously absent from the feature list of your modern-day headless CMS.

Andy Thompson pulling a funny face

By Andy Thompson 5 minute read


Why doesn't it just have a Forms module like every other CMS??

Remember, Kentico Cloud's job is not to build your website. You could be producing a mobile app, a single-page (JavaScript) app, a traditional website, or a voice/conversational app. On all of these channels, forms are handled differently. For this reason, Kentico Cloud won't actually render or create your forms for you, but that doesn't mean it can't support your use of forms, even if you are building a website. And that's what this article is all about.

So what if I am building a website, and I do need to build forms? What are my options?

1. Just build them! 

You're building the rest of your website, so build the forms too.

Forms really can be quite simple, compared to some of the fancy stuff in modern websites. And as you keep hearing about Headless CMS, developers enjoy the benefits of being in complete control of the code and presentation.

Example: Simple contact us form that sends an email when submitted.

<form asp-controller="ContactPage" asp-action="Inquiry" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#form-content" class="component-contact-us-form">
    <div class="row">
        <div class="form-wrapper" id="form-content">
            <h3>Make an enquiry</h3>
            <div class="control-group">
                <label asp-for="Name">Your name *</label>
                <input asp-for="Name" type="text" />
                <span asp-validation-for="Name" class="validation-message"></span>
            </div>
            <div class="control-group">
                <label asp-for="Email">Your email *</label>
                <input asp-for="Email" type="email" />
                <span asp-validation-for="Email" class="validation-message"></span>
            </div>
            <div class="control-group">
                <label asp-for="Message">Your message *</label>
                <textarea asp-for="Message"></textarea>
                <span asp-validation-for="Message" class="validation-message"></span>
            </div>
            <button class="btn btn-secondary" type="submit">Submit</button>
        </div>
    </div>
</form>
[HttpPost]
public IActionResult Inquiry(ContactFormViewModel formData)
{
    var message = new MimeMessage();
    message.Subject = $"Website Inquiry";
    message.Body = new TextPart(TextFormat.Html)
    {
        Text = BuildNiceEmailFrom(formData);
    };
    _mailSenderService.SendMail(message);

    return View(formData);
}

(Clearly these code snippets above have been trimmed down and modified for readability, so treat them as pseudo-code; don't try to to copy/paste them into your site!)

2. Embed options in your favourite tools

Many digital marketing services/tools that are designed to augment your website also include really powerful features to integrate into the front end of your site. You might be surprised to find that inserting a MailChimp subscription form, or a Marketo landing page form, is already fully supported by those platforms.

Kentico Cloud's modular content types make it super simple to insert these into your site, so it's as easy as inserting some text or an image, or indeed any other embed code, such as a particularly relevant Giphy.

Embed code content item screenshot

Our 'Embed Code' content type simply has a field to paste in the embed code

Et voila:

3. Use a dedicated forms service πŸ‘

For more complex forms, or where your existing service's embed options just aren't going to cut it, services out there exist purely for building web forms. This is often included in lists of benefits for a microservices approach - you select the best tools to satisfy each of your requirements separately, and bring them together (often accompanied by sweet Voltron references). So don't consider it a workaround. Consider it an opportunity to use the 'best of breed' service and not be locked into using what comes with your CMS.

There are a lot of online form builders out there that allow you to build your own forms and embed them in your site using a simple bit of embed code. They usually include powerful theming features, and the ability to insert and edit custom CSS to make the forms look and feel completely like part of your site.

On our own site, we use Formstack. Due to its customisable embedding options, we even control some of the behaviours and field visibility using special fields on our content types. This was a very simple integration to set up - it only took an hour or two one day - I know because I did it myself!

@model LandingPageForm
@{
    var linkedFileName = Model.CampaignCodename;
    var dropDownType = Model.DropDownType.SelectedItemName();
    var fields = $"field65891204={linkedFileName}&field65965740={dropDownType}";
    var formUrl = $"https://luminary.formstack.com/forms/js.php/download?{fields}";
}
<script type="text/javascript" src="@formUrl"></script>

Benefits of this forms-as-a-service approach include being able to select (and even switch at the last minute) whatever awesome service you want, that has exactly the features you want. For example, you might want one that integrates with your CRM or email marketing system out of the box, or one that can also perform marketing automation for you.

Negatives could include adding another subscription/cost and more user accounts/logins. But hey, you've probably already embraced the microservices approach, so what's one more? 😜

Examples:

Formstack form builder screenshot

Formstack provides a drag and drop form builder interface to rival your favourite traditional CMS

4. Build your own Form Builder 😱

Of course, a headless CMS gives you ultimate flexibility. I can personally guarantee you that it is possible to use Kentico Cloud's content types to quickly build out a model of forms with different types of fields, complete with validation properties and all, just like the traditional CMS form builders we knew and loved. This can be a very powerful solution if you're heading down a truly multi-channel path, because in true headless spirit, you can define your forms in one location and use them on every channel you implement for.

Honestly, in this seasoned headless CMS veteran's opinion... I would consider all other options before going down this path if you're primarily building a website. You're living in a microservices world, and the forms-as-a-service world is your oyster. Why reinvent the wheel? But for the sake of completeness of this article, I have to say... it's possible. Some silly developers may have already done it...

Kentico Cloud form builder prototype screenshot

A prototype form builder in Kentico Cloud

May the Forms be with you

While a headless CMS such as Kentico Cloud doesn't serve up ready-made online forms for you, there's certainly no stopping you using headless CMS and online forms in your project. On the contrary - for our own website, we actually felt empowered to select our CMS of choice, and online form builder of choice. Hopefully the few options I've outlined here will give you a little more confidence piecing together your microservices strategy.


Considering whether a Headless CMS could support your digital strategy?

Talk to one of our headless CMS experts about how a cloud-first content hub could fit into your roadmap.

Get in touch
Blog

7 reasons why content calendars fail

By Tami Strategy 4 minute read

A content calendar can be an extremely powerful tool – if well set-up and maintained. Content Strategist Tami Iseli outlines some of the factors that can reduce the chances of abandonment, along with a downloadable content calendar spreadsheet that automatically syncs your content ideas to a Google calendar.

Blog

Kentico now recommends the MVC development model - what does this mean?

By Andy Kentico, Development 7 minute read

Developers around the world rejoiced to hear that MVC, while having already been an option for Kentico development for years, is now officially the recommended development model as of K12. Marketers around the world smiled and nodded and clinked glasses with the devs, while secretly thinking "what's an MVC?"