Forms

With GhostStead account, you could avail the free forms functionality.  When a user submits a GhostStead form, an email is automatically sent to the owner of the GhostStead site containing the information entered by the user.  Any fields that the form contains are automatically included in the email.

Using a form

New GhostStead sites consist of functional forms!  When a new GhostStead site is created the contact and other forms are configured and can be immediately implemented into the site.

The following usage is from the demo site.

This form has three fields - name, email address and comment. This set of information is been sent to the owner of the site.

Pro-tip:  Always have an email address included so that you can respond to the submitter

The email sent to the user will be subjected as "GhostStead FORM SUBMISSION" and can be visualized as the following.

Form customization

The overall look and feel of the form is entirely customizable by the theme of your site, just like any other page.  The information the form contains is controlled by adding form fields and associated labels.  The above form in HTML looks like:  

<form data-form-type="contact" method="POST" action="https://api.ghoststead.com/form">
    <div class="row">
        <div class="col-md-6">
            <div class="mb-4">
                <label class="form-control-label">Name</label>
                <input id="contact-name" type="text" name="name" placeholder="Rachel Roth" data-constraints="@Required" class="form-control">
            </div>
        </div>
        <div class="col-md-6">
            <div class="mb-4">
                <label class="form-control-label">Email address</label>
                <input id="contact-email" type="email" name="email" placeholder="name@example.com" data-constraints="@Required" class="form-control">
            </div>
        </div>
        <div class="col-md-12">
            <div class="mb-4">
                <label class="form-control-label">Comment</label>
                <textarea class="form-control" id="contact-message" name="message" rows="3" placeholder="Hi there, I would like to ..." data-constraints="@Required"></textarea>
            </div>
        </div>
        <div class="col-md-12 p-10px-t">
            <input name="location" type="hidden" value="https://demo.ghoststead.net/thank-you">
            <button class="btn btn-primary" type="submit" name="send">
                Send message
            </button>
        </div>
    </div>
    <input hidden="true" name="ghoststead_api_key" value="5f8a00e5984e10000b1874f5:3855e0fd1061fce637393aa9c7a0bc41d3b9c5876b95b4ac2dd39c22312f3e4b">
</form>

Don't let the HTML overwhelm you, it's mostly just just for formatting.

Adding a new field to your form

Adding a new field requires two things:

• An input field
• A label

The input is whatever information you want to collect.  For instance if you want to collect a zip code, we could add an input like:

<input type="text" name="zip" />

The label is the heading that will be sent with the user-entered value in the email.  You can use any text you want.

<label>Zip Code</label>

Creating a form from scratch

It is feasible to create a form from scratch.  GhostStead forms are just HTML forms that you might have come across anytime in the past. In fact you can use the GhostStead endpoint from a non-Ghost site if you want, but why would you?

To make the form work you need to configure the following:

• The form method
• The form action
• Form data
• An API key

The form method and submission

The form method tells the browser how to submit the form.  GhostStead forms always use POST.  These examples use a standard submit button but you can also submit your form using AJAX.

The form action

The form action specifies where the data will be sent on submission.  The form action should always be set to https://api.ghoststead.com/form.

Note: You may have seen in the ghoststead theme that the action is actually missing.  The action may be omitted in that case since the form contains thedata-from-type="contact".  The ghoststead theme contains some Javascript that adds the correct action to all such forms automatically so the theme developer doesn't have to remember to do so.

Form data

Form data is the information that the user fills in, so it is required to make the form submission useful.  Add any desired fields and labels.

API Key

A valid API key is required to submit the form and without it /form submission will be rejected. The GhostStead API uses the API key to determine how to route the submitted data specifically to know the email address of the site owner.

The API key is set using a hidden input field.  As the name suggests, a hidden field is included with the other form data when submitted but is not visible to the user.  API keys can be created - or revoked - from the GhostStead admin dashboard.

Form quota

Form submission functions like any other page and is counted against the site usage quota.