=== CatCode Modern Fields for Contact Form 7 ===
Contributors: catcodestudio
Tags: contact form 7, datepicker, select, phone, form fields
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
Stable tag: 1.0.1
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

Modern dropdowns, a calendar, a time picker and a phone field with a country code for your Contact Form 7 forms. Existing forms just look better.

== Description ==

Contact Form 7 uses the browser's own select and date boxes. They look different in every browser, ignore your theme, and on a phone a date field can open a spinner that is hard to use.

Modern Fields replaces them in all your forms at once. There is nothing to rebuild: activate the plugin and your existing `[select]`, `[date]` and `[tel]` fields change on their own.

**Dropdowns**

* Tom Select instead of the browser's select, single and multiple choice.
* A search box from 15 options, which you can change. Shorter lists open without one, so a phone does not pop up its keyboard.
* The blank first option, `first_as_label`, `include_blank` and default values keep working.

**Dates and times**

* A flatpickr calendar instead of the browser's date box, on phones too.
* The month names and the first day of the week follow the language and the settings of your site.
* `min:` and `max:` of the tag limit the calendar, so past dates cannot be picked with `min:today`.
* The visitor sees a readable date, and the mail gets what Contact Form 7 always sent. Another format in the mail: `[_format_your-date "d.m.Y"]`.
* An optional date can be cleared.
* Two new tags: `[modern_time visit min:09:00 max:18:00 step:15]` and `[modern_datetime meeting min:today]`.

**Phone**

* `[tel]` gets a country code with a searchable list of countries. The names are spelled by the visitor's browser in the language of the page.
* The mail gets the full number, such as `+48 501234567`.
* A number pasted or filled in by the browser with its code moves the list to that country. A leading 0 is dropped where it belongs to the national format.
* The default country comes from your site language, or from the settings. One field can have its own: `[tel your-phone country:pl]`.

**Fits your site**

* The fields take their font, colours, border and width from your theme's inputs.
* The accent colour comes from the form's button, or from the settings.
* All fields stay at 16 px or more on phones, so iOS does not zoom into the page.
* Your theme leaves the forms bare? Turn on **Modern form style** on Contact → Modern Fields: labels above the fields, fields 48 px high with rounded corners and a focus ring, a filled button in the accent colour and a coloured message after sending. It is on for new installs and stays off on sites that update from 1.0.0, so an update does not change how your forms look.
* Errors are shown on the fields as usual, and the fields clear after the form is sent.
* Assets load only on pages with a form. Tom Select and flatpickr ship with the plugin: nothing is loaded from a CDN, and the plugin sends no data anywhere.

A single field can stay as it was: add `class:no-modern` to its tag.

**Pro**

* Confirmation step: the visitor sees the answers and sends them with a second click.
* Repeatable groups: `[modern_repeat guests min:1 max:5 "Add a guest"]` ... `[modern_repeat_end]`. Each row is validated, `[guests]` prints all the rows in the mail.
* Phone masks for mobile numbers of 27 countries, and your own: the number takes its shape as it is typed, and a number with digits missing does not pass.
* Updates from catcode.com.ua in Dashboard → Updates.

A 7-day trial is available on Contact → Modern Fields.

Contact Form 7 is a plugin by Rock Lobster Inc. This plugin is an independent add-on, not affiliated with or endorsed by its authors.

== Installation ==

1. Install and activate Contact Form 7.
2. Install and activate Modern Fields.
3. Open any page with a form. Settings are on Contact → Modern Fields.

== Frequently Asked Questions ==

= Do I have to change my forms? =

No. `[select]`, `[date]` and `[tel]` change on their own. New tags are only needed for a time, or a date with a time.

= Will my mails change? =

Dates reach the mail as Contact Form 7 sends them, YYYY-MM-DD. Phone numbers get the country code in front.

= What happens if I deactivate the plugin? =

`[select]`, `[date]` and `[tel]` go back to the browser's fields. The `[modern_time]` and `[modern_datetime]` tags need the plugin: replace them with `[text]` first.

= How do I use it with a form that appears later, in a pop-up? =

If the page does not print the form when it loads, add `add_filter( 'catcode_cf7mf_load_everywhere', '__return_true' );` and call `window.catcodeModernFields.init( form )` after the form appears.

= My theme does not style Contact Form 7. Can the plugin do it? =

Yes: tick **Modern form style** on Contact → Modern Fields. The accent colour setting colours the button, the selected day and the chips. In code: `add_filter( 'catcode_cf7mf_form_style', '__return_true' );` turns it on, `__return_false` off.

= Are the countries in the list configurable? =

Use the `catcode_cf7mf_countries` filter: it gets an array of two-letter codes and calling codes.

== Screenshots ==

1. A form with a dropdown, a calendar and a phone field.
2. The calendar.
3. The settings screen.

== Third party libraries ==

The plugin ships these libraries in `assets/vendor`:

* Tom Select 2.6.2, Apache-2.0. Source: https://github.com/orchidjs/tom-select
* flatpickr 4.6.13, MIT. Source: https://github.com/flatpickr/flatpickr

== Changelog ==

= 1.0.1 =
* New setting, Modern form style: the whole form gets a clean look of its own (labels above the fields, 48 px fields, rounded corners, focus ring, filled button, coloured messages). On for new installs, off for sites that update.
* Fresher dropdowns, chips, calendar, time picker and repeatable groups: soft shadows, rounded options with a tick on the chosen one, a dot on today, clear Add and Remove buttons.
* The browser's light grey button no longer makes the accent colour grey.

= 1.0.0 =
* First release.

== Upgrade Notice ==

= 1.0.1 =
A cleaner look for the dropdowns and the calendar, and an optional modern style for the whole form. The rest of your forms looks as before until you turn it on.

= 1.0.0 =
First release.
