Egyéni CSS és JavaScript

Ha a vizuális stílusszerkesztő nem elég, saját CSS-sel és JavaScripttel bármit átállíthatsz az űrlapon: a gombokat, a betűket, a beviteli mezőket.

Hol találod?

1. Az Űrlapok listán kattints a kívánt űrlap Szerkesztés gombjára.
2. Válaszd a Beállítások és integrációk fület.
3. A bal oldali menüben nyisd meg az Egyéni CSS/JS oldalt.

https://minta-bolt.hu/wp-admin/admin.php?page=fluent_forms&form_id=1&route=settings&sub_route=form_settings

Az oldalon két kódszerkesztő van: az Egyedi CSS és az Egyéni JavaScript mezője. A CSS-t ne tedd <style> címkék közé, a JavaScriptet ne <script> közé. Az oldal tetején látod az űrlap egyedi osztályát is, például .fluent_form_1. Mentéshez használd a lap alján lévő mentés gombot.

Az űrlap egyedi osztálya

Minden űrlap kap egy egyedi CSS-osztályt fluent_form_<azonosító> alakban. Ha ezt a szabályaid elé írod, a stílus csak erre az űrlapra érvényes, a többit nem érinti. Az azonosító helyére a FF_ID is írható (.fluent_form_FF_ID), ezt a bővítmény az űrlap azonosítójára cseréli.

.fluent_form_40 .ff_submit_btn {
    background-color: #0073e6;
    color: white;
    border-radius: 5px;
}

A lenti példákban a fluent_form_149 helyére a saját űrlapod osztályát írd.

Példák

A beküldő gomb:

form.fluent_form_149 .ff-btn-submit {
    background-color: #000000;
    color: #ffffff;
    border-radius: 10px;
}

form.fluent_form_149 .ff-btn-submit:hover {
    background-color: #ff0606;
    color: #000000;
}

A második szabály az egérrel fölé mutatáskori színeket adja meg.

A beviteli mezők:

form.fluent_form_149 .ff-el-form-control {
    padding: 6px 12px;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 10px;
}

A mezők betűi:

form.fluent_form_149 .ff-el-form-control {
    font-size: 16px;
    line-height: 1.5;
    color: #495057;
}

A címkék:

form.fluent_form_149 .ff-el-input--label {
    font-size: 22px;
    color: red;
}

A kiválasztott mező kiemelése:

.ff-el-form-control:focus {
    border-color: red;
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 0, 129, 0.25);
}

Az értékelés csillagai:

form.fluent_form_149 .ff-el-ratings label.active svg {
    fill: red;
}

A többlépéses űrlap lépésgombjai:

form.fluent_form_149 .step-nav button {
    background-color: #000000;
    color: #ffffff;
    border-radius: 10px;
}

form.fluent_form_149 .step-nav button:hover {
    background-color: #ff0606;
    color: #000000;
}

A változtatások mentése után nézd meg az űrlapot az oldalon is, mert ott látszanak élesben.

Kapcsolódó

• Kész osztályokkal CSS nélkül is változtathatsz az elrendezésen: Kész CSS-osztályok.