WPForms submit button full custom style

Σε αρκετές ιστοσελίδες όπου τα buttons έχουν ένα ιδιαίτερο design και απαιτείται να προστεθούν κάποια πχ span elements για να πετύχουμε τον σχεδιασμό, βρήκα αδυναμία να το πετύχω με κάποιο hook του WPForms.

Άλλωστε και η επίσημη απάντηση σε σχετική μου ερώτηση στο WPForms ήταν:

“Currently, there is a feature request for this type of feature, but as it’s not implemented yet and I can’t guarantee it will be.”

WPForms submit button

Συνήθως για το σχεδιασμό των buttons με τη βοήθεια των pseudo elements μπορούμε να κάνουμε αρκετά πράγματα.

Αν θέλουμε όμως να έχουμε κάτι της μορφής:

<button type="submit">
<span>Svg</span>
<span>SomethingElse</span>
Submit
</button>

μπορούμε να το πετύχουμε με λίγη JavaScript, όπου είναι και η μοναδική λύση από την στιγμή που δεν μας προσφέρει σχετική βοήθεια η ίδια η WPForms.

const wpform_buttons = document.querySelectorAll(".wpforms-form button[type=submit]");

if (wpform_buttons.length) {
    [...wpform_buttons].forEach((button) => {
        button.removeAttribute("data-alt-text");
        button.classList.add("custom-class");

        const submitButtonText = button.innerHTML;
        button.innerHTML = "<span>SVG</span><span>SomethingElse</span>" + submitButtonText + "<img href="" />";
    });
}

• button.removeAttribute(“data-alt-text”);
  Αφαιρούμε το “Submit Button Processing Text” για να μην μας καταστρέψει το innerHTML που θα δημιουργήσουμε, όση ώρα φορτώνει το form submit
• button.classList.add(“custom-class”);
  Δηλώνουμε κάποια custom css class αν επιθουμούμε
• const submitButtonText = button.innerHTML;
  Διατηρούμε το κείμενο που έχουμε δηλώσει για το button από τις ρυθμίσεις του WPForms
• button.innerHTML =
  Δημιουργούμε το markup που θέλουμε για να βρίσκεται μέσα στο <button type=”submit”> του WPForms