WEB-SHOP-HOSTING

<p>The plugin adds two new Widgets to the Elementor-PRO Forms builder.<br />
– <strong>Phone Country Code</strong> – choosing a telephone prefix depending on the country<br />
– <strong>DropZone</strong> – Drag & Drop multiple file upload field<br />
– <strong>Advanced Honeypot</strong> – Improved up-to-date spam filtering</p>
<h4>Phone Country Code</h4>
<ul>
<li>Telephone prefix depending on the country.</li>
<li>Provides the ability to select a searchable telephone prefix.</li>
<li>The search works both by prefix number and by country name.</li>
<li>The standard for WP language file is used, then it allows to translate the selector depending on the change of the locale inside WP.</li>
<li>In the display of countries there is a flag image, which makes it easier to find and makes it richer. When displaying an empty value, there is an automatic determination of the current country using geolocation based on IP identification.<br />
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/ZR9bkXPnsuc?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></li>
</ul>
<h4>DropZone</h4>
<ul>
<li>File will be shown in Elementor -> Submission</li>
<li>File can be send by email<br />
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/JSFna01AnwM?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></li>
</ul>
<h4>Advanced Honeypot – better reCaptcha alternative</h4>
<p>We added an advanced honeypot widget to elementor pro forms.<br />
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/102sMMmQsPA?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span><br />
This widget is very similar to the native elementor widget, except for very important differences.<br />
Elementor Form fields can be required or optional.<br />
Spiders that send spam through forms take into account the presence of traps and try to bypass them, for example,<br />
they check for the presence of required fields in form and fill in only its so as not to fall into honeypot spam filters.<br />
The honeypot field that the elementor provides can only be optional, because if you make it required,<br />
normal visitors will not be able to fill it out, since it is not displayed on the front (it is hidden) and the form simply will not submit by the browser, since the required fields are checked by the browser (even invisible).<br />
At the same time, it turns out that the optional fields are not filled with spiders just to bypass the honeypot.<br />
Our honeypot implementation is different in that the honeypot field is always shown as required for spiders, but then this attribute is removed using JavaScript.<br />
The spider reads only the html and sees that the field is required and fills it in, this causes the spam filter to work. For real visitors,<br />
this field is invisible and JavaScript removes the mandatory attribute for this field, i.e. spam filter is not activated.<br />
In addition, the native honeypot field has a “display: none;” style written directly into the input tag that clearly tells the spiders that the field is not visible to users and is a potential trap.<br />
In our version of the widget, the honeypot field is hidden through styles that are in a common style block that is difficult for spiders to find our traps field.</p>


Startklar Elementor Addons

The plugin expands the Elementor-PRO Forms builder with Country Code selector, DropZone and Advanced Honeypot.

Nazmul Sabuz

<p>WP Dropzone integrates the powerful Dropzone.js library with WordPress, allowing you to upload files directly into the WordPress media library from any post, page, or front-end location. The plugin provides a modern, user-friendly drag-and-drop interface with extensive customization options and advanced features for file management.</p>
<h3>Key Features</h3>
<ul>
<li><strong>Drag & Drop Interface</strong> – Modern, intuitive file upload experience</li>
<li><strong>Customizable Styling</strong> – Full control over appearance with CSS customization</li>
<li><strong>File Validation</strong> – Built-in file type and size validation</li>
<li><strong>Image Processing</strong> – Automatic image resizing, cropping, and quality optimization</li>
<li><strong>Thumbnail Generation</strong> – Customizable thumbnail previews</li>
<li><strong>Security Features</strong> – Nonce verification and user permission checks</li>
<li><strong>Action Hooks</strong> – WordPress hooks for customization and integration</li>
<li><strong>Translation Ready</strong> – Full internationalization support</li>
<li><strong>Performance Optimized</strong> – Assets loaded only when needed</li>
</ul>
<h3>Shortcode Usage</h3>
<p>Insert the dropzone anywhere in your posts, pages, or templates with the shortcode:</p>
<pre><code>[wp-dropzone]
</code></pre>
<p>Or in PHP templates:</p>
<pre><code><?php echo do_shortcode( '[wp-dropzone]' ); ?>
</code></pre>
<h3>Shortcode Attributes</h3>
<p>The following attributes can be used with the <code>[wp-dropzone]</code> shortcode:</p>
<ul>
<li>
<p><code>id</code> – Unique identifier for the dropzone instance (Default: Auto-generated)<br />
Example: <code>[wp-dropzone id="myUploader"]</code></p>
</li>
<li>
<p><code>title</code> – Title displayed above the dropzone (Default: Empty)<br />
Example: <code>[wp-dropzone title="Drop Files Here"]</code></p>
</li>
<li>
<p><code>desc</code> – Description text for the dropzone (Default: Empty)<br />
Example: <code>[wp-dropzone desc="Upload your files here"]</code></p>
</li>
<li>
<p><code>accepted-files</code> – Allowed file types (Default: All files)<br />
Example: <code>[wp-dropzone accepted-files="image/*"]</code></p>
</li>
<li>
<p><code>max-files</code> – Maximum number of files (Default: Unlimited)<br />
Example: <code>[wp-dropzone max-files="3"]</code></p>
</li>
<li>
<p><code>auto-process</code> – Auto-upload files when dropped (Default: true)<br />
Example: <code>[wp-dropzone auto-process="false"]</code></p>
</li>
<li>
<p><code>clickable</code> – Make dropzone clickable (Default: true)<br />
Example: <code>[wp-dropzone clickable="false"]</code></p>
</li>
<li>
<p><code>remove-links</code> – Show remove file buttons (Default: false)<br />
Example: <code>[wp-dropzone remove-links="true"]</code></p>
</li>
<li>
<p><code>upload-button-text</code> – Text for manual upload button (Default: “Upload Files”)<br />
Example: <code>[wp-dropzone upload-button-text="Upload Selected Files"]</code></p>
</li>
<li>
<p><code>resize-width</code> – Resize images to specified width (Default: Original)<br />
Example: <code>[wp-dropzone resize-width="800"]</code></p>
</li>
<li>
<p><code>resize-height</code> – Resize images to specified height (Default: Original)<br />
Example: <code>[wp-dropzone resize-height="600"]</code></p>
</li>
<li>
<p><code>resize-quality</code> – Image quality (0.1-1.0) (Default: 0.8)<br />
Example: <code>[wp-dropzone resize-quality="0.9"]</code></p>
</li>
<li>
<p><code>resize-method</code> – Resize method: contain/crop (Default: contain)<br />
Example: <code>[wp-dropzone resize-method="crop"]</code></p>
</li>
<li>
<p><code>thumbnail-width</code> – Thumbnail width in pixels (Default: 120)<br />
Example: <code>[wp-dropzone thumbnail-width="150"]</code></p>
</li>
<li>
<p><code>thumbnail-height</code> – Thumbnail height in pixels (Default: 120)<br />
Example: <code>[wp-dropzone thumbnail-height="150"]</code></p>
</li>
<li>
<p><code>thumbnail-method</code> – Thumbnail method: contain/crop (Default: crop)<br />
Example: <code>[wp-dropzone thumbnail-method="contain"]</code></p>
</li>
</ul>
<h3>Styling Options</h3>
<p>The following styling attributes can be used to customize the dropzone appearance:</p>
<ul>
<li>
<p><code>border-width</code> – Border width<br />
Example: <code>[wp-dropzone border-width="3px"]</code></p>
</li>
<li>
<p><code>border-style</code> – Border style (solid, dashed, etc.)<br />
Example: <code>[wp-dropzone border-style="dashed"]</code></p>
</li>
<li>
<p><code>border-color</code> – Border color (hex code)<br />
Example: <code>[wp-dropzone border-color="#007cba"]</code></p>
</li>
<li>
<p><code>background</code> – Background color (hex code)<br />
Example: <code>[wp-dropzone background="#f0f0f1"]</code></p>
</li>
<li>
<p><code>margin-bottom</code> – Bottom margin<br />
Example: <code>[wp-dropzone margin-bottom="20px"]</code></p>
</li>
</ul>
<h3>Advanced Features</h3>
<h4>Action Hooks</h4>
<p>The plugin provides several action hooks for customization:</p>
<pre><code>// Before file upload
do_action( 'wp_dropzone_before_upload_file', $file );

// After file upload
do_action( 'wp_dropzone_after_upload_file', $file );

// After media library insertion
do_action( 'wp_dropzone_after_insert_attachment', $attachment_id );
</code></pre>
<h4>JavaScript Integration</h4>
<p>Access dropzone instance and events:</p>
<pre><code>// Get dropzone instance
var dropzone = Dropzone.forElement("#wp-dz-yourID");

// Add event listeners
dropzone.on("success", function(file, response) {
    console.log("File uploaded:", response);
});
</code></pre>
<h3>Examples</h3>
<h4>Basic Image Upload</h4>
<pre><code>[wp-dropzone accepted-files="image/*" max-files="5" title="Upload Images"]
</code></pre>
<h4>Document Upload with Restrictions</h4>
<pre><code>[wp-dropzone accepted-files=".pdf,.doc,.docx" title="Upload Documents" desc="PDF, DOC, DOCX files only"]
</code></pre>
<h4>Styled Upload Area</h4>
<pre><code>[wp-dropzone title="Drop Files Here" desc="Drag and drop files or click to browse" border-style="dashed" border-color="#007cba" background="#f8f9fa"]
</code></pre>
<h4>Manual Upload Button</h4>
<pre><code>[wp-dropzone auto-process="false" upload-button-text="Upload Selected Files" title="Select Files"]
</code></pre>


WP Dropzone

Very nicely written, no heavy front-end or mess of scripts to disable, just a succinct and perfectly functioning Dropzone on your Wordpress or Woocommerce website with simple options to include, via Shortcode.

I'm a very happy user! 

An Excellent Plugin

Upload files into WordPress media library from front-end with drag-and-drop functionality and customizable options.

Startklar Elementor Addons vs WP Dropzone