Forms are rendered in sections, so that each section can be overridden by custom HTML as required. This documentation will show how to do that.
Here is a form example, inside a simple HTML document. This is included
in the deployed application as
This page contains a number of features:
<head>section containing references to CDN and local assets
- An overall block
missive-containercontaining the whole system
- A place to write success/error messages, in
- The form itself,
- Form section blocks, labelled with
- The input elements themselves
- A submit button,
- A progress spinner GIF,
class attributes may change a little, especially during the alpha
period of Missive, while I work out what CSS hooks are useful for most people.
Many cosmetic changes can be done using CSS. However, in some cases, the HTML itself will need to be customised. Read on to see how that can be done!
Inside the main app directory, the following directory structure is used:
form/ child/ README default/ assets.php comments.php container.php submit.php user_email.php user_first_name.php user_full_name.php user_last_name.php user_telephone.php user_title.php js/ messages.js scripts.js styles/ styles.css utility-funcs.php config.php index.php investigator.php mailer.php spinner.gif storage.php
The pieces that can be overridden are in the
default directory. To replace one or
more of these with a custom version, create an identically-named file and put it in
child directory. One easy way of doing this is to copy the default version of
a file to the child directory, and then modify the child copy as you wish.
As long as you keep your customisations to the child folder, they will survive upgrades from the main control panel. However, users are still recommended to take their own automated daily backups.
In a real-world usage, a form is likely to be rendered in an existing page. As long as that page can execute PHP code, it can integrate a Missive form.
Where any Missive code is called, it needs its libraries to be loaded. The following code will do that, and this can be added in the PHP page itself, or in whatever bootstrap file that is available:
Of course, the root directory may need adjustment.
Next, the assets need to be loaded, which is usually done in the
<head> of the
page in question:
Finally, in the appropriate place in the body, the developer can add this tag:
Of course, for any pre-defined section, the developer can choose to add the
appropriate code into their solution without using the rendering helper. For
example, it is not necessary to use the
assets.php script - if it is more
convenient to use
<link> tags directly to load the necessary
files, that is fine.