Quick Start: Your First Form

Documentation
1

This guide assumes that you are using and somewhere familiar with Jekyll. It will help you create a new page, insert a stock form, and see it work.

Choosing a Form Template

Head over to the Basic Contact Form in the Form Templates category. It looks something like this:

image
image702×286 26.1 KB

If you haven’t set your allowed referrers in your profile settings, you’ll be prompted to do so.

Copy the code and paste it into a new page on your Jekyll site

Click on the Copy form code button and then paste that code into a new page on your Jekyll site. Save the page, and see how it looks!

See how it looks

You’ll see something like this on your web site (but not aligned just right yet):

image
image533×205 4.48 KB

Here is some CSS to make your form prettier 
.form-group {
    display: flex;
    align-items: center;
    padding: 3px;
  }

  .form-group label {
    margin-right: 10px;
    width: 10em;
    text-align: left;
  }

  .formhoster-form input.button {
    width: fit-content;
  }

  .form-group textarea,input {
    width: 50%;
  }

Try it out

Fill the form out and hit Submit

image
image697×244 14.4 KB

If you see that, then you are ready to start processing forms for real.

Turn off Debug Mode

The next step is to edit the HTML. The first thing to change is this:

<input type="hidden" name="debug_mode" id="debug_mode" value=True>

You should either delete it or replace True with False (Oops. Right now changing it to “false” isn’t enough). That will turn off debug_mode so that your form will be processed and send you a private message here. If you’re not logged in, you’ll get a copy via email.

You should see notifications like this at the upper right:

image
image392×435 24 KB

Selecting your own Success Page

Subscribers to the Pro plan (which is everyone, right now), can enter a URL on their own web site with customized “Thanks for submitting” information. Change that in this line:

<input type="hidden" name="success_url" id="_success_url" value="https://hub.formhoster.com/pub/success">

Change https://hub.formhoster.com/pub/success to your own success page and you’re all set.