Country Code For Elementor Form Telephone Field vs Fluid Design System for Elementor

Use Country Code for Elementor Form Telephone Field plugin to easily add an international country code dropdown with flags inside the phone field of your Elementor form. 👉 VIEW FREE DEMO – COUNTRY CODE FOR ELEMENTOR FORM Upgrade to Cool FormKit to unlock more advanced features for Elementor forms – including range slider, signature field, conditional logic, calculator & more. Start building smarter forms with coolformkit today! Free Plugin Features: Seamless Integration with Elementor Forms: This ultimate Elementor addon helps users enter valid mobile numbers by selecting the correct country dial code before typing their phone number. It ensures properly formatted data, improves form validation, and reduces errors in contact forms, booking forms, registration forms, and more. Show Only Selected Countries: Limit the dropdown to display only specific countries. For example, if you only want to show Canada, India, United States, and United Kingdom, simply enter their alpha-2 codes in the Tel field settings like: ca,in,us,gb. Exclude Specific Countries: Show all countries but hide a few by entering their alpha-2 codes (e.g., af,pk removes Afghanistan and Pakistan). Set a Default Country: Preselect a default country code when the form loads. Control Dial Code Visibility: Show or hide the dial code while users type their phone number. Strict Mode Validation: Enable strict mode to block invalid numbers or extra digits based on the selected country. Compatibility with Hello Plus: This addon also works with the Hello Plus form lite widget. If you are creating forms using Elementor Free with Hello Plus, you can still add an international dial code dropdown to the phone field using this ultimate addon. Upgrade for More Features Auto Detect Country Code by User IP Automatically select the user’s country code in the phone field based on their IP address. You can enable this feature inside your Elementor form by using CoolFormKit pro version. Show Preferred Countries at Top By default, the dropdown lists countries alphabetically (A–Z). With this feature, you can pin specific countries (like India, US, UK) at the top for faster user selection. Show or Hide Country Flags Choose whether to display country flags alongside dial codes. For faster form loading, you can disable flags and only show the country dial codes. Country & State Field for Elementor Form Go beyond phone fields! With Cool FormKit Pro, you can add a Country + State dropdown field. Users first select a country, and then the state field updates dynamically with available states. 👉 GET COOL FORMKIT PRO More Essential Addons for Elementor Form Conditional Fields for Elementor Form Add conditional logic to Elementor form fields to show or hide inputs dynamically based on user choices. Make your forms smarter, cleaner, and easier to use. Form Input Masks for Elementor Forms Apply input masks so users enter properly formatted data like phone numbers, dates, credit cards, and more. Improves accuracy and reduces validation errors. Cool FormKit A complete form builder addon for Elementor Free & Pro. It extends Elementor Pro forms with advanced fields or provides a dedicated form builder widget if you’re on Elementor Free. Popular features include: Conditional Logic for Elementor Form Fields Range Slider for Elementor Form Signature Field for Elementor Form Select2 Field Image Radio & Checkbox Fields Rating Field for Elementor Form Calculator for Elementor Cloudflare Turnstile for Elementor Form hCAPTCHA for Elementor Form 👉 VIEW ALL FEATURES Other Popular Addons for Elementor Enhance your website-building workflow with these other ultimate Elementor addons by Cool Plugins: Loop Grid Extender for Elementor Pro Add ACF Repeater fields & advanced taxonomy filters inside Elementor Pro loop grids. AutoPoly – AI Translation for Polylang Instantly auto-translate Elementor pages using AI. Build multilingual websites faster with Polylang + AutoPoly. Timeline Widget for Elementor Display history, events, or milestones in beautiful vertical or horizontal timelines inside Elementor pages. Events Widgets for Elementor Add The Events Calendar widgets to Elementor — show events in grid, list, or carousel layouts with ease. LocoAI – Auto Translate for Loco Translate Translate WordPress plugins & themes automatically with AI. One-click string translation inside Loco Translate. Use of 3rd Party Services: This plugin connects to the Cool Plugins feedback server only for optional usage data sharing and voluntary feedback submission (for example, during plugin deactivation). Data is transmitted solely after explicit user consent. No hidden tracking is performed, and no frontend visitor or site user data is collected. For more details, please review our Data Usage Policy, TOS, and Privacy Policy.It also includes the intl-tel-input library, distributed under the MIT License .

Design once. Scale everywhere. Fluid Design System for Elementor is a small yet powerful add-on that brings fluid typography and spacing presets directly into Elementor’s interface — helping you create fully responsive designs that scale naturally across every screen size, from tiny phones to ultra-wide desktops. 🎯 Think of it like color presets — but for padding, font sizes, and layout gaps. 🎥 Video Tutorials With just a few clicks, you can: – Define minimum and maximum values for typography or spacing. – Apply those values using a new “fluid” unit inside any Elementor control. – Watch your design scale smoothly—no coding or media queries required. – Organize your presets into custom groups (e.g. “Border Radius”, “Thumbnail Sizes”) for better management. Say goodbye to manually tweaking every breakpoint. Say hello to automatic, intelligent design scaling with organized preset management. How It Works ❓ What Does “Fluid” Mean? Traditionally in Elementor, you need to set separate values for each breakpoint — for example, one font size for desktop, another for tablet, and another for mobile. While this gives some control, it has two major downsides: – 🧩 It’s rigid: You only define styles for specific screen widths, leaving awkward gaps in between where the design may not scale smoothly. – ⏱️ It’s time-consuming: Updating styles across multiple breakpoints for every section and element becomes a repetitive, manual process. 💡 Fluid Design System solves this. Instead of setting fixed values for each breakpoint, you define just two—a minimum and a maximum — and the plugin automatically generates a smooth scaling behavior in between. This means: – One preset handles all screen sizes. – You get consistent design and spacing across the entire site. – You save time and reduce manual effort. – You can organize presets into groups for different projects or design systems. This plugin introduces Fluid Units, powered by CSS clamp() and custom presets, allowing your design to scale automatically across all screen sizes. Here’s how it works in real scenarios: ✍️ Fluid Typography Example Old way: 24px (mobile), 36px (tablet), 72px (desktop) Fluid way: One preset: min = 24px, max = 72px Result: Text scales smoothly and proportionally on all devices. 📦 Fluid Spacing Example Old way: 40px (mobile), 80px (tablet), 160px (desktop) Fluid way: One preset: min = 40px, max = 160px Result: Section padding adjusts naturally without breakpoints. 🔗 Fluid Gaps Example Gap between elements: 20px (mobile) to 60px (desktop) Result: Even spacing between containers and widgets on any screen. ❓ Why not Just Use vw or vh Units? While viewport units like vw can scale elements based on screen width, they often lack control — your text might become unreadably small or overly large. The Fluid Design System solves this by generating clamp() values behind the scenes, so your designs stay within defined min/max boundaries. This gives you the flexibility of responsive scaling, combined with the precision of design tokens. 👉 Behind the scenes, the plugin creates CSS variables like: clamp(24px, 5vw, 72px) which Elementor then uses across typography, spacing, padding, margin, and more. How to Use Follow these steps to set up and use the Fluid Design System in your Elementor projects. 📐 Step 1: Configure Fluid Breakpoints Go to Elementor > Site Settings Navigate to the “Fluid Typography & Spacing” tab In the “Breakpoints” panel, set your: Minimum Screen Width (e.g., 360px for mobile) Maximum Screen Width (e.g., 1920px for desktop) 🧰 Step 2: Create Your Presets In the same “Fluid Typography & Spacing” tab: Go to “Typography Presets” to create fluid font size presets Go to “Spacing Presets” to create fluid spacing presets For each preset: Give it a descriptive name Set minimum and maximum values Optionally set custom breakpoints for this preset 🎨 Step 3: Apply Your Presets Edit any page with Elementor In any control that supports custom units (typography, spacing, etc.): Select “fluid” as the unit Choose your preset from the dropdown Watch your design smoothly adapt to different screen sizes 🔧 Step 4: Fine-tune Your Design Use the live preview to see how your presets work Adjust preset values if needed Create additional presets for different design needs Why Use Fluid Design System? Perfect Responsiveness: Create websites that look flawless on every device, from mobile phones to large desktop screens including all intermediate sizes Design Consistency: Maintain perfect spacing and typography harmony across your entire website Time-Saving: Eliminate manual breakpoint adjustments with intelligent fluid scaling Future-Proof: Seamlessly integrates with Elementor’s latest features and updates User-Friendly: Manage everything through Elementor’s familiar interface – no coding or CSS knowledge required Key Features Inline fluid values – Set values directly in controls (“20px ~ 100px”) without visiting Site Settings Save as Preset – Convert inline values into reusable presets with one click Create unlimited fluid typography and spacing presets with custom minimum and maximum values Define global breakpoints or set custom breakpoints for individual presets Real-time preview of changes in the Elementor editor Works with all Elementor widgets and elements Compatible with any WordPress theme including Elementor’s Hello theme Full support for Elementor’s responsive controls and additional breakpoints Mix different units (px, em, rem) in your presets for ultimate flexibility Common Use Cases Fluid Typography: Create responsive headings and text that maintain perfect proportions across all devices Consistent Spacing: Design section padding and margins that adapt smoothly to any screen size Responsive Grids: Build fluid grid layouts with perfect spacing between elements Typography Scale: Set up a complete typography system that works flawlessly everywhere Container Spacing: Create fluid containers that maintain perfect proportions on all devices Element Gaps: Design consistent gaps between elements that scale naturally