Change SELECT field to SELECT2 for Elementor forms and JET ENGINE

שתפו את הפוסט

Facebook
LinkedIn
Twitter
Email

Following a question that came up in one of the WordPress forums,
I have written a guide for you on how to change the Select field to the Select2 field.

This guide is simple and suitable for anyone with some understanding of code.
Just need to follow the instructions and act according to them.

Step One – create a Select field type in an Elementor type form or Jet Engine.

In today's tutorial we will learn how to create a Select type field in an Elementor form and in the Jet Engine form.

Create a form using Jet Engine

First let's start with Jet Engine:
We will enter the menu of Jet Engine which is in our control panel.

jet engine - forms

Direct link:

Https://Yourwebsite.Com/Wp-Admin/Admin.Php?Page=Jet-Engine

* Do not forget to change the yourwebsite…- to your real URL.
After entering the page, we will activate the form option and press the blue button – Save.
Now let's begin working, we will create a new form with a Select field.
Please note, today we will manually add selection fields,
but it's possible to pull from an existing list such as categories, posts, glossary and more.

Creating A jet engine form with SELECT field

Click on Apply Changes and then on Update.
We will now add the form to the page using Gutenberg or Elementor.

Create a form using Elementor with a Select2 field

First, let's open a page for editing using Elementor.

Now, let's search the widget list for the widget – Form.
Then, we'll click on Add Item, we'll choose a "select" type field.
We will add options on demand and save.

Step Two – Add Select2 files to the child theme

Now we come to a slightly more complex section, first make sure we should have a child theme, not mandatory but worthwhile.

In case you are already loading the Select2 library using your theme,
skip adding the files and add only the file called "mycustom.js" and the last section to the theme.
In the child theme, we will create a folder named CSS and another folder named Js

We will insert the JS file and the CSS file in accordance with the folder.

Link to download the JS and the CSS files.

The Code to add in the child theme:

/** add select2 for jet-engine-forms by itdesign.co.il **/
add_action( 'wp_enqueue_scripts', 'itdesign_select2_enqueue' );
function itdesign_select2_enqueue(){
    wp_enqueue_style('select2', get_stylesheet_directory_uri() . '/css/select2.min.css');
    wp_enqueue_script('select2', get_stylesheet_directory_uri() . '/js/select2.min.js', array('jquery'));
    // js file mycustom
    wp_enqueue_script('mycustom', get_stylesheet_directory_uri() . '/js/mycustom.js', array('jquery', 'select2'));
}
add_action('wp_enqueue_scripts', 'itdesign_select2_enqueue');

Please note – in case you are already pulling the Select2 library in the theme or through an extension – you can use the following code:

/** add select2 for jet-engine-forms by itdesign.co.il **/
add_action( 'wp_enqueue_scripts', 'itdesign_select2_enqueue' );
function itdesign_select2_enqueue(){
    // js file mycustom
    wp_enqueue_script('mycustom', get_stylesheet_directory_uri() . '/js/mycustom.js', array('jquery', 'select2'));
}
add_action('wp_enqueue_scripts', 'itdesign_select2_enqueue');

Results – select2 field without any plugin

Now, after we have added the code in the child theme and created the fields.
Our Select fields will become fields of Select2 types.

שתפו את הפוסט

Facebook
Twitter
WhatsApp
Telegram
Email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *