To style forms built by Django CMS forms.
⚠️ Important
Only intended for Django CMS forms. To style a form not using that plugin, use TACC form component.
ⓘ Notice
Most of the markup can be seen at template. Some of the classes and markup come from Django form field widgets.
<div class="forms">
<h3 class="title">(Optional) Title of Form</h3>
<div class="description">(Optional) Description of the form.</div>
<div class="form-wrapper">
<form action="" method="POST" enctype="multipart/form-data">
<div class="form-errors" style="display:none;">
<ul class="errorlist">
<li>
Sample <strong>form</strong>
error. <a href="https://example.com" target="_blank">Link.</a>
</li>
</ul>
</div>
<div class="field-wrapper required">
<div class="field-errors" style="display:none;">
<ul class="errorlist">
<li>
Sample <strong>field</strong>
error. <a href="https://example.com" target="_blank">Link.</a>
</li>
</ul>
</div>
<label for="name">
Name
<span class="asterisk" aria-label="(required)">*</span>
</label>
<input type="text" name="name" required="" placeholder="Your name" id="name" />
<div class="help-text">
We use this to identify your submission.
</div>
</div>
<div class="field-wrapper">
<div class="field-errors" style="display:none;">
<ul class="errorlist">
<li>
Sample <strong>field</strong>
error. <a href="https://example.com" target="_blank">Link.</a>
</li>
</ul>
</div>
<label for="favorite-fruit">Favorite Fruit</label>
<select name="favorite-fruit" id="favorite-fruit">
<option value="" selected="">
Please select an option
</option>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Cherry">Cherry</option>
<option value="Durian">Durian</option>
<option value="Other">Other</option>
<option value="Whatever">Whatever</option>
</select>
<div class="help-text">
Choose your favorite fruit.
</div>
</div>
<div class="field-wrapper">
<div class="field-errors" style="display:none;">
<ul class="errorlist">
<li>
Sample <strong>field</strong>
error. <a href="https://example.com" target="_blank">Link.</a>
</li>
</ul>
</div>
<label for="wake-up-time">Wake Up Time</label>
<input type="time" name="wake-up-time" id="wake-up-time" />
<div class="help-text">
We use this to know when to wake you up.
</div>
</div>
<div class="field-wrapper">
<div class="field-errors" style="display:none;">
<ul class="errorlist">
<li>
Sample <strong>field</strong>
error. <a href="https://example.com" target="_blank">Link.</a>
</li>
</ul>
</div>
<label>Radio stations</label>
<ul class="radioselect" id="radio-stations">
<li>
<label for="radio-stations-0">
<input type="radio" name="radio-stations" value="LX 1234" id="radio-stations-0" />
LX 1234
</label>
</li>
<li>
<label for="radio-stations-1">
<input type="radio" name="radio-stations" value="LOVE 45" id="radio-stations-1" />
LOVE 45
</label>
</li>
<li>
<label for="radio-stations-2">
<input type="radio" name="radio-stations" value="OLD 555" id="radio-stations-2" />
OLD 555
</label>
</li>
</ul>
<div class="help-text">
Which radio stations do you prefer?
</div>
</div>
<div class="field-wrapper checkboxinput">
<div class="field-errors" style="display:none;">
<ul class="errorlist">
<li>
Sample <strong>field</strong>
error. <a href="https://example.com" target="_blank">Link.</a>
</li>
</ul>
</div>
<input type="checkbox" name="checking-out" id="checking-out" />
<label for="checking-out">Checking Out?</label>
<div class="help-text">
Are you checking out today?
</div>
</div>
<div class="field-wrapper">
<div class="field-errors" style="display:none;">
<ul class="errorlist">
<li>
Sample <strong>field</strong>
error. <a href="https://example.com" target="_blank">Link.</a>
</li>
</ul>
</div>
<label for="">
Which fish do you want?
</label>
<ul class="checkboxselectmultiple" id="which-fish-do-you-want">
<li>
<label for="which-fish-do-you-want-0">
<input type="checkbox" name="which-fish-do-you-want" value="one fish" id="which-fish-do-you-want-0" />
one fish
</label>
</li>
<li>
<label for="which-fish-do-you-want-1">
<input type="checkbox" name="which-fish-do-you-want" value="two fish" id="which-fish-do-you-want-1" />
two fish
</label>
</li>
<li>
<label for="which-fish-do-you-want-2">
<input type="checkbox" name="which-fish-do-you-want" value="red fish" id="which-fish-do-you-want-2" />
red fish
</label>
</li>
<li>
<label for="which-fish-do-you-want-3">
<input type="checkbox" name="which-fish-do-you-want" value="blue fish" id="which-fish-do-you-want-3" />
blue fish
</label>
</li>
<li>
<label for="which-fish-do-you-want-4">
<input type="checkbox" name="which-fish-do-you-want" value="all the fish" id="which-fish-do-you-want-4" />
all the fish
</label>
</li>
</ul>
</div>
<div class="field-wrapper">
<div class="field-errors" style="display:none;">
<ul class="errorlist">
<li>
Sample <strong>field</strong>
error. <a href="https://example.com" target="_blank">Link.</a>
</li>
</ul>
</div>
<label for="hangry-time">Hangry Time</label>
<select name="hangry-time" id="hangry-time">
<option value="" selected="">
Please select an option
</option>
<option value="Morning">Morning</option>
<option value="Noon">Noon</option>
<option value="Afternoon">Afternoon</option>
<option value="Evening">Evening</option>
<option value="Night">Night</option>
<option value="Midnight">Midnight</option>
</select>
<div class="help-text">
At which time of day do you get hangry?
</div>
</div>
<div class="field-wrapper">
<div class="field-errors" style="display:none;">
<ul class="errorlist">
<li>
Sample <strong>field</strong>
error. <a href="https://example.com" target="_blank">Link.</a>
</li>
</ul>
</div>
<label for="life-story">Life Story</label>
<textarea name="life-story" cols="40" rows="10" id="life-story"></textarea>
<div class="help-text">
Go on, tell me everything.
</div>
</div>
<div class="field-wrapper">
<div class="field-errors" style="display:none;">
<ul class="errorlist">
<li>
Sample <strong>field</strong>
error. <a href="https://example.com" target="_blank">Link.</a>
</li>
</ul>
</div>
<label for="what-day-is-it">What day is it?</label>
<input type="date" name="what-day-is-it" id="what-day-is-it" />
<div class="help-text">
Please enter today's date.
</div>
</div>
<div class="field-wrapper">
<div class="field-errors" style="display:none;">
<ul class="errorlist">
<li>
Sample <strong>field</strong>
error. <a href="https://example.com" target="_blank">Link.</a>
</li>
</ul>
</div>
<label for="your-favorite-picture">Your favorite picture</label>
<input type="file" name="your-favorite-picture" id="your-favorite-picture" />
<div class="help-text">
Upload your favorite image.
<small class="help-text">
Supported types:
<code>.jpeg</code>,<code>.jpg</code>,<code>.gif</code>,<code>.png</code>
</small>
</div>
</div>
<div class="field-wrapper recaptchav2checkbox required">
<label for="recaptcha_g9y93gP8">
Are you a robot?
<span class="asterisk" aria-label="(required)">*</span>
</label>
<script src="https://www.google.com/recaptcha/api.js"></script>
<script type="text/javascript">
// Submit function to be called, after reCAPTCHA was successful. var
onSubmit_9e32f28ccb9545109ff6ae891f9af324 = function(token) {
" "
} {
console.log("reCAPTCHA validated for 'data-widget-uuid=\"9e32f28ccb9545109ff6ae891f9af324\"'")
};
</script>
<div class="g-recaptcha" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" required="" id="recaptcha_g9y93gP8" data-widget-uuid="9e32f28ccb9545109ff6ae891f9af324" data-callback="onSubmit_9e32f28ccb9545109ff6ae891f9af324" data-size="normal"></div>
</div>
<fieldset class="field-wrapper recaptchav2checkbox required">
<legend>sample fields in a fieldset</legend>
<div class="field-wrapper required">
<div class="field-errors" style="display:none;">
<ul class="errorlist">
<li>
Sample <strong>field</strong>
error. <a href="https://example.com" target="_blank">Link.</a>
</li>
</ul>
</div>
<label for="name">
Name
<span class="asterisk" aria-label="(required)">*</span>
</label>
<input type="text" name="name" required="" placeholder="Your name" id="name" />
<div class="help-text">
We use this to identify your submission.
</div>
</div>
<div class="field-wrapper">
<div class="field-errors" style="display:none;">
<ul class="errorlist">
<li>
Sample <strong>field</strong>
error. <a href="https://example.com" target="_blank">Link.</a>
</li>
</ul>
</div>
<label for="favorite-fruit">Favorite Fruit</label>
<select name="favorite-fruit" id="favorite-fruit">
<option value="" selected="">
Please select an option
</option>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Cherry">Cherry</option>
<option value="Durian">Durian</option>
<option value="Other">Other</option>
<option value="Whatever">Whatever</option>
</select>
<div class="help-text">
Choose your favorite fruit.
</div>
</div>
</fieldset>
<fieldset>
<legend>sample buttons outside footer</legend>
<button class="form-button" type="submit">
Submit
</button>
<button class="form-button" type="button">
Button
</button>
<button class="form-button" type="reset">
Reset
</button>
</fieldset>
<footer class="button-wrapper">
<button class="form-button" type="submit">
Submit
</button>
<button id="toggle-field-errors" class="form-button" type="button">
Toggle Field Errors
</button>
<button id="toggle-required-fields" class="form-button" type="button">
Toggle Required Fields
</button>
<button class="form-button" type="reset">
Reset Field Values
</button>
</footer>
</form>
</div>
</div>
<script type="module">
import toggleFieldErrors from '../raw/c-form/toggle-field-errors.js';
document.addEventListener('DOMContentLoaded', () => {
const toggle = document.getElementById('toggle-field-errors');
const form = document.querySelector('form');
const selector = '.form-errors, .field-errors'
toggle.addEventListener('click', () => {
toggleFieldErrors(form, selector);
});
});
</script>
<script type="module">
import toggleRequiredFields from '../raw/c-form/toggle-required-fields.js';
document.addEventListener('DOMContentLoaded', () => {
const toggle = document.getElementById('toggle-required-fields');
const form = toggle.closest('form');
toggle.addEventListener('click', () => {
toggleRequiredFields(form, {
shouldScrollToFirst: true,
classNames: {
wrapRequired: 'required'
},
selectors: {
wrap: '.field-wrapper'
}
});
});
});
</script>
<script type="module">
document.addEventListener('DOMContentLoaded', () => {
const form = document.querySelector('form');
form.addEventListener('submit', event => {
event.preventDefault();
/* TODO: Show success message on form */
alert('Form was not submitted, because this is an incomplete demo.');
});
});
</script>
{
"shouldSkipPattern": true,
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "components",
"📝 supportStyles": "only needed until core-styles.cms.css loads them",
"supportStyles": [
"../../assets/components/django-cms-forms.css"
],
"shouldLoadCMS": true,
"📝 shouldLoadCMS": "because this is demo but this is CMS pattern",
"markup": {
"wrap_start": "<div class=\"forms\">\n <h3 class=\"title\">(Optional) Title of Form</h3>\n <div class=\"description\">(Optional) Description of the form.</div>\n <div class=\"form-wrapper\">\n <form action=\"\" method=\"POST\" enctype=\"multipart/form-data\">\n",
"wrap_end": " </form>\n </div>\n</div>\n"
},
"errorLoc": "top",
"helpTextTag": "div",
"inputListTag": "ul",
"selectors": {
"errorList": ".form-errors, .field-errors",
"wrap": ".field-wrapper"
},
"classNames": {
"title": "title",
"desc": "description",
"errors": "errorlist",
"form_errors_wrap": "form-errors",
"field_errors_wrap": "field-errors",
"field": "field-wrapper",
"badge": "asterisk",
"hint": "help-text",
"has_required": "required",
"has_checkbox": "checkboxinput",
"has_spam_filter": "recaptchav2checkbox",
"radio_menu": "radioselect",
"check_menu": "checkboxselectmultiple",
"buttons": "button-wrapper",
"button": "form-button"
}
}