A newer version of

Freeform

is available.

Try Freeform 5 now →

Freeform Freeform for Craft

Formatting Templates

Conversational

The Conversational formatting template will display 1 field at a time, and smoothly scroll down to the next question until complete. It will appear and behave similarly to how Typeform displays forms, and is also a great choice for survey forms. This formatting template example is not dependent on any frameworks, comes complete and does not require any additional styling unless you wish to do so. You can place the CSS and JS inside the formatting template or add to your site's CSS / JS files.

WARNING

Please note that this formatting template example has some expectations and limitations:

  • You should typically only place 1 field per row. Multiple fields in the same row will otherwise appear stacked on the same page (which may be okay in some cases).
  • Do not include a Submit button in the form layout, as this template adds one automatically.
  • Multiple Select, Dynamic Recipients, Credit Card/Payments, and Save & Continue Later fields/buttons currently are not accounted for in this example. They can of course be added if you put in the work to support it.
  • Multipage forms are not recommended to be used with this formatting template example.

Preview

Conversational Example 1

Conversational Example 2

Video: Preview of Formatting Template Examples

Formatting

{# Opening <form> tag #}
{{ form.renderTag }}

{# Display Success or Error banner and general errors if applicable #}
<div id="freeform-success-error-banner">
    {% if not form.ajaxEnabled and form.submittedSuccessfully %}
        <div class="freeform-form-success">
            {{ form.successMessage | t('freeform') }}
        </div>
    {% endif %}

    {% if form.hasErrors %}
        <div class="freeform-form-errors">
            {{ form.errorMessage | t('freeform') }}

            {% if form.errors|length %}
                <ul>
                    {% for error in form.errors %}
                        <li>{{ error }}</li>
                    {% endfor %}
                </ul>
            {% endif %}
        </div>
    {% endif %}
</div>

{# Render form fields #}
{% for row in form %}
    {% set questionId = loop.index %}
    {% set questionTotal = loop.length %}
    <div id="q{{ questionId }}" class="freeform-page {{ form.customAttributes.rowClass }}">
        <div class="freeform-question">
            {% for field in row %}
                {% set columnClass = form.customAttributes.columnClass %}
                {% if field.type == "submit" or field.type == "save" %}
                    {% set columnClass = columnClass ~ " freeform-column-content-align-" ~ field.position %}
                {% endif %}
                {% if field.type in ["radio_group", "checkbox_group"] %}
                    <div class="freeform-fields {{ columnClass }} freeform-fieldtype-{{ field.type }}"{{ field.rulesHtmlData }}>
                        {{ field.renderLabel({
                            labelClass: "freeform-label" ~ (field.required ? " freeform-required" : "")
                        }) }}
                        {{ field.renderInstructions({
                            instructionsClass: "freeform-instructions"
                        }) }}
                        {% if field.type == "checkbox_group" %}
                            <span>Choose as many as you like</span>
                        {% endif %}
                        {% for index, option in field.options %}
                                <input type="{{ field.type == "radio_group" ? "radio" : "checkbox" }}"
                                    name="{{ field.handle }}{{ field.type == "radio_group" ? "" : "[]" }}"
                                    value="{{ option.value }}"
                                    id="{{ field.idAttribute }}-{{ index }}"
                                    class="form-check-input{{ field.hasErrors ? " freeform-has-errors" }}"
                                        {{ option.checked ? "checked" : "" }}
                                />
                            <label class="option-label" for="{{ field.idAttribute }}-{{ index }}">
                                <span>{{ range('A','Z')[loop.index0] }}</span> {{ option.label|t('freeform')|raw }}
                            </label>
                        {% endfor %}
                        {{ field.renderErrors({
                            errorClass: "freeform-errors"
                        }) }}
                    </div>
                {% elseif field.type in ["checkbox", "mailing_list"] %}
                    <div class="freeform-fields {{ columnClass }} freeform-fieldtype-{{ field.type }}"{{ field.rulesHtmlData }}>
                        <div class="freeform-checkbox">
                            <label for="{{ field.idAttribute }}" class="form-check-label {{ field.hasErrors ? "freeform-has-errors" }} {{ field.required ? "freeform-required" }}">
                                {{ field.renderInput({
                                    class: " form-check-input" ~ (field.hasErrors ? " freeform-has-errors")
                                }) }}
                                <span class="freeform-checkbox-slider"></span>
                                <span class="freeform-checkbox-label {{ field.required ? "freeform-required" }}">{{ field.label|t('freeform') }}</span>
                            </label>
                            {{ field.renderInstructions({
                                instructionsClass: "freeform-instructions"
                            }) }}
                            {{ field.renderErrors({
                                errorClass: "freeform-errors"
                            }) }}
                        </div>
                    </div>
                {% elseif field.type in ["multiple_select", "dynamic_recipients", "cc_details", "save"] %}
                    <div class="freeform-fields {{ columnClass }} freeform-fieldtype-{{ field.type }}"{{ field.rulesHtmlData }}>
                        <p class="freeform-warning">This template does not support the {{ field.type|replace({'_': " ", '-': " "})|title }} field type by default. The affected field handle is: <code>{{ field.handle }}</code></p>
                    </div>
                {% elseif field.type == "submit" %}
                    <div class="freeform-fields {{ columnClass }} freeform-fieldtype-{{ field.type }}"{{ field.rulesHtmlData }}>
                        <p class="freeform-warning">In order for this template to work correctly, it expects that there isn't Submit button in the form layout in the form builder. Please remove this Submit button inside the form builder.</p>
                    </div>
                {% else %}
                    <div class="freeform-fields {{ columnClass }} freeform-fieldtype-{{ field.type }}"{{ field.rulesHtmlData }}>
                        {{ field.render({
                            class: field.type not in ["submit", "save", "signature"] ? "freeform-input" : "",
                            labelClass: "freeform-label" ~ (field.required ? " freeform-required" : ""),
                            errorClass: "freeform-errors",
                            instructionsClass: "freeform-instructions",
                        }) }}
                    </div>
                {% endif %}
            {% endfor %}
            <div class="freeform-buttons">
                {% if questionId != questionTotal %}
                    <a href="#q{{ questionId + '1' }}">Next</a>
                {% endif %}
                {% if questionId == questionTotal %}
                    <button type="submit" class="submit-button" data-freeform-action="submit">Submit</button>
                {% endif %}
                {% if questionId > "1" %}
                    <a href="#q{{ questionId - '1' }}" class="previous">Previous</a>
                {% endif %}
            </div>
        </div>
    </div>
{% endfor %}

{# Closing </form> tag #}
{{ form.renderClosingTag }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118

CSS

The following CSS is a supplemental starting point to get forms appearing robustly.

/* LAYOUT */
html, body {
    scroll-behavior: smooth;
}
.freeform-form-container {
    font-family: sans-serif;
}
.freeform-page {
    background: #212529;
    padding: 0;
    width: 100vw;
    height: 100vh;
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}
.freeform-question {
    font: normal 25px sans-serif;
    color: #ffffff;
    background: transparent;
    padding: 0;
    width: 40vw;
    height: 40vh;
    display: flex;
    align-items: left;
    justify-content: center;
    flex-flow: column nowrap;
}
.freeform-question > div.freeform-fields > label:first-child {
    margin-bottom: 20px;
}
.freeform-fields {
    margin-bottom: 30px;
    display: flex;
    flex-flow: column nowrap;
}
.freeform-warning {
    font: normal 18px sans-serif;
    line-height: 1.5;
    color: #997404;
    background-color: transparent;
    border: 1px solid #997404;
    border-radius: 5px;
    width: 40vw;
    display: block;
    padding: 15px;
}
.freeform-warning code {
    font: monospace;
}
#freeform-success-error-banner,
.freeform-ajax-form-success,
.freeform-ajax-form-errors {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.freeform-form-success,
.freeform-ajax-form-success p,
.freeform-form-errors,
.freeform-ajax-form-errors p {
    font: normal 18px sans-serif;
    color: #ffffff;
    line-height: 1.5;
    text-align: center;
    border-radius: 5px;
    width: 40vw;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
    position: relative;
    justify-content: center;
}
.freeform-form-success,
.freeform-ajax-form-success p {
    background-color: #198754;
    border: 1px solid #198754;
}
.freeform-form-errors,
.freeform-ajax-form-errors p {
    background-color: #dc3545;
    border: 1px solid #dc3545;
}

/* BUTTONS */
button,
.freeform-buttons a {
    font: 400 16px sans-serif;
    line-height: 1.5;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    border: 1px solid #6c757d;
    border-radius: 5px;
    background-color: transparent;
    padding: 5px 15px;
    margin-right: 10px;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.freeform-buttons {
    justify-content: center;
}
.freeform-buttons a, .submit-button {
    font: 400 22px sans-serif;
    border: 1px solid #0d6efd;
    background-color: #0d6efd;
    padding: 10px 25px;
}
.freeform-buttons a:hover, .submit-button:hover {
    color: #ffffff;
    background-color: #0b5ed7;
    border-color: #0a58ca;
}
.freeform-buttons .previous {
    font: 400 16px sans-serif;
    color: #6c757d;
    background-color: transparent;
    border-color: transparent;
}
.freeform-buttons .previous:hover {
    color: #ffffff;
    background-color: transparent;
    border-color: #6c757d;
}

/* BASIC FIELD STYLES */
label.freeform-required:after {
    color: #dc3545;
    content: "*";
    margin-left: 5px;
}
.freeform-instructions {
    font: 200 18px sans-serif;
    color: #6c757d;
    margin-bottom: 20px;
    margin-top: -15px;
    display: block;
}
.freeform-errors {
    padding: 0 25px;
    margin: 0;
}
.freeform-errors li {
    font: 200 16px sans-serif;
    color: #dc3545;
    margin-top: 15px;
}
input,
textarea,
select {
    font: normal 25px sans-serif;
    color: #ffffff;
    background-color: transparent;
    border: 0;
    border-bottom: 2px solid #767676;
    padding: 15px 0;
    width: 100%;
    display: block;
    resize: none;
}
input:focus,
textarea:focus,
select:focus {
    border-bottom: 2px solid #0b5ed7;
    outline: 0;
    transition: border-color .15s ease-in-out;
}
input::placeholder,
textarea::placeholder {
    font: italic 200 18px sans-serif;
    color: #6c757d;
}
input.freeform-has-errors,
textarea.freeform-has-errors,
select.freeform-has-errors {
    border-bottom: 2px solid #dc3545;
}

/* RADIO & CHECKBOX GROUP FIELDS */
input[type="radio"],
input[type="checkbox"] {
    display: none;
}
.freeform-fieldtype-radio_group label:not(:first-child),
.freeform-fieldtype-checkbox_group label:not(:first-child) {
    font: normal 20px sans-serif;
    color: #ffffff;
    background-color: #1d1f23;
    border: 1px solid #767676;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 5px;
    cursor: pointer;
}
.freeform-fieldtype-radio_group label:not(:first-child):hover,
.freeform-fieldtype-checkbox_group label:not(:first-child):hover {
    background-color: #262a2e;
    border: 1px solid #0d6efd;
}
.freeform-fieldtype-checkbox_group span {
    font: italic 15px sans-serif;
    color: #6c757d;
    margin-bottom: 15px;
}
.freeform-fieldtype-radio_group .option-label span,
.freeform-fieldtype-checkbox_group .option-label span {
    font: bold 16px sans-serif;
    color: #6c757d;
    text-align: center;
    background-color: #ffffff;
    border: 1px solid #767676;
    border-radius: 5px;
    width: 17px;
    height: 17px;
    padding: 5px;
    margin: 0 15px 0 0;
    display: inline-block;
}
.freeform-fieldtype-radio_group .freeform-has-errors + label:not(:first-child),
.freeform-fieldtype-checkbox_group .freeform-has-errors + label:not(:first-child) {
    border: 1px dashed #dc3545;
}
input[type="radio"]:checked + label,
input[type="checkbox"]:checked + label {
    color: #0d6efd;
    background-color: #1a1d20;
    border: 1px solid #0d6efd;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
input[type="radio"]:checked + label:after,
input[type="checkbox"]:checked + label:after {
    font: normal 18px sans-serif;
    color: #ffffff;
    content: "✓";
    margin-left: 15px;
}
input[type="radio"]:checked + label span,
input[type="checkbox"]:checked + label span {
    color: #ffffff;
    background-color: #0d6efd;
    border: 1px solid #0d6efd;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

/* OPINION SCALE FIELDS */
.freeform-fieldtype-opinion_scale .opinion-scale-scales label:not(:first-child) {
    font: normal 18px sans-serif;
    color: #ffffff !important;
    background-color: #1d1f23;
    border: 1px solid #767676;
    border-radius: 5px;
    padding: 15px;
    margin: 0;
    cursor: pointer;
}
.freeform-fieldtype-opinion_scale .opinion-scale-scales li:not(:last-child) {
    margin-right: 10px;
}
.freeform-fieldtype-opinion_scale .opinion-scale-scales label:not(:first-child):hover {
    background-color: #262a2e;
    border: 1px solid #0d6efd;
}
.freeform-fieldtype-opinion_scale input[type="radio"]:checked + label,
.freeform-fieldtype-opinion_scale input[type="radio"]:checked + label:hover {
    font-weight: bold;
    color: #0d6efd !important;
    background-color: #ffffff;
    border: 1px solid #0d6efd;
}
.freeform-fieldtype-opinion_scale input[type="radio"]:checked + label:after {
    content: "";
    margin-left: 0;
}
.freeform-fieldtype-opinion_scale .freeform-has-errors + label {
    border: 1px dashed #dc3545 !important;
}
.freeform-fieldtype-opinion_scale .opinion-scale-legends li {
    font: normal 18px sans-serif;
    color: #ffffff;
    padding: 10px 0;
    margin-top: 5px;
}

/* RATING FIELDS */
.freeform-fieldtype-rating .freeform-has-errors + label:not(:first-child) {
    color: #dc3545;
}
.form-rating-field-wrapper input[type="radio"] + label {
    background-color: initial;
    border: initial;
    border-radius: initial;
    width: initial;
    padding: initial;
    margin-right: 15px;
}

/* FILE UPLOAD DRAG & DROP FIELDS */
.freeform-file-drag-and-drop {
    background-color: #1d1f23 !important;
    border: 1px dashed #767676 !important;
}
.freeform-file-drag-and-drop__placeholder {
    font: italic 200 18px sans-serif;
    color: #6c757d;
}
.freeform-file-drag-and-drop [data-messages]>li[data-error],
.freeform-file-drag-and-drop [data-field-errors]>li[data-error] {
    font: 200 16px sans-serif;
    color: #dc3545;
    margin-top: 15px;
}
.freeform-file-drag-and-drop [data-field-errors]>li {
    color: #dc3545;
}

/* SIGNATURE FIELDS */
.freeform-fieldtype-signature button {
    font: 400 16px sans-serif;
    color: #ffffff;
    border: 1px solid #6c757d;
    background-color: transparent;
}
.freeform-fieldtype-signature button:hover {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}
.freeform-fieldtype-signature canvas {
    border: 1px solid #767676;
    border-radius: 5px;
}

/* TABLE FIELDS */
.freeform-fieldtype-table table thead tr th {
    font: 400 16px sans-serif;
    text-align: left;
}
.freeform-fieldtype-table table button[data-freeform-table-remove-row] {
    font-size: 1px;
    margin: 0;
    padding: 0;
    visibility: hidden;
}
.freeform-fieldtype-table table button[data-freeform-table-remove-row]:after {
    font: 400 16px sans-serif;
    color: #b02a37;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    content: "✕";
    border: 1px solid #b02a37;
    border-radius: 5px;
    background-color: transparent;
    padding: 5px 15px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    visibility: visible;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.freeform-fieldtype-table table button[data-freeform-table-remove-row]:hover:after {
    color: #ffffff;
    background-color: #b02a37;
    border-color: #b02a37;
}
.freeform-fieldtype-table button[data-freeform-table-add-row] {
    color: #146c43;
    content: "+";
    border: 1px solid #146c43;
    background-color: transparent;
    margin: 10px 10px 0 0;
    width: 100px;
}
.freeform-fieldtype-table button[data-freeform-table-add-row]:hover {
    color: #ffffff;
    background-color: #146c43;
    border-color: #146c43;
}
.freeform-fieldtype-table button[data-freeform-table-add-row]:after {
    content: "+";
    margin-left: 5px;
}
.freeform-fieldtype-table input[type="checkbox"] {
    display: block;
    transform: scale(2);
}

/* CHECKBOX & MAILING LIST FIELDS */
.freeform-fieldtype-checkbox,
.freeform-fieldtype-mailing_list {
    min-height: 75px;
}
.freeform-checkbox {
    width: 60px;
    height: 34px;
    position: relative;
}
.freeform-checkbox input { 
    opacity: 0;
    width: 0;
    height: 0;
}
.freeform-checkbox-label {
    padding-left: 100px;
    width: 30vw;
    cursor: pointer;
    display: inline-block;
}
.freeform-checkbox-slider {
    background-color: #6c757d;
    border-radius: 5px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    cursor: pointer;
    transition: .4s;
}
.freeform-checkbox-slider:before {
    content: "";
    background-color: #ffffff;
    border-radius: 5px;
    height: 26px;
    width: 26px;
    position: absolute;
    left: 4px;
    bottom: 4px;
    transition: .4s;
}
.freeform-fieldtype-checkbox input:checked + span,
.freeform-fieldtype-mailing_list input:checked + span {
    background-color: #0d6efd;
}
.freeform-fieldtype-checkbox input:focus + span,
.freeform-fieldtype-mailing_list input:focus + span {
    box-shadow: 0 0 1px #0d6efd;
}
.freeform-fieldtype-checkbox input:checked + span:before,
.freeform-fieldtype-mailing_list input:checked + span:before {
    transform: translateX(26px);
}
.freeform-fieldtype-checkbox label.freeform-required:after,
.freeform-fieldtype-mailing_list label.freeform-required:after {
    content: "";
    margin-left: 0;
    display: none;
}
.freeform-fieldtype-checkbox .freeform-checkbox-label.freeform-required:after,
.freeform-fieldtype-mailing_list .freeform-checkbox-label.freeform-required:after {
    color: #dc3545;
    content: "*";
    margin-left: 5px;
}
.freeform-fieldtype-checkbox .freeform-instructions,
.freeform-fieldtype-mailing_list .freeform-instructions {
    margin: 5px 0 0 100px;
    width: 30vw;
}
.freeform-fieldtype-checkbox .freeform-errors,
.freeform-fieldtype-mailing_list .freeform-errors {
    margin: 5px 0 0 100px;
    width: 30vw;
}
.freeform-fieldtype-checkbox input[type="checkbox"].freeform-has-errors + .freeform-checkbox-slider {
    background-color: #dc3545;
}

/* RESPONSIVE */
@media only screen and (max-width: 1600px) {
    .freeform-question {
        width: 50vw;
    }
    .freeform-form-success,
    .freeform-ajax-form-success p,
    .freeform-form-errors,
    .freeform-ajax-form-errors p,
    .freeform-warning {
        width: 50vw;
    }
    .freeform-fieldtype-checkbox .freeform-instructions,
    .freeform-fieldtype-mailing_list .freeform-instructions,
    .freeform-fieldtype-checkbox .freeform-errors,
    .freeform-fieldtype-mailing_list .freeform-errors,
    .freeform-checkbox-label {
        width: 40vw;
    }
}
@media only screen and (max-width: 1300px) {
    .freeform-question {
        width: 70vw;
    }
    .freeform-form-success,
    .freeform-ajax-form-success p,
    .freeform-form-errors,
    .freeform-ajax-form-errors p,
    .freeform-warning {
        width: 70vw;
    }
    .freeform-fieldtype-checkbox .freeform-instructions,
    .freeform-fieldtype-mailing_list .freeform-instructions,
    .freeform-fieldtype-checkbox .freeform-errors,
    .freeform-fieldtype-mailing_list .freeform-errors,
    .freeform-checkbox-label {
        width: 60vw;
    }
}
@media only screen and (max-width: 800px) {
    .freeform-question {
        width: 90vw;
    }
    .freeform-form-success,
    .freeform-ajax-form-success p,
    .freeform-form-errors,
    .freeform-ajax-form-errors p,
    .freeform-warning {
        width: 80vw;
    }
    .freeform-fieldtype-checkbox .freeform-instructions,
    .freeform-fieldtype-mailing_list .freeform-instructions,
    .freeform-fieldtype-checkbox .freeform-errors,
    .freeform-fieldtype-mailing_list .freeform-errors,
    .freeform-checkbox-label {
        width: 70vw;
    }
}

/* SUBMIT LOADING INDICATOR */
button[type=submit].ff-loading {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-align: center;
    align-items: center;
}
button[type=submit].ff-loading:before {
    content: '';
    display: block;
    -ms-flex: 1 0 11px;
    flex: 1 0 11px;
    width: 11px;
    height: 11px;
    margin-right: 10px;
    border-style: solid;
    border-width: 2px;
    border-color: transparent transparent white white;
    border-radius: 50%;
    animation: ff-loading .5s linear infinite;
}
.mt-n1 {
    margin-top: -0.5rem !important;
}
@keyframes ff-loading {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(1turn);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568

JS

The following JS is a supplemental starting point to handle additional elements in the form.

// Adjustments for Success and Errors classes
document.addEventListener('freeform-ready', function (event) {
    event.options.errorClassBanner = 'freeform-ajax-form-errors';
    event.options.errorClassList = 'freeform-errors';
    event.options.errorClassField = 'freeform-has-errors';
    event.options.successClassBanner = 'freeform-ajax-form-success';
})
1
2
3
4
5
6
7