Popup Maker + Fluent Forms | Add Mobile Field (Country Code)

Popup Maker + Fluent Forms Tutorial: Add Mobile Field (Country Code) & No. | WordPress Tutorials

Published by CodePress Academy | Updated: October 2025

In this WordPress tutorial, we’ll learn how to integrate Popup Maker with Fluent Forms to create a high-converting popup that collects mobile numbers with a country code selector. This guide is perfect for marketers, website owners, and developers who want to enhance user experience and lead collection through professional popup forms.

🔹 What is Popup Maker?

Popup Maker is one of the most powerful and user-friendly WordPress plugins that helps you create responsive popups for email signups, promotions, or announcements. It integrates seamlessly with popular form plugins like Fluent Forms, Contact Form 7, and Gravity Forms, giving you complete control over your marketing popups.

🔹 What is Fluent Forms?

Fluent Forms is a lightweight, drag-and-drop WordPress form builder that makes it easy to design custom forms in minutes. With features like conditional logic, smart email notifications, and integrations with email marketing tools, it’s one of the best alternatives to Contact Form 7 or WPForms.

🔹 Why Add a Mobile Number Field with Country Code?

Adding a mobile number field with country code is essential for global businesses. It helps capture accurate user data, prevents form errors, and simplifies follow-ups for marketing or customer support. With Fluent Forms, you can easily implement this feature using a combination of “Phone Field” and “Custom Mask Input”.

Step-by-Step Tutorial

Step 1: Install Plugins

Go to your WordPress Dashboard → Plugins → Add New → Search for Popup Maker and Fluent Forms. Install and activate both plugins. These two tools work together smoothly without requiring extra code.

Step 2: Create a Form in Fluent Forms

From the WordPress dashboard, open Fluent Forms → Add New Form → choose a “Contact Form” template. Add a new field labeled Mobile Number and set the input type to “Phone Number”. Under “Input Mask”, add the international format such as to include country codes.

Step 3: Design the Popup with Popup Maker

Go to Popup Maker → Add Popup → Give it a name like “Mobile Number Form Popup”. Inside the popup editor, add your Fluent Form shortcode (you can copy this from the Fluent Form’s settings). Example: [fluentform id="1"].

Step 4: Trigger the Popup

Set popup triggers like “On Button Click” or “On Exit Intent” to display your form at the right moment. Customize the popup theme, animation, and styling to match your brand’s colors and .

Step 5: Test on Mobile Devices

Always test your popup on multiple devices to ensure responsiveness. Check that the phone field accepts numbers in different country formats and works perfectly across browsers.

Bonus Tips

• Use FluentCRM to automatically save leads collected through this popup.
• Add reCAPTCHA for spam protection.
• Track popup conversions with Google Analytics or MonsterInsights.

SEO Optimization for WordPress Tutorial

To make this tutorial rank higher, include keywords like Popup Maker Tutorial, Fluent Forms Guide, WordPress Popup Integration, and Add Country Code in Form. Write engaging meta descriptions, use proper heading tags (H1–H3), and embed your YouTube tutorial with keyword-rich titles and captions.

Conclusion

By combining Popup Maker and Fluent Forms, you can build an advanced lead-generation system directly inside WordPress — without writing a single line of code. Adding the country code phone field improves global reach, enhances data accuracy, and increases conversion rates.

If you found this tutorial helpful, don’t forget to subscribe to CodePress Academy on YouTube for more WordPress Tutorials, plugin tips, and development guides.

Learn More with CodePress Academy

Explore more WordPress video tutorials, premium plugins, and professional website tools on our official website.

More Wordpress Tutorials