message-popup-for-contact-form-7
Last commit date
admin
1 year ago
includes
1 year ago
public
1 year ago
message-popup-for-contact-form-7.php
1 year ago
readme.txt
1 day ago
readme.txt
192 lines
| 1 | === Message Popup For Contact Form 7 === |
| 2 | Contributors: howdytheme |
| 3 | Tags: contact form 7 popup, cf7 popup, contact form 7 success message, contact form 7 error message, form submission popup |
| 4 | Requires at least: 5.5 |
| 5 | Tested up to: 7.0 |
| 6 | Stable tag: 1.0 |
| 7 | Requires PHP: 7.0 |
| 8 | License: GPLv2 or later |
| 9 | License URI: https://www.gnu.org/licenses/gpl-2.0.html |
| 10 | |
| 11 | Show a beautiful, fully customizable success popup notification on Contact Form 7 submission. Control colors, borders, size, button text, and auto-hide timer — no code needed. |
| 12 | |
| 13 | == Description == |
| 14 | |
| 15 | **Message Popup For Contact Form 7** replaces the default inline success message from Contact Form 7 with a stunning, fully branded popup notification. When a visitor submits your CF7 form, instead of a plain text confirmation they might easily miss, they are greeted with a bold, centered popup modal that clearly confirms their submission was received. |
| 16 | |
| 17 | Every visual detail of the success popup is configurable directly from the Contact Form 7 editor panel — no shortcodes, no custom CSS, and no coding required. Adjust popup size, colors, borders, button text, and set an auto-close timer — all from the WordPress admin. |
| 18 | |
| 19 | > **Requires Contact Form 7** to be installed and activated on your WordPress site. |
| 20 | |
| 21 | [📄 Documentation](https://topsmodule.com/how-to-show-message-popup-for-contact-form-7/) | [🔴 Live Demo](https://topsmodule.com/task/message-popup-for-contact-form-7/) | [⭐ Upgrade to Pro](https://topsmodule.com/product/message-popup-for-contact-form-7/) |
| 22 | |
| 23 | --- |
| 24 | |
| 25 | = Why Replace the Default Contact Form 7 Message? = |
| 26 | |
| 27 | The built-in Contact Form 7 success message appears inline — often below the fold — and blends quietly into the page. Many visitors never notice it, which creates confusion and may lead to duplicate form submissions. **Message Popup For Contact Form 7** solves this by displaying a prominent, centered popup the moment a form is submitted, so your users always know exactly what happened. |
| 28 | |
| 29 | --- |
| 30 | |
| 31 | = Free Features = |
| 32 | |
| 33 | **Success Popup Notification** |
| 34 | * Enable or disable the success popup independently for each Contact Form 7 form on your site |
| 35 | * Set a fully custom success message text to display in the popup — or fall back to CF7's default confirmation message |
| 36 | * Per-form popup configuration — assign unique success popup settings to different CF7 forms across your site |
| 37 | |
| 38 | **Popup Appearance & Styling** |
| 39 | * **Popup Width** — Set the exact width of the popup modal (e.g. 478px) to fit your layout |
| 40 | * **Popup Border Radius** — Round the popup corners to match your site's design style (e.g. 5px) |
| 41 | * **Popup Background Color** — Choose a custom background color for the popup modal |
| 42 | * **Background Overlay Color** — Set the color and opacity of the overlay that appears behind the popup |
| 43 | * **Popup Border Width** — Control the thickness of the popup border |
| 44 | * **Popup Border Color** — Select a custom border color for the popup |
| 45 | * **Popup Text Color** — Set the font color of the success message text inside the popup |
| 46 | * **Button Background Color** — Customize the background color of the popup close/OK button |
| 47 | |
| 48 | **Popup Behavior** |
| 49 | * **Custom Button Text** — Change the label of the popup close/confirm button to any text you want (e.g. "Got it!", "Thanks!", "Close") |
| 50 | * **Auto-Hide Timer** — Set the popup to automatically close after a defined number of milliseconds (e.g. 5000 = 5 seconds) without requiring user interaction |
| 51 | |
| 52 | --- |
| 53 | |
| 54 | = Pro Version Features = |
| 55 | |
| 56 | Upgrade to **Message Popup For Contact Form 7 Pro** to unlock full control over the **failure/error popup** — shown when a form submission fails validation or the mail cannot be sent. |
| 57 | |
| 58 | [⭐ Get the Pro Version →](https://topsmodule.com/product/message-popup-for-contact-form-7/) |
| 59 | |
| 60 | **Failure Popup Notification** |
| 61 | * **Enable Failure Message** — Toggle on a dedicated popup for failed or invalid CF7 form submissions, separate from the success popup |
| 62 | * **Custom Failure Message Text** — Write a specific error message to guide users when their submission fails |
| 63 | * **Failure Button Text** — Customize the label on the failure popup's close/retry button independently from the success button |
| 64 | |
| 65 | **Failure Popup Appearance & Styling** |
| 66 | * **Failure Popup Width** — Set the width of the failure popup independently from the success popup |
| 67 | * **Failure Popup Border Radius** — Control the corner roundness of the failure popup |
| 68 | * **Failure Popup Background Color** — Choose a distinct background color for the error popup (e.g. light red to signal an error) |
| 69 | * **Failure Background Overlay Color** — Set a custom overlay color behind the failure popup |
| 70 | * **Failure Popup Border Width** — Define the border thickness for the failure popup |
| 71 | * **Failure Popup Border Color** — Select a custom border color for the error popup |
| 72 | * **Failure Popup Text Color** — Set the text color inside the failure popup |
| 73 | * **Failure Button Background Color** — Customize the close/retry button color on the failure popup |
| 74 | |
| 75 | **Failure Popup Behavior** |
| 76 | * **Failure Auto-Hide Timer** — Set the failure popup to automatically close after a specified duration (in milliseconds), separate from the success popup timer |
| 77 | |
| 78 | Pro license is **lifetime and valid for unlimited sites** — outstanding value for agencies and freelancers. |
| 79 | |
| 80 | --- |
| 81 | |
| 82 | = Perfect For = |
| 83 | |
| 84 | * Contact and enquiry forms where submission confirmation visibility is critical |
| 85 | * Lead generation and landing page forms that need a professional thank-you response |
| 86 | * Booking and appointment request forms |
| 87 | * Event registration and RSVP forms |
| 88 | * Support and help desk ticket submission forms |
| 89 | * Any CF7 form where the default inline message is too easy to miss |
| 90 | |
| 91 | --- |
| 92 | |
| 93 | = How It Works = |
| 94 | |
| 95 | 1. Install and activate the plugin (Contact Form 7 must already be active). |
| 96 | 2. Open any Contact Form 7 form in your WordPress admin — you will see a new **Popup Setting** tab. |
| 97 | 3. Enable the success popup and configure your message, colors, borders, button text, and auto-hide timer. |
| 98 | 4. Save the form. That's it! |
| 99 | |
| 100 | When a visitor submits the form on the front end, the standard CF7 inline message is replaced by your fully styled popup modal, appearing centered on screen. |
| 101 | |
| 102 | --- |
| 103 | |
| 104 | = What Users Are Saying = |
| 105 | |
| 106 | > *"The plugin works perfectly. The support is very fast, efficient and helpful."* — markkim |
| 107 | |
| 108 | > *"Very good plugin, easy to configure."* — xoruna |
| 109 | |
| 110 | > *"This is a good plugin… Pro version is good value as it's lifetime unlimited sites."* — gregsloman |
| 111 | |
| 112 | == Installation == |
| 113 | |
| 114 | **From the WordPress Plugin Directory:** |
| 115 | |
| 116 | 1. Make sure **Contact Form 7** is installed and activated on your WordPress site. |
| 117 | 2. In your WordPress dashboard, go to **Plugins > Add New**. |
| 118 | 3. Search for **"Message Popup For Contact Form 7"** and click **Install Now**. |
| 119 | 4. Click **Activate** after installation completes. |
| 120 | 5. Open any Contact Form 7 form — navigate to the **Popup Setting** tab. |
| 121 | 6. Enable the success popup, customize the appearance, and click **Save**. |
| 122 | 7. Visit your site and submit the form to see the popup in action. |
| 123 | |
| 124 | **Manual Upload:** |
| 125 | |
| 126 | 1. Download the plugin ZIP file. |
| 127 | 2. In your WordPress dashboard, go to **Plugins > Add New > Upload Plugin**. |
| 128 | 3. Upload the ZIP and click **Install Now**, then **Activate**. |
| 129 | 4. Follow steps 5–7 above. |
| 130 | |
| 131 | == Frequently Asked Questions == |
| 132 | |
| 133 | = Does this plugin require Contact Form 7? = |
| 134 | |
| 135 | Yes. Contact Form 7 must be installed and activated. This plugin extends CF7 and does not work independently. |
| 136 | |
| 137 | = Where do I configure the popup settings? = |
| 138 | |
| 139 | The settings appear as a **Popup Setting** tab inside the Contact Form 7 form editor. Go to **Contact > Contact Forms**, edit any form, and click the **Popup Setting** tab. |
| 140 | |
| 141 | = Can I assign different popup styles to different Contact Form 7 forms? = |
| 142 | |
| 143 | Yes. Each CF7 form has its own independent popup settings, so you can use a completely different popup design, message, and behavior for each form on your site. |
| 144 | |
| 145 | = Can I customize the popup message text? = |
| 146 | |
| 147 | Yes. You can enter a custom success message in the plugin settings. If you leave the field blank, the plugin falls back to displaying CF7's own default confirmation message. |
| 148 | |
| 149 | = Can I customize the button text on the popup? = |
| 150 | |
| 151 | Yes — custom button text is included in the free version. Enter any label you want for the close/OK button (e.g. "OK", "Got it!", "Thanks!"). |
| 152 | |
| 153 | = Can the popup close automatically after a few seconds? = |
| 154 | |
| 155 | Yes — auto-hide with a custom timer is included in the free version. Enter a value in milliseconds (e.g. 5000 for 5 seconds) and the popup will close automatically after that delay. |
| 156 | |
| 157 | = Does the free version support a popup for failed or invalid submissions? = |
| 158 | |
| 159 | No. The failure/error popup — shown when form validation fails or the email cannot be sent — is a **Pro version** feature. [Upgrade here](https://topsmodule.com/product/message-popup-for-contact-form-7/). |
| 160 | |
| 161 | = Is the popup mobile-friendly? = |
| 162 | |
| 163 | Yes. The popup is fully responsive and adapts correctly to all screen sizes including smartphones, tablets, and desktops. |
| 164 | |
| 165 | = Does the plugin slow down my website? = |
| 166 | |
| 167 | No. Scripts and styles are lightweight and only loaded on pages that contain a Contact Form 7 form. |
| 168 | |
| 169 | = Is the Pro version worth it? = |
| 170 | |
| 171 | The Pro version is a one-time lifetime payment valid for unlimited sites. If you need a distinct, fully styled error popup for failed submissions in addition to the success popup, it is excellent value — especially for agencies managing multiple client sites. |
| 172 | |
| 173 | = Where can I find documentation? = |
| 174 | |
| 175 | Full setup and usage documentation is available at [topsmodule.com](https://topsmodule.com/how-to-show-message-popup-for-contact-form-7/). |
| 176 | |
| 177 | == Screenshots == |
| 178 | |
| 179 | 1. Popup Setting tab in the CF7 form editor — width, border radius, colours, button text, overlay, and auto-hide |
| 180 | 2. Success popup — green checkmark with custom message and OK button after successful submission |
| 181 | 3. Error popup — red X with validation message and OK button on failed submission |
| 182 | |
| 183 | == Changelog == |
| 184 | |
| 185 | = 1.0 = |
| 186 | * Initial release — Replace Contact Form 7 inline messages with fully customizable success popup notifications. Free version includes complete success popup styling, custom button text, and auto-hide timer. Pro version adds full failure/error popup support. |
| 187 | |
| 188 | == Upgrade Notice == |
| 189 | |
| 190 | = 1.0 = |
| 191 | Initial release. Install and start showing beautiful, branded popup notifications on your Contact Form 7 forms instantly — no coding required. |
| 192 |