YOSHINANI Form: Japanse style UX oriented contact mail form with PHP

** This project is still under development. **

YOSHINANI Form has various features for common required specification for Japanese web production field.

Overview

Single file make good both frontend and backend.

Basically, when we develop a contact form, we have to pay attention two dimentions, frontend side, and backend side. So far, we always markup HTML and develop sending mail application as backend.

YOSHINANI Form requires just single JSON configuration file, the app generates frontend HTML and backend process automatically.

Simple, but multiple features

As previously stated, YOSHINANI Form keeps it simple, but do not give up accommodate various requirements.

In the general Japanese web production field, there are multiple requirements related with contact forms, rather than global web productions field.

For example, the popular requirement in Japanese form is a confirm screen. Many clients in Japan need a confirm screen before user pushing the submit button. Of course, YOSHINANI Form has a confirm screen by default.

Also, validation is often required. YOSHINANI Form handles form validation both frontend and backend with one single JSON config file. No need hard coding validation settings, regex pattarn twice -- frontend and backend -- any more.

Flexilibity and extensibility

YOSHINANI Form is developed with PHP and Composer. No use specific framework, but we use some Composer libraries. You can extend and modify as you need.

Features

General

Feature	Status
Config JSON file to generate form by PHP	✅
Generate config file with GUI	✅
File Uploading	coming soon
Variable form field increment, decrement and sortable	coming soon

Multiple screens

Feature	Status
Input screen	✅
Multiple input screen	coming soon
Confirm screen(optional)	✅ 1
Complete screen(optional)	✅ 1

Validation

Feature	Status
Frontend validation	✅ 2
Frontend realtime validation	coming soon
Omit frontend validation (not recommended, for dev use)	coming soon
Backend validation	✅ 3
Validation rule - required	✅
Validation rule - email	✅
Validation rule - url	✅
Validation rule - exist email address	coming soon 4
Validation rule - exist url address	coming soon 4
Validation rule - min value and max value	✅ 5
Validation rule - minlength and maxlength	✅
Validation rule - regex pattern	✅
Validation rule - match values between two inputs	coming soon
Preset regex pattern - Japanese postal code	coming soon
Preset regex pattern - Japanese telephone number	coming soon
Preset regex pattern - Katakana, Hiragana, Zenkaku, Hankaku	coming soon

Sending email

Feature	Status
Use PHP built-in mail function(not recommended)	coming soon
Use SMTP(recommended)	✅
Selective mail function or SMTP	coming soon
Multiple recipient	coming soon 6
Set recipient name	✅
Set mail title	WIP
Auto reply to input user	coming soon
HTML mail	WIP 7

Templating

Feature	Status
User editable input screen	WIP 8
User editable confirm screen	WIP 8
User editable complete screen	WIP 8
User editable email template	WIP 8
User editable autoreply template	WIP 8
Simple HTML and CSS markup	✅
Bootstrap 5	coming soon

Conditions

Feature	Status
Conditional multiple recipient	Under consideration
Conditional form fileds	Under consideration

Security and internal behabior

Feature	Status
CSRF token	✅
Avoid duplicate submit	WIP
Store sensitive data to .env	✅
Limit upload filesize	coming soon
Limit file count	coming soon
Periodically remove temporary file 9	coming soon

UX and EFO

Feature	Status
Required and optional label	coming soon
Step navigation	✅ 10
Descriptionn field (optional)	coming soon
Assist messages (optional)	coming soon
Error messages (optional)	coming soon
Valid symbol (optional)	coming soon
Text length counter (optional)	coming soon
Text length meter (optional) 11	coming soon
Progress meter (optional)	Under consideration
Auto-complete Japanese address from postal code (optional)	coming soon
Auto-complete company info from Japanese corporate number (optional)	Under consideration
Prevent submit when unexpected hit enter key	Under consideration
Realtime store input contents to localstorage	Under consideration

Integrate other products

Type	Status
WordPress plugin	Under consideration
Send message to Slack	Under consideration
Send message to Chatwork	Under consideration

Available Form elements

HTML standard

Type	Status
input type text	✅
input type number	✅
input type email	✅
input type url	✅
input type password	✅
input type tel	✅
input type checkbox	✅
input type radio	✅
select	✅ 12
textarea	✅
input hidden	✅
input type datetime-local	coming 0.4.0
input time	coming 0.4.0
input week	coming 0.4.0
input month	coming 0.4.0
input color	coming 0.3.0
input file	coming 0.4.0
input range	coming 0.3.0
fieldset	coming 0.4.0

Customized element

Type	Status
Japanese Address Pattern	coming 0.4.0
Term of use and agreement	coming 0.4.0
Embed term of use and agreement	coming 0.4.0
Drag and Drop file uploader	Under consideration
WYSIWYG editor	Under consideration

Why PHP?

In Japanese web production field, still often use shared servers. Almost typically these servers are installed PHP. In Japan, PHP is commonly middleware for web servers.

Dependencies

PHP

• Routing - bramus/router
• View - twig/twig
• Enviroment variable - vlucas/phpdotenv
• SMTP - phpmailer/phpmailer
• Validation - vlucas/valitron

JavaScript

• Two-way binding - Alpine.js

Installation

WIP

License

MIT License

Footnotes

1. Currently, force enabled confirm and complete screen. In future, it will be optional. ↩ ↩²

2. Currently, HTML standard validate function is implemented. ↩

3. Currently, partialy support. ↩

4. Backend only. ↩ ↩²

5. input type number only. ↩

6. Currently, single user can recieve a message. ↩

7. Function is already implemented, but template is WIP. ↩

8. Editable template function and overriding logic is already implemented, but fronend is not yet. Always user can back to default template. ↩ ↩² ↩³ ↩⁴ ↩⁵

9. cron is required. ↩

10. When multiple screen is enabled only. ↩

11. This maybe good for textarea. ↩

12. Partial support currently. option selected attribute, optgroup, multiple attribute is not implmented yet. ↩