=== Enhanced Addon for Contact Form 7 === Contributors: aniketji007 Tags: contact form 7, contact form 7 addon, cf7, form styling, contact form Plugin URI: https://dragwyb.com/product/contact-form-7-addon/?utm_source=wpplugin&utm_medium=plugin_uri&utm_campaign=form_builder_demo Author URI: https://dragwyb.com/?utm_source=wpplugin&utm_medium=author_uri&utm_campaign=eacf7_demo Requires at least: 5.0 Tested up to: 7.1 Requires PHP: 5.6 Stable tag: 1.2.1 License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Enhance Contact Form 7 with styling, editor live preview, date picker, country codes, floating labels, icons, and tooltips. == Description == **Enhanced Addon for Contact Form 7** extends Contact Form 7 with additional form styling and field customization options. Customize the appearance of your Contact Form 7 forms directly from the WordPress admin without editing theme files or writing custom CSS. Use the built-in live preview to see changes while configuring your form. The addon also provides enhanced form fields and label features, including a Flatpickr date and time picker, international telephone country codes, field label icons, tooltips, and floating labels. Each Contact Form 7 form can have its own customization settings, making it easier to create forms that match the design of different pages or sections of your website. == Video Tutorials == Watch these videos to see how to use the plugin's enhanced features. **Advanced Flatpickr Date & Time Field** Watch how to configure the Flatpickr date and time field. https://www.youtube.com/watch?v=YVVGrZkSnPo **Country Code Telephone Field** Watch how to add a telephone field with country code selection. https://www.youtube.com/watch?v=2AZ0JhuoBE0 **Label Icons, Tooltips & Floating Labels** Watch how to add label icons, tooltips, and floating labels. https://www.youtube.com/watch?v=K2xvK6BAgdM == Key Features == * **Contact Form 7 Form Styling** – Customize the appearance of your Contact Form 7 forms without writing custom CSS. * **Live Form Preview** – Preview styling changes directly while editing your form. * **Per-Form Customization** – Configure different styling settings for individual Contact Form 7 forms. * **Responsive Styling** – Configure supported styling options for different device sizes. * **Form Fields Styling** – Customize supported colors, typography, spacing, borders, radius, shadows, and other field properties. * **Button Styling** – Customize button alignment, typography, colors, spacing, borders, radius, and box shadow. * **Form Message Styling** – Customize success and error message appearance. * **Flatpickr Date & Time Field** – Add an enhanced date and time picker to Contact Form 7 forms. * **Telephone Country Code Field** – Add international telephone inputs with selectable country codes. * **Field Label Icons** – Add icons to Contact Form 7 field labels. * **Label Tooltips** – Add tooltip text to field labels. * **Floating Labels** – Create modern floating-label form fields. * **Reset Controls** – Reset individual settings or restore all addon settings to their defaults. * **Easy Contact Form 7 Integration** – Configure addon features directly from the Contact Form 7 editor. == Requirements == * WordPress 5.0 or later * PHP 5.6 or later * Contact Form 7 Contact Form 7 must be installed and activated to use this plugin. == Installation == = From the WordPress Plugin Directory = 1. Go to **Plugins > Add New** in your WordPress dashboard. 2. Search for **Enhanced Addon for Contact Form 7**. 3. Click **Install Now**. 4. Click **Activate**. 5. Make sure Contact Form 7 is installed and active. = Manual Installation = 1. Download the plugin ZIP file. 2. Go to **Plugins > Add New**. 3. Click **Upload Plugin**. 4. Select the downloaded ZIP file. 5. Click **Install Now**. 6. Activate the plugin from the **Plugins** page. == Usage == 1. Make sure **Contact Form 7** is installed and activated. 2. Go to **Contact > Contact Forms**. 3. Edit an existing Contact Form 7 form or create a new form. 4. Open the **Addon Settings** tab. 5. Configure the available form styling and field options. 6. Use the live preview to review your changes. 7. Save the form. Addon styling settings are managed separately for each Contact Form 7 form. == Enhanced Fields == = Flatpickr Date & Time Field = The Flatpickr field provides a modern date and time picker for Contact Form 7. It can be used for forms that require visitors to select dates, times, or both. = Telephone Country Code Field = The Telephone Country Code Field adds international country code selection to telephone inputs. Visitors can select a country code when entering their phone number, making the field suitable for websites that receive submissions from users in different countries. == Label Features == = Field Label Icons = Add an icon to supported Contact Form 7 field labels to improve visual identification and form usability. = Label Tooltips = Add tooltip text to field labels to provide additional information or instructions to visitors. = Floating Labels = Enable floating labels for supported fields to create a modern form input layout while keeping field labels visible during interaction. == Frequently Asked Questions == = Is Contact Form 7 required? = Yes. Enhanced Addon for Contact Form 7 is an addon for Contact Form 7, so Contact Form 7 must be installed and active. = Can I use the addon with multiple Contact Form 7 forms? = Yes. Each Contact Form 7 form can have its own addon settings and styling configuration. = Does the addon replace Contact Form 7? = No. The plugin extends Contact Form 7. Contact Form 7 continues to handle the underlying form functionality and submissions. = Can I customize Contact Form 7 forms without CSS? = Yes. The addon provides controls for supported styling options without requiring custom CSS. = Can I customize form fields? = Yes. You can customize supported field appearance, including colors, typography, spacing, borders, border radius, and box shadows. = Can I customize the submit button? = Yes. The addon provides styling controls for supported form buttons, including alignment, typography, colors, spacing, borders, border radius, and box shadow. = Does the addon support responsive form styling? = Yes. Supported responsive controls allow you to configure styling for different device sizes. = Does the plugin include a date picker? = Yes. The plugin includes a Flatpickr-based date and time field. = Can visitors select a country code for telephone fields? = Yes. The Telephone Country Code Field provides country code selection for international telephone numbers. = Can I add icons to Contact Form 7 field labels? = Yes. Supported field labels can display an icon. = Can I add tooltips to field labels? = Yes. You can configure tooltip text for supported field labels. = Does the plugin support floating labels? = Yes. Floating labels are available for supported Contact Form 7 fields. = Can different Contact Form 7 forms have different styles? = Yes. Styling settings are configured per form, allowing each Contact Form 7 form to have its own appearance. = Does the plugin handle form submissions? = No. Contact Form 7 handles form submission functionality. This addon provides additional styling and field features. = Does the plugin require another form builder? = No. The addon works with Contact Form 7 and does not require a separate form builder. = Can I use the plugin with my existing WordPress theme? = Yes. The addon is designed to work with WordPress themes. However, theme-specific CSS may affect the final appearance of a form. = Where can I find the addon settings? = Edit a Contact Form 7 form and open the **Addon Settings** tab. == External Services == This plugin includes or integrates with the following libraries and services: ### Flatpickr Flatpickr is used for date and time field functionality. * **Source:** https://github.com/flatpickr/flatpickr * **Local Paths:** `assets/lib/flatpickr/js/flatpickr.min.js`, `assets/lib/flatpickr/css/flatpickr.min.css` ### Intl-Tel-Input Intl-tel-input is used for country code selection functionality. * **Source:** https://github.com/jackocnr/intl-tel-input * **Local Paths:** `assets/vendor/intl-tel-input/` ### Dragwyb Feedback API The Dragwyb Feedback API is used to submit optional user feedback and diagnostic reports directly to the plugin developers from the WordPress admin dashboard. Data is only sent when the site administrator explicitly submits the feedback form. * **Service:** https://feedback.dragwyb.com * **Privacy Policy:** https://dragwyb.com/privacy-policy/ == Privacy == Dragwyb Forms may store form submissions and related form data in the WordPress database. Depending on the features configured by the website administrator, form entries may contain information submitted by website visitors. Website administrators are responsible for configuring their forms and privacy settings according to their applicable privacy and data protection requirements. == Screenshots == 1. Enhanced Addon for Contact Form 7 Addon Settings. 2. Contact Form 7 form styling and customization controls. 3. Telephone Country Code option. 4. Flatpickr date and time field option. 5. Floating Label Preview. 6. Field Label Icon and Tooltip settings. 7. Responsive form styling controls. 8. Button and form message styling controls. == Changelog == = 1.2.1 = * Fixed: Resolved an issue where the Addon Settings form preview failed to load when the form contained special characters. * Improved: Flating label background color style. = 1.2.0 = * Added: Button style controls including alignment, typography, margin, padding, normal and hover colors, border, border radius, and box shadow. * Added: Message style controls including typography, margin, padding, success and error colors, and border radius. * Added: Border, border radius, and box shadow settings for input fields. * Added: Border, border radius, and box shadow settings for forms. * Added: Responsive controls for margin, padding, border radius, typography, and borders. * Added: In-editor responsive device preview switcher. * Added: Reset All option to restore default settings. * Added: Individual reset controls for supported settings. * Added: Field label icons and tooltips. * Added: Floating label support for form fields. * Fixed: Country code HTML rendering issue when selecting multiple countries in Exclude/Include options. * Fixed: Country code flag button styling issues on the frontend. * Fixed: Country code dropdown styling conflicts with third-party themes. * Fixed: Flatpickr date and time selection issue with the Picker Type setting. * Improved: Country code dropdown now closes automatically after selecting a country. * Improved: Addon Editor UI and form customization experience. * Tweak: Renamed "Addon UI" tab to "Addon Settings". = 1.1.0 = * Added: Flatpickr date field with enhanced date picker functionality. * Added: Telephone Country Code Field with country selection. * Fixed: Addon Settings tab visibility issue. * Fixed: PHP warnings. * Fixed: Plugin compatibility issue. * Improved: Review and feedback notice. * Improved: Form editor experience. = 1.0.4 = * Added: Review notice and feedback request form. = 1.0.3 = * Added: Plugin tutorial video to the readme. * Improved: Minor textual improvements. = 1.0.2 = * Security: Improved plugin security and resolved reported security issues. * Fixed: Google font loading issue in the editor preview. * Improved: Prevented unnecessary update requests when update settings are not configured. = 1.0.1 = * Security: Fixed a reported security issue. * Security: Added additional security measures. * Improved: Updated class names to reduce conflicts with other plugins. * Fixed: Form styling issue in preview mode. = 1.0.0 = * Initial release. == Upgrade Notice == = 1.2.0 = Added advanced form styling controls, responsive customization, label icons, tooltips, floating labels, button styling, message styling, and improvements to the date picker and telephone country code fields. == Additional Information == = Compatibility = Enhanced Addon for Contact Form 7 requires Contact Form 7 and is designed to work with WordPress 5.0 and later. = Source Code = The plugin includes development and production assets within the `admin-panel/src` and `assets/build` directories. * `admin-panel/src` contains development versions of JavaScript and CSS assets. * `assets/build` contains production-ready assets used by the plugin. The source code is also available on GitHub: [https://github.com/aniketji07/enhanced-addon-for-contact-form-7](https://github.com/aniketji07/enhanced-addon-for-contact-form-7)