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.
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="email@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:
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.
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
Note: You may have seen in the
ghoststeadtheme that the action is actually missing. The action may be omitted in that case since the form contains the
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.
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 submission functions like any other page and is counted against the site usage quota.