Getting Started

In this document, you'll learn how to connect your first form to rake.red.

Prerequisite

Rake.red does not host your forms. We handle the data that your users / visitors submit, using your forms hosted somewhere else. Which can be literally anywhere.

So the one prerequisite we have, is to have an HTML form. If you don't have one already, you can use this example:

<form method="post" action="#">
  <label>name</label>
  <input type="text" name="name" required />

  <label>email</label>
  <input type="email" name="email" required />

  <button type="submit">Subscribe!</button>
</form>

Quick Setup

Connecting your forms to rake.red, is done by following three steps:

1. Create an account

Go to our signup page to create your account. You'll be asked for your name, email and to choose a password. Or login if you already have an account.

2. Register your form

After creating your account, you'll be asked to name your project. Project names are unique trough rake.red and make part of the url you'll be pasting in your forms. After you created your project, you need to set up your first form. Here too, you'll need to choose a name. Form names are unique per project.

Once you've named your form, you'll be presented a page telling you that there is no data yet. That's correct, because we haven't connected your form to rake.red, just yet.

Copy the endpoint that you see there, to your clipboard. The endpoint looks like:

https://rake.red/api/project-name/form-name

3. Connect your form to rake.red

Now we have to move to your form, wherever it may be hosted. Set your form method to post, and paste the copied endpoint (from step 2) in your form action.

<form method="post" action="https://rake.red/api/project-name/form-name">
  <!-- your input fields -->
</form>

That's it. Once you submit this form, you should see data coming in. Be sure to test it! Submissions can be removed on an individual basis, so there is no excuse not to test.

HTML Form

With rake.red, you don't require backends. You'll use your existing frontend, no matter where it's hosted. Just make sure that the method is set to post, and the action points to your form endpoint.

The method determines the http method that's being used. By convention GET is used to retrieve data, while POST is used to send data. When using rake.red, make sure that this attribute is set to post.

The action is where the magic happens. When the user hits the submit button, this is the address where the data will be posted to. We don't use magic urls with random codes or hidden inputs. Replace {project} with your project slug, and {form} with your form slug. Or just copy/paste the form endpoint that you'll find at the top of your form settings page.

Javascript

Rake.red accepts two content types, application/x-www-form-urlencoded and application/json. The first is used when you'd normally submit an HTML form, without any javascript.

The second, makes it easy to attach interactive form handlers using javascript.

Here is an example using react and @rakered/forms.

import { handleSubmit } from '@rakered/forms';

const submit = handleSubmit(async (values) => {
  const response = await fetch(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(values)
  }).json();
});

<form onSubmit={submit}>
  <label>name</label>
  <input type="text" name="name" required />

  <label>email</label>
  <input type="email" name="email" required />

  <button type="submit">Subscribe!</button>
</form>

When using javascript, make sure to post valid JSON with the appropriate content-type header.