Recently I realised loading ConvertKit forms was costing me four seconds of load time. Four seconds!

Here's the super simple form we had on our page at Discover Discomfort:

Both GTMetrix (Vancouver) and my own personal experience saw it taking between four to six seconds to load. I'd sit around waiting for the form to load.

This is such a simple form. There has to be an easier way, right? There is.

Two steps in this: 1. Create the form using CK and copy the relevant code and 3. Make the form in your website using HTML.

Step 1. Create the form using ConvertKit

Using whatever method you want — script being the simplest one, but you can install the WordPress plugin if you want — create the form on your website.

Then load your website and copy the HTML block that's for the form. It should look something like this (actually, this is just a fraction of it):

<div align="center"><form action="https://app.convertkit.com/forms/724551/subscriptions" class="seva-form formkit-form" method="post" data-sv-form="724551" data-uid="3f062f6e87" data-format="inline" data-version="5" min-width="400 500 600 700"><div data-style="clean"><ul class="formkit-alert formkit-alert-error" data-element="errors" data-group="alert"></ul><div data-element="fields" data-stacked="false" class="seva-fields formkit-fields"><div class="formkit-field"><input type="text" class="formkit-input" aria-label="Your first name" style="border-color:#e3e3e3;border-radius:4px;color:#000;font-weight:400" name="fields[first_name]" placeholder="Your first name"></div><div class="formkit-field"><input type="text" class="formkit-input" name="email_address" style="border-color:#e3e3e3;border-radius:4px;color:#000;font-weight:400" placeholder="Your best email"></div><button data-element="submit" class="formkit-submit formkit-submit" style="background-color:#b6c6c9;border-radius:4px;color:#fff;font-weight:700"><div class="formkit-spinner"><div></div><div></div><div></div></div><span>Join</span></button></div></div><style>.formkit-form[data-uid="3f062f6e87"] *{font-family:"Helvetica Neue",Helvetica,Arial,Verdana,sans-serif;box-sizing:border-box;}.formkit-form[data-uid="3f062f6e87"] legend{border:none;font-size:inherit;margin-bottom:10px;padding:0;position:relative;display:table;}.formkit-form[data-uid="3f062f6e87"] fieldset{border:0;padding:0.01em 0 0 0;margin:0;min-width:0;}.formkit-form[data-uid="3f062f6e87"] body:not(:-moz-handler-blocked) fieldset{display:table-cell;}.formkit-form[data-uid="3f062f6e87"] p{color:inherit;font-size:inherit;font-weight:inherit;}.formkit-form[data-uid="3f062f6e87"][data-format="modal"]{display:none;}.formkit-form[data-uid="3f062f6e87"][data-format="slide in"]{display:none;}.formkit-form[data-uid="3f062f6e87"] .formkit-input,.formkit-form[data-uid="3f062f6e87"] .formkit-select,.formkit-form[data-uid="3f062f6e87"] .formkit-

Yes, this abomination is what is needed to render this super-simple form:

    Step 2. Create the simplified form

    If you examine the code you'll see it has two sections, a form and a massive style block.

    Form section

    The form is just a regular HTML form with a few modifications.

    • The action points to your form you want to subscribe people to
    • You have to specify the "data-uid"
    • You have to specify data-format and data-version
    • You have to name the fields to correspond with your form

    The easiest way to get these is just to copy the form code from the above block and strip it down.

    The style block

    The style block can be cut down a lot. I wanted to make just a responsive inline form. I wrote the following to make that work, but it's fairly easy to make modifications (with a bit of googling) to make any format work.

    <style>
    .form-inline {
        display:flex; flex-flow: row wrap; justify-content: center;
    }
    .form-inline input {
        display:inline;
        max-width:30%; 
        margin: 0 10px 0 0; 
        padding: 10px; 
        background-color: #fff;
        border: 1px solid #ddd;
    }
    @media (max-width: 800px) {
        .form-inline input {
            margin: 10px 0;
            max-width:100% !important;
        }
        .form-inline {flex-direction: column;
            align-items: stretch;
        }
    }
</style>

<div align="center">
    <form class="form-inline" action="https://app.convertkit.com/forms/724551/subscriptions" method="post" data-uid="3f062f6e87" data-format="inline" data-version="5">
        <input name="fields[first_name]" type="text" placeholder="Your first name" /> 
        <input name="email_address" type="text" placeholder="Your best email" /> 
        <button type="submit" data-element="submit">Join</button>
    </form>
</div>