How can I add icons to submit buttons and keep 99% of standard functionality?

[terryupton]

How can we help you?

How can I easily add icons to submit buttons?
I know I can code these manually but is there any example that dhows all the manual tags and how to do this?

I would also like to keep a lot of the 'out-the-box' freeform (settings) functionality for submit buttons such as;

• Disable on submit
• Change the text to the processing text
• Ability to set the classes and over-ride these

Essentially I am looking to keep 99% of the standard Freeform button functionality that honours the config and settings but just be able to add an icon to the button and style it via some classes (tailwind).

So from this (default):

to this:

(freeform 4 code for this button)

{% set fieldClass = submitClasses %}

{# CUSTOM BUTTON WiTH ICON #}
<button type="submit" class="{{ fieldClass }} w-48">
  <span class="mr-2">
     {{ field.label }}
     </span>

   <div class="ml-1.5 btn-icons">
      <span class="spinner hidden"></span>
      {{ svg('@icons/streamline-regular-mini/interface-arrows-right.svg')|attr({ class:"w-4 h-4 shrink-0 fill-current icon" }) }}
   </div>
</button>

{% css %}
button[type=submit].ff-loading .btn-icons .spinner {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
}

button[type=submit].ff-loading .btn-icons .icon {
    display: none;
}

button[type=submit].ff-loading .spinner:before {
    content: '';
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    border-style: solid;
    border-width: 2px;
    border-color: transparent transparent white white;
    border-radius: 50%;
    animation: ff-loading .5s linear infinite
}

@keyframes ff-loading {
    0% {
        transform: rotate(0)
    }
    100% {
        transform: rotate(1turn)
    }
}
{% endcss %}

Thanks
Terry

Freeform Edition

Pro

Freeform Version

5.10.10

Craft Version

Craft Pro 4.15.2

[kjmartens]

Hi @terryupton,

This is something we're very likely going to add built-in support for in the coming month. Essentially allowing users to add an icon to submit buttons inside the form builder (and perhaps a template override approach too). 🙂

[terryupton]

Awesome, this sounds good! 😀