Odamae by Phantomus

Hey there! This section provides information necessary to setup Odamae contact form. While its quite easy, we would like to share as much information as possible to make you happy :) To start, let us say that Odamae form is similar to other embedded form solutions out there, but it's simply better looking, built on AJAX, and easier to setup (at least this is how we think). The setup itself is quite simple - just copy the code provided after you login and paste it onto your blog or website page - done!.

We provide two sets of color themes out of the box: light and dark. The theme is controlled by automatically loaded CSS file defining the styles for this theme. We've attempted to develop the stylesheets to fit with your existing design by inheriting colors, fonts, etc. However, we did add a few things to spice up the input fields, button, and message controls (all of which could be easily modified, see customization tutorial).

After you've registered and logged in to Odamae account page, you will be presented with the choice below. From there, all you have to do is click designed button "Get the code", copy the code, and paste it onto your page. Your form is ready to go with default behaviour and styles. You might notice slight variations in styles between light and dark theme; those have been done on purpose :)

Although Odamae could be used on any website, the service was created specifically for blogging platforms (such as Ghost) to remove the form dependency on the platform itself while providing high quality, customizable form solution. With that said, our example provides steps to integrating Odamae contact form into standard Ghost installation.

Where to place the code

The easiest way to add Odamae contact form to Ghost blog is to create a static page and insert copied form code into it. Sounds simple and it is. Assuming that you have static page created, copy the code provided by your Odamae account into the page and publish.

 

Once published, navigate to your new contact page and your form is ready.

 

Was that really all that's needed?

To get started right away...Yes. The rest of the functionality and design may be modified by customizing CSS and JS files, but for basic usage the above steps is more than enough. Please read below on field requirements and more on customization here.

The code copied from your account page contains three fields: name, email, and message. Out of these fields, the script performs verification only on email and message fields. The verification checks if both of those fields contain a value before executing the request for contact. The name field is not required, but was placed on the default form on purpose; it's nice to know a name of your contact and those in their right mind would put one. Right?! :)

Email field

The email field is actually a free-form field named "contact". The reason for such decision was to make a generic contact field, rather than specific type, so that Odamae user can easily change the label (ex.: Phone) to direct their visitors on what to input. The validation for this field can be done via customization; Odamae service only checks the presence of value in this field, not the format.

Additional fields

Odamae forms allow for up to 5 (five) additional fields to be included into your form submission. For example, lets assume you modify the code for the form to include additional field "twitter"; the field will appear in your email along with the rest of the content. Please note, only the first 5 fields will be considered additional, the rest of the fields will be ignore. Additional fields do not include earlier discussed fields, thus resulting in 8 total fields for submission.

Limits

Below are the size limits for each of the fields. The server will return an appropriate error message if any of the fields exceed them.

• name & contact fields - 256 characters
• message - 5000 characters
• additional fields - 60 characters