DTRT Form

Simple, accessible forms.

Features

• Autocomplete
• Inline JavaScript validation (optional)
• Inline Noscript validation (optional)
• Block Noscript validation error links list (optional)
• No Confirm Form Resubmission prompt on resubmit

Issues & Roadmap

See issues.

Setup and Maintenance

Please read DTRT WordPress Plugin Boilerplate: Workflows.

WordPress Installation

Please read the WordPress readme.txt.

WordPress Usage

Backend forms

Limited restyling of the WP Admin plugin options page.

Comment form

Styling and jQuery validation of the standard comment form (#commentform).

Custom form shortcode

Please use the provided shortcode to embed a custom form:

<!-- within the editor -->
[wpdtrt_form option="value"]

// in a PHP template, as a template tag
<?php echo do_shortcode( '[wpdtrt_form option="value"]' ); ?>

Options

1. template="contact" - generate a form from the template and JSON data
2. errors_list="1|0" - display a list of errors above the form; clicking an error jumps the user to the affected field
3. errors_inline="1|0" - display each error directly after the affected field;

Custom form fields

Edit the data file to change the field attributes or order: ./data/form-{templatename}.json

Styling

Core CSS properties may be overwritten by changing the variable values in your theme stylesheet.

See scss/variables/_css.scss.

Dependencies

JavaScript

Inline validation works with or without JavaScript, but is faster when JavaScript is enabled.

• jQuery
• jQuery Validation Plugin

Demo pages

See plugin settings page in WP Admin.

Testing

Autocomplete

Chrome

• Preferences > Auto-fill > Addresses and more > Save and fill addresses

Emailing of form submission in local development

1. Install and run MailCatcher (see https://wordpress.stackexchange.com/a/195830):

   gem install mailcatcher
   mailcatcher

2. Update php.ini:

   # php.ini (MAMP Pro: File > Edit > PHP > Version)
   sendmail_path = /Users/dan/.rvm/gems/ruby-2.6.3/wrappers/catchmail -f wpdev@localhost.dev # any email works
   smtp_port = 1025

3. MAMP Pro View > Postfix

   1. Include Postfix service in GroupStart
   2. Set domain of outgoing e-mails to: localhostname.tld
   3. Use a Smart host for routing: Server name: 127.0.0.1:1080

4. Send mail

5. Watch for mail at http://127.0.0.1:1080/

MailCatcher troubleshooting

1. Update php.ini (https://tommcfarlin.com/mailcatcher-mamp-wordpress/):

   # php.ini
   smtp_port = 1025
   sendmail_path = /usr/bin/env catchmail -f wpdev@localhost.dev

2. Send mail:

   # Apache log
   env: catchmail: No such file or directory

3. Locate the path where gems are installed:

   gem environment --help
   gem environment gemdir # /Users/dan/.rvm/gems/ruby-2.6.3

4. Locate the catchmail binary (executable):

   cd /Users/dan/.rvm/gems/ruby-2.6.3 && ls # bin    build_info    cache    doc    environment    extensions    gems    specifications    wrappers

5. Update php.ini:

   # php.ini
   sendmail_path = /Users/dan/.rvm/gems/ruby-2.6.3/bin/catchmail -f wpdev@localhost.dev`

6. Send mail:

   # Apache log
   send mail > env: ruby_executable_hooks: No such file or directory

7. Refresh the executable-hooks to the latest version (https://stackoverflow.com/a/29519638):

   sudo gem install --user-install executable-hooks

8. Send mail:

   # Apache log
   send mail > env: ruby_executable_hooks: No such file or directory

9. Locate ruby_executable_hooks:

   which ruby_executable_hooks # /Users/dan/.rvm/gems/ruby-2.6.3/bin/ruby_executable_hooks
   # unsure how to use this information..

10. Update php.ini:

    # php.ini
    sendmail_path = /Users/dan/.rvm/gems/ruby-2.6.3/environment catchmail -f wpdev@localhost.dev

11. Send mail:

    # Apache log
    Users/dan/.rvm/gems/ruby-2.6.3/environment: Permission denied

12. Update php.ini (https://github.com/rvm/executable-hooks/issues/6#issuecomment-609032741):

    # php.ini
    sendmail_path = /Users/dan/.rvm/gems/ruby-2.6.3/wrappers/catchmail -f wpdev@localhost.dev

13. Send mail :)