Cornerstone Forms Elements

Form Element

This should be your starting point on any Form. When inserting to your page it will also give you a sample Input and Action.

The Form element has almost all the same controls as the Div Element. However we force the tag as <form>.

• ID : A unique identifier for the form element. This is also the key under which form submissions are stored in the database. If left blank, an auto-generated ID is used. Using a meaningful ID like contact makes it easier to reference submissions and identify forms in your admin area.
• Method : You will typically only use GET or POST when it comes to the Method. A good rule of thumb is any link you would share (think a filtered post list) you should use GET. Any action that sends data (think a contact form) or has sensitive information should use POST. PUT and DELETE are also available for custom REST API integrations.
• Action : You should leave this blank unless you want form processing to happen on a different page. You can always use the Redirect Action if you want the form to end on a different page.
• Error Inline : When this is turned on errors will display next to the input they relate to. If this is turned off all errors will display at the bottom of the form.
• Ignore Frontend Errors : When this is turned on any error that could be trigged by the frontend or JavaScript will be ignored. This is only useful if you have a quiz that can have wrong answers or you are testing the backend validation process for testing.
• AJAX : When this is turned on the form will send via AJAX or will be a single page form. Certain actions like redirect or file downloading are most likely not going to work when you have AJAX turned on. This is best used on pages that filter post results.
• Auto Send Changes : This is only used by AJAX. Whenever you make any change the form, the form will send an AJAX request. This is useful for forms that filter post results.
• Change Selectors : This is used by AJAX. If left empty the entire page will update when a form is sent which can be slow or even caused unwanted results. Each entry in this list is a query selector. If you had a page that filtered results, the change selector could be the ID or custom class on the results themselves.
• Simulate Error : This is a builder preview-only option. When enabled, it simulates an error state directly in the preview so you can style your error messages without needing to actually trigger a validation failure.

Submission

When enabled, each successful form submission is saved as a post under Cornerstone > Form Submissions in the WordPress admin. This gives you a built-in record of every submission without requiring a third-party service.

• Submission : Toggle this on to enable storing submissions. When active, two additional fields appear.
• Title : The title of the saved submission post. Supports Dynamic Content so you can include submitted values, for example Message Received From {{dc:form:data key="email"}}.
• Content : The body content of the saved submission post. Also supports Dynamic Content, making it easy to capture the full message or any other field value.

Form Errors

The Form Errors tab controls the styling of error messages displayed when a validation fails. Error messages are rendered as list elements, which is why there is a List Style control. Set the Type to None to hide the bullet markers completely.

• List Style : Controls the bullet marker type (disc, circle, square, none, etc.) and whether it appears inside or outside the text flow.
• Padding : Inner spacing applied to each error message item.
• Margin : Outer spacing around the error message container.
• Text Format : Full typography controls for error message text including font family, weight, size, line height, letter spacing, color, style, alignment, decoration, and transform.

Shared Input Controls

• Name : This is the name you'll refer to when referencing data with Dynamic Content. For instance using a name of my_field, we would use {{dc:form:data key="my_field"}}
• Value : This is the default value to put into the form. When it's required for a user to input a value, then leave this blank.
• Placeholder : This is a text indicator in the input when the input is completely empty. It's usually best to have info to the user or an example value in this field.
• Autocomplete : Tells the browser how to autofill the input. Choosing a specific token like Email or Given Name lets browsers and mobile devices offer the user previously entered values that match. Set to Off to disable autocomplete for the field entirely. A Custom option is also available for tokens not covered by the preset list.
• Required : When this toggle is on, the user must fill in this field before the form can be submitted. Leaving it empty will produce a validation error.
• Disabled : When this toggle is on, the user will be unable to input into the input.
• Features : Checking Label outputs an HTML <label> element linked to the input. Enabling the label also wraps the input and label together in a container <div>, which unlocks the Label and Container styling tabs.
• Validations : This control has a list of validations needed to pass to submit the form. See our guide on Validations here.

Input Element

This element actually contains a number of different "Elements" or "Types" as we'll see. The reason is that this element can actually act as a standard text input, or many other types of standard inputs.

General

All of the Shared Input Controls above appear in the General tab. In addition, the General tab includes a Type selector and several controls that only appear for specific input types.

• Type : Switches the input between all available HTML input types. The available types are: Text, Password, Email, Number, Date, Checkbox, Radio, File, Submit, Reset, Button, Hidden, Color, Range, Search, Tel, Url, Week, and Month.

The following controls only appear when File is selected:

• Accept : A comma-separated list of allowed file types. Accepts MIME types, wildcards, or file extensions (e.g. .doc,.pdf,image/*). Leave blank to allow any file type.
• Multiple : When enabled, the user can select more than one file at a time.

The following control only appears when Checkbox or Radio is selected:

• Checked : Controls the default checked state. Name automatically checks the input if the submitted form data contains a matching value for this field's name — useful for preserving state after page reload. Yes always renders the input pre-checked. No always renders it unchecked.

The following controls only appear when Range is selected:

• Min : The minimum numeric value of the range slider.
• Max : The maximum numeric value of the range slider.
• Step : The increment between selectable values on the slider.

The following controls only appear when Date is selected:

• Min : The earliest selectable date. Accepts a specific date or relative values like today or +1 day.
• Max : The latest selectable date. Accepts the same values as Min.
• Step : The number of days between valid date selections. For example, if Min is a Monday and Step is 7, only Mondays will be selectable.

Label

The Label tab is only available when Label is checked in Features. It controls the appearance of the <label> element that is linked to this input.

• Content : The text of the label.
• Position : Whether the label appears Before (above) or After (below) the input.
• Size : Width, min/max width, height, min/max height, and flex grow/shrink for the label element.
• Text Format : Full typography controls — font family, weight, size, line height, letter spacing, color, style, alignment, decoration, and transform.
• Margin : Outer spacing around the label.
• Required Marking : When enabled, appends a small marker (default *) to the label when the input is required. Sub-controls let you change the marker Text, its Color, and the Spacing between the marker and the label text.

Container

The Container tab is only available when Label is checked in Features. It styles the <div> that wraps the label and input together.

• Flexbox : Controls the flex layout of the container, including direction, alignment, justification, gap, and the container's own flex grow/shrink behaviour.
• Design : Background, margin, padding, border, border radius, and box shadow for the container.

Size

Controls the dimensions of the <input> element itself.

• Width / Min Width / Max Width : Horizontal sizing of the input.
• Height / Min Height / Max Height : Vertical sizing of the input.
• Flex : Grow and shrink behaviour when the input is inside a flex container.

Design

Controls the default appearance of the <input> element.

• Background : Background color of the input.
• Text Format : Typography controls for the text the user types into the input.
• Placeholder : Color of the placeholder text.
• Outline : What happens to the browser focus outline when the input is active. Browser keeps the default browser outline. Border replaces it with the input's border styling. Ignore removes it entirely — use with caution for accessibility.
• Margin / Padding : Outer and inner spacing.
• Border / Border Radius : Border style and corner rounding.
• Box Shadow : Drop shadow on the input.

Active

Controls the appearance of the Element when it is focused or being interacted with. All values here layer on top of the Design tab values, so you only need to set what should change.

• Text Color : Text color while the input is focused.
• Background : Background color while focused.
• Placeholder : Placeholder text color while focused.
• Margin / Padding : Spacing overrides while focused.
• Border / Border Radius : Border overrides while focused.
• Box Shadow : Shadow override while focused.

Error

Controls the appearance of the Element when it has a validation error. Works the same way as the Active tab — only set what should differ from the Design tab defaults.

• Text Color : Text color in the error state.
• Background : Background color in the error state. Defaults to a light red.
• Placeholder : Placeholder text color in the error state.
• Margin / Padding : Spacing overrides in the error state.
• Border / Border Radius : Border overrides in the error state. Defaults to a red border.
• Box Shadow : Shadow override in the error state.

Text Input

This is the default type of input.

Email Input

This looks identical to Text on desktop. On mobile however the text input will display characters more valid to an email like the @ symbol.

Reset Input

This looks just like button. However when you click it, the form will reset itself. Useful for forms you could submit multiple times or a filtering form.

File Input

When clicked, this input will open the users file manager allowing them to select a file or multiple files. You can also limit the types of file allowed to input. This input should also be used in conjuction with the File Upload Action.

Number Input

This is similar to the text input, but there is a increment and decrement button. This also provides a user friendly way to input numbers if you are on mobile.

Password Input

We're sure you've used this input before, even if it was a secret.

Range Input

Between 1 to 10, how awesome is Cornerstone Forms? With this input, users can tell you very easily.

Color Input

What's your favorite color? The popup of this element varies between operating systems.

Checkbox Input

Do you accept the terms and conditions? Well if you mark the field as required, the user will have to. See also Checkbox List.

Radio Input

When using the same name as another Radio Input element, you will only be allowed to select one option. Radio Input is great if you are looping over data to create the radio list. If you have a specific and non changing number of items, you should use the Radio List.

Submit Input

Renders a submit button styled as a native <input> rather than a <button> element. Clicking it submits the form. The Value field sets the button label text.

While we provide this as a type you should use the Prefab Submit Button which uses the Button element.

Hidden Input

Invisible to the user but included in the form submission data. Use this to pass fixed values, tokens, or metadata along with a form without any user interaction.

Search Input

A text field that hints to the browser it is used for search. On some browsers and operating systems it renders with a small clear button once text has been entered.

Tel Input

A text field for telephone numbers. On mobile devices this prompts the numeric keypad, making it easier to enter a phone number.

URL Input

A text field that validates that the entered value looks like a URL before the form is submitted.

Week Input

Lets the user select a specific week of a year using the browser's native week picker. The submitted value follows the format 2025-W04.

Month Input

Lets the user select a month and year using the browser's native month picker. The submitted value follows the format 2025-01.

Textarea Element

When a couple words isn't enough, the Textarea has you covered. This shares a lot of controls with the Input Element. It also adds in a resizable control which controls if a user can resize a Textarea.

Select Element

The select or dropdown as it's sometime called, works great for a large list of options. You can also use the multiple control to allow for multiple choices to be selected.

Each select will have a number of different Option or Option Group elements which we will go into in the next section.

Option

Options are defined by their Label and Value. The value can also be blank.

Option Group

Option Group can group certain options together. Each Option Group has a number of different Option elements similar to the Select itself.

Checkbox / Radio List Element

Checkbox should be used when a number of different options can be selected.

Radio List should be selected when only option is allowed be selected.

Each Option is a child element of this element. It is very similar to the Select element.

Date Picker

This element displays a nice calendar when a user selects the input. On mobile it will display the touch calendar unique to their device, but this can be disabled through the Disable Native option. There are a large number of configuration and styling options organized across several tabs.

General

• Mode : Controls how dates are selected. Single allows one date, Multiple allows any number of individual dates to be selected, and Range lets the user select a start and end date.
• Enable Time : Adds a time picker below the calendar.
• Inline : Displays the calendar directly on the page instead of in a popup.
• Manual Input : Allows users to type a date directly into the input field instead of only using the calendar picker.
• Click to Open : When enabled, clicking the input opens the calendar. Disable this if you want to open the calendar programmatically.
• Disable Native : On mobile devices, browsers typically show their own native date picker. Enable this option to always use the Flatpickr calendar instead.

The following options are only available when Enable Time is on:

• 24 Hour Time : Use a 24-hour clock format instead of AM/PM.
• Seconds : Show a seconds selector in the time picker.
• Time Only : Hides the calendar entirely and shows only the time picker.

The following options are only available when Time Only is off:

• First Day : Sets which day the week starts on in the calendar grid. Defaults to Sunday.
• Months : The number of calendar months to display side by side. Useful when using Range mode so users can see a wider span of dates at once.
• Week Numbers : Shows the ISO week number in a column to the left of the calendar days. Only available when Months is set to 1.
• Abbreviated Months : Shows shortened month names (Jan, Feb, Mar) in the calendar header instead of the full names.
• Calendar Position : Controls where the calendar popup appears relative to the input. Options include Auto, Above, Below, and variants with left, center, or right alignment. This option is hidden when Inline is enabled.

Format

• Date Format : The format of the date value that gets submitted with the form. Uses PHP date format characters (e.g. Y-m-d for 2025-01-31, m/d/Y for 01/31/2025). This is the value stored in form submissions.
• User Format : When enabled, a separate display format is shown to the user in the input while the Date Format value is what actually gets submitted. This lets you show a human-friendly date while keeping a consistent server-side format.
• Display Format : Only available when User Format is on. Controls the date format shown to the user in the input field. Uses the same PHP date format characters (e.g. F j, Y displays as January 31, 2025).

Constraints

• Min Date : The earliest date a user is allowed to select. You can enter a specific date or use relative values like today.
• Max Date : The latest date a user is allowed to select. Accepts the same values as Min Date.
• Disable Dates : A list of specific dates or date ranges to block from selection. Each entry has a From date and an optional To date. If only From is set, that single day is disabled. If both are set, the entire range between them is disabled.
• Enable Dates : A list of specific dates or date ranges that are the only ones users can select. All dates not included in this list will be disabled. Each entry works the same as Disable Dates.

Calendar (Styling)

Controls the appearance of the calendar popup container.

• Background : Background color of the calendar popup.
• Font Family : Font family used throughout the calendar.
• Font Weight : Font weight used throughout the calendar.
• Border : Border around the calendar popup.
• Border Radius : Corner rounding of the calendar popup.

Header (Styling)

Controls the appearance of the calendar header row containing the month/year and weekday labels. Hidden when Time Only is enabled.

• Background : Background color of the month/year navigation row and weekday label row.
• Date Size : Font size of the month and year text.
• Date Color : Text color of the month and year text.
• Day Size : Font size of the weekday labels (Mon, Tue, etc.).
• Day Color : Text color of the weekday labels.
• Arrow Color : Color of the previous/next month navigation arrows, with an interactive state color.

Days (Styling)

Controls the appearance of the individual day cells in the calendar grid. Hidden when Time Only is enabled.

• Size : Font size of the day numbers.
• Color : Text color of the day numbers, with an interactive hover color.
• Selected Color : Text color of a selected date.
• Selected Background : Background color of a selected date.
• Today Background : Background color of the current day.
• Disabled Background : Background color of dates that cannot be selected.
• Disabled Color : Text color of dates that cannot be selected.
• Hover Background : Background color of a day cell on hover.
• Months Color : Text color for days that belong to the previous or next month shown in the grid.
• In Range Background : Background color for the days between the start and end of a selected range. Only available in Range mode.
• Border : Border around each day cell, with an interactive state color for selected/range states.
• Border Radius : Corner rounding of each day cell.

Time (Styling)

Only available when Enable Time is on.

• Font Size : Font size of the time picker inputs.
• Color : Text color of the time picker inputs.
• Hover Background : Background color when hovering over the time inputs.

Dropzone Element

The Dropzone element is a visual and user-friendly way to upload multiple files. Users can drag and drop files onto it or click to open their file manager. Much like the File Input you can specify which file types are allowed. This element should be used in conjunction with the File Upload Action using the allow multiple control.

The Dropzone container itself is styled using the standard Primary, Effects, and Customize tabs (it extends the Div element), so you have full control over its appearance. The dedicated Dropzone tab holds the upload-specific options.

General

• Name : The field name used to reference uploaded files in actions and Dynamic Content, the same as other form inputs.
• Accepted Types : A comma-separated list of allowed file types. Accepts MIME types, wildcards, or file extensions (e.g. image/*,application/pdf,.psd). Leave blank to allow any file type.
• Required : When enabled, the user must upload at least one file before the form can be submitted.
• Clickable : When enabled, clicking the dropzone area opens the file manager so users can browse and select files. When disabled, users must drag and drop files directly onto the zone.
• Max Files : The maximum number of files a user can upload at once. Set to 0 for unlimited — only recommended for trusted users.

Messages

• Intro Message : The text displayed inside the dropzone before any files are added. Defaults to "Drop files here to upload".
• Invalid File Type : The error message shown when a user attempts to upload a file that does not match the Accepted Types setting.