Explore. Build. Grow
Explore. Build. Grow

Our flexible three-stage framework to craft digital experiences.

Learn more
Expertise
Outcomes
View our portfolio
View our portfolio

Explore our range of digital solutions.

Learn more
Industries
Optimizely
Optimizely

Kentico
Kentico

Umbraco
Umbraco

DXP
Headless
Cloud Platforms
Marketing Optimisation
Contact Us
Contact Us
Explore. Build. Grow
Explore. Build. Grow

Our flexible three-stage framework to craft digital experiences.

Learn more
Expertise
Outcomes
View our portfolio
View our portfolio

Explore our range of digital solutions.

Learn more
Industries
Optimizely
Optimizely

Kentico
Kentico

Umbraco
Umbraco

DXP
Headless
Cloud Platforms
Marketing Optimisation
Contact Us
Home / Insights / ＿

How do you handle online forms with Kontent.ai?

There are a few questions we regularly field when introducing the concept of a Content as a Service 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
Andy Thompson

03 June 2022

5 minute read

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

A headless CMS's job is not to actually build your website. It is likely delivering content to one or more of a mobile app, a single-page (JavaScript) app, a JAMstack website, a voice/conversational app, or it could be one relatively small part of a larger Composable DXP architecture. In all of these scenarios, forms might handled differently. For this reason, Kontent.ai 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?

This applies to just about every web project we do. So don't worry, there are plenty of good 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 fancier interactive components of modern websites. And as you keep hearing about Headless CMS, developers enjoy the benefits of having complete control of the code and presentation.

If you're on a JAMstack or MACH architecture

If you've fully embraced a JAMstack architecture and your site isn't even running any server-side code, then you're going to want an put the A in JAMstack with an API to handle your form submissions. Thankfully, there are some really great options for doing this.

On our own website (this one!) we have forms as part of our content model in Kontent, which means even though the CMS doesn't directly generate our forms, we can still define them in the CMS right alongside the rest of the content on the site. Content editors can create and add forms to pages without having to be concerned about whether they'll look just right on the site.

Screenshot of Kontent.ai headless CMS showing form element definitions

This is a real screenshot of the configuration of our Contact Us page on this site

When a visitor submits a form, rather than pushing back into the CMS or website front end, it submits directly to the Netlify Forms API. This excellent service provides spam filtering, honeypots, recaptcha (are you a robot?), far more functionality than we'd be likely to implement ourselves. It stores all the submissions in one secure location with team access, handles email notifications, and has excellent support for integrations, in our case via Zapier into our email marketing and marketing automation platform.

If you're running a server-side application

If you're building your website as a traditional server-side application, such as a .NET Core (C#) application, it can be quite straight forward to set up simple forms such as a contact form that sends submissions to a business email address.

Basic form example in C# (.NET Core)

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

Kontent's content types make it super simple to create a model for these so users can just drop them into the right place on a website. In our own Kontent.ai implementation, we have a simple 'Embed Code' content type which makes inserting a form just as easy as inserting a hyperlink or an image, or indeed any other embed code, such as a particularly relevant Giphy.

Embed code content item screenshot

This an actual screenshot of the embed code in this very article!

Et voila:

via GIPHY

3. Harness a deeper integration with your favourite service

You may want to go one step further again than simply embedding a code snippet in your pages to display forms. It's possible to integrate third-party services more deeply into Kontent.ai by using Custom Elements. There is a whole range of examples already available, or you can easily build your own using code samples provided by the Kontent.ai team.

For example, we have built a Custom Element that allows content editors to integrate directly with Hubspot, allowing them to simply insert a 'Hubspot Form' item anywhere in their content, and the interface provides a simple dropdown selector of their available Hubspot forms. Due to most of your favourite services having powerful APIs nowadays, this is likely possible with your favourite CRM or marketing automation platform too.

4. Use a dedicated forms service

For more complex forms, or where your existing service's embed options (or DIY efforts) 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.

One example we've used quite a bit is Formstack. Due to its customisable embedding options, you can even control some of the behaviours and field visibility using special fields in your content type in the CMS.

Benefits of this 'forms-as-a-service' approach include being able to select (and even switch out 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

May the Forms be with you

While a headless CMS such as Kontent.ai 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 our form service of choice. Hopefully the few options I've outlined here will give you a little more confidence piecing together your Composable DXP strategy.

Want to dig deeper into Headless CMS?

Download the Marketer's Guide to Headless CMS
Andy Thompson
Andy Thompson

03 June 2022

5 minute read

Enjoyed this article? Share it...

Considering whether a headless CMS could support your digital strategy?

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

Get in touch

Keep Reading

Want more? Here are some other blog posts you might be interested in.

Follow
Contact Us
1300 554 891
[email protected]

Our locations

Stay informed
Our best articles, observations and news delivered to your inbox
Subscribe
Flags

We acknowledge the Traditional Custodians of the land on which we work, live and engage. We pay respect to Elders past and present.

Luminary is a registered trademark of Luminary Digital Pty Ltd

Terms of Services
Privacy Policy