Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/joallard/comfortable-contact-form
A comfortable contact form
https://github.com/joallard/comfortable-contact-form
contact-form convention-over-configuration frontend sensible-defaults ui ux ux-optimized
Last synced: 4 days ago
JSON representation
A comfortable contact form
- Host: GitHub
- URL: https://github.com/joallard/comfortable-contact-form
- Owner: joallard
- Created: 2020-04-04T21:00:05.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-05-02T02:22:11.000Z (over 4 years ago)
- Last Synced: 2024-10-18T21:57:57.781Z (about 1 month ago)
- Topics: contact-form, convention-over-configuration, frontend, sensible-defaults, ui, ux, ux-optimized
- Homepage: http://jonathan.allard.io/comfortable-contact-form/
- Size: 50.8 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# The Comfortable Contact Form
(until I find a better name!)
For asynchronous communication between your visitors and you.
* Using a contact form as a visitor is full of friction and never very fun.
* Implementing a contact form is a pain and one more thing to bother with
I've been forever dissatisfied with the current solutions.
In my website mockups, asking a question is always designed to be easy and encouraged. It is not so.
Not anymore.
Your visitor talking to you should be a smooth, pleasant experience. It should be as easy as asking a salesperson a quick question.
As a developer, you should drop one line in your code and be done with it. It should have good defaults which you can customize.
## Usage
Choose your own level of bothering, from minimal to hands-on.
Custom elements approach:
```html
```
And then:
```js
document.querySelector("contact-form-dialog").open()
```
And that's it.
Or use a macro:
```haml
= contact_form_dialog
```
Will also be available: integration in React or Vue.
### Options
Dialog:
* action (`POST /submissions`)
* locale (`.locale`)
Open:
* context (``)
### I18n
Enough of second-class, time sink I18n. Just works by default, batteries included.
### Styling
Uses `--accent-color` as the accent color. (Leaving empty: minimal black and white)
## Design methodology
It should be constantly optimized for humans, never the reverse.
We should make the user as happy as possible, the developer as happy as possible, and the staff as happy as possible.
### Little details
* Button hit zones are large enough for fingers
* Focus on communication first, details after
* It is a dialog on the page and doesn't obscure the context
* It saves automatically, and persists from page to page
* It remembers you, but will happily forget you if you ask
* You can take as few or as much space as you want to write
* You can edit your answer
* You can save it for later, or discard altogether and start over (and undo!)
* Context can be programmatically added
### CSS
You can include as much or as few CSS as you wish:
* None: No CSS.
* Minimal: The CSS it takes for it not to look broken, nothing more. Equivalent of default HTML styles.
* Themed: The whole enchilada, ready to go. Includes niceties like border-radius and some font-weights. Define `--accent-color` and you're good to go!
## Todo
* Dark background
* Accessibility tags