Using Custom Icons with Forminator Forms in WPMudev Plugins

Forminator Forms is a popular plugin for creating custom forms in WordPress. Developers and designers often look for ways to enhance the visual appeal of their forms by using custom icons. In this blog post, we will explore how to use custom icons with Forminator Forms in WPMudev plugins.

Prerequisites

Before getting started, ensure you have the following:

1. A working WordPress installation with Forminator Forms and your preferred WPMudev plugin installed and activated.
2. Basic knowledge of HTML, CSS, and JavaScript is recommended but not required.

Step 1: Create Custom Icons

First, create or obtain your custom icon set in your preferred format (SVG, PNG, or ICNS). You can use popular graphic design tools such as Adobe Illustrator, Figma, or Canva to create and export the icons.

Step 2: Upload Custom Icons to Your Plugin

The next step is to upload your custom icons to your plugin. Since the Forminator Forms plugin doesn't have a built-in interface for managing custom icons, you need to use a child theme or a custom JavaScript/CSS file to add your icons.

1. Create a child theme if you don't already have one. This will allow you to modify your plugin's code without affecting the core files.
2. Add your custom icon set to your child theme folder by uploading it in the assets/fonts directory or any other appropriate location, depending on how you want to use the icons (as images or fonts).

Step 3: Register Custom Icons

To make your custom icons available for use within Forminator Forms, you need to register them with WordPress. This can be done by adding a custom JavaScript file to your child theme or plugin. In this example, we'll create a custom-icons.js file.

// Custom Icons script
(function($) {
    'use strict';

    // Register icons
    Forminator.registerIcons({
        'icon-name1': 'path/to/your/icon1.svg',
        'icon-name2': 'path/to/your/icon2.svg'
    });
})(jQuery);

Replace path/to/your/icon1.svg and path/to/your/icon2.svg with the actual paths to your custom icon files. Save this file in your child theme or plugin folder, depending on where you want to register your icons.

Step 4: Use Custom Icons in Forminator Forms

To use your custom icons in Forminator Forms, modify the form HTML to include the new icon classes and IDs. You can do this by adding or editing the <input> or <button> tags in your form markup.

<!-- Form input example -->
<input type="text" name="your-field-name" class="forminator-input forminator-icon-input forminator-input--icon icon-prefix-customicon1 form-control" id="your-field-id">
<span class="forminator-input__icon forminator-icon forminator-icon-customicon1"></span>

Replace your-field-name, your-field-id, and icon-prefix-customicon1 with your field name, id, and the desired prefix for your custom icon class. Do the same for the button example:

<!-- Form submit button example -->
<button type="submit" class="forminator-submit-button forminator-icon-button forminator-button forminator-button--primary form-control" id="your-button-id">
    <span class="forminator-submit-label">Submit</span>
    <span class="forminator-icon forminator-icon-customicon1"></span>
</button>

Save your changes and update the Forminator Forms settings to load your child theme or plugin with the custom JavaScript file. Now, your custom icons should appear in the form when you view it on the frontend.

Conclusion

By following these steps, you have learned how to use custom icons with Forminator Forms in WPMudev plugins. This approach allows you to create visually appealing forms that better align with your branding and user experience goals. Remember that this process may require some customization depending on the specific needs of your project. Good luck, and happy form designing!

Published April, 2024