Form Control

ℹ️

Beta Feature

The feature described here will be available starting with SureCart version 3.0. If you'd like to try this feature before the official release, you can install the beta version by visiting the SureCart plugin page on WordPress.org. In the Advanced Options section, select the latest version labeled "SureCart V3.0-Beta" from the Development Version dropdown, and click "Download."

Form controls are styled with CSS variables, allowing them to adapt to customizing theme styles.

Styles

These styles are required to use the form control and labels

wp_enqueue_style('surecart-form-control');
wp_enqueue_style('surecart-label');

Input

sc-form-controlclass is used to markup an input element.

<div>
    <label for="coupon" class="sc-form-label">Coupon Code</label>
    <input type="text" class="sc-form-control" id="coupon" placeholder="Enter Coupon Code" />
</div>

Disabled Input

Addingdisabledproperty will handle the design for disabled input elements.

<div>
    <label for="coupon" class="sc-form-label">Coupon Code</label>
    <input type="text" disabled class="sc-form-control" id="coupon" value="10101" placeholder="Enter Coupon Code" />
</div>

Sizing

Set heights using classes like .sc-form-control-lg and .sc-form-control-sm.

Small Input

<div>
    <label for="email" class="sc-form-label">Input text(sm)</label>
    <input type="email" class="sc-form-control sc-form-control-sm" id="email" placeholder="[email protected]" />
</div>

Large Input

<div>
    <label for="email" class="sc-form-label">Input text(lg)</label>
    <input type="email" class="sc-form-control sc-form-control-lg" id="email" placeholder="[email protected]" />
</div>