How to customize your forms, behaviour and design
While default CSS themes were designed to blend in with some simple blog designs, you might want or even require (in certain) cases to customize the look of your form to match existing content. There are two types of customization you can do: behaviour and design. The behaviour customization allows you to control certain functionality of your form, while design may change your form's look completely by modification to CSS classes provided with the form.
Few notes on how to change the design
In certain cases you may want not want to load CSS dynamically and we've created a simple way to direct our script not to load CSS style if hidden field with id odamae-use-css is present and set to true. To disable default CSS from being loaded, just include this hidden field anywhere on your page. In fact, you can include it right next to the form code, but remember not to place it under <form> element to prevent it from being sent with your form. For example:
You can then download the CSS code, include it to your main style sheet, and modify as needed. We assume that if you are reading this, you have some basic CSS experience and we trust you'll find your way around. Just in case we have a few comments in our CSS files and we'll be adding more as we go along.
In some cases you might want to change a single element style, button, etc. You can load the default style as usual, but add required style class into your main CSS and mark your changes with !important property for them to take priority over the style loaded by Odamae.
Download CSS for light themes here and for dark themes here.
How to change the form behaviour
If defined, this function will be executed before sending AJAX request with the data found in the form. The data is passed as key-value object with ALL fields marked with Odamae's CSS class (.odamae-input, .odamae-textarea). Please note, the data object will contain required field named "apiKey" which should not be removed or modified by this function in order for a form to work properly.
The default "wait" action is a simple change in action button text. You might want to modify this by providing your own (ex. spinner). Define window.odamaeBeforeLoad function to execute just before your form is submitted to our servers.
This function will only be executed if AJAX request fails or returns unexpected result. For example, if the service is unavailable (we'll try to make this event extremely unlikely), then this function will executed if defined.