HTML forms

How to connect your HTML forms to any destination without writing backend code

All these guides require that you have a free Magical Forms account. If you haven't registered your account, please do that before continuing.

Pick a destination

Magical Forms will do it's best to automatically generate the correct columns or rows in your destination. You can always add more destinations after you create the form.

The form action is the link to your destinations

Once you create a form, Magical Forms will provide a form url or "form action" where you can start posting data. This unique action is all you need to post data into any of your destinations.

Starter HTML

You can easily adapt any form to use your Magical Forms action but Magical Forms also provides some starter HTML for your form in CodePen. Feel free to modify this HTML as much as you want.

Here's an example mailing list form that Magical Forms built:

<form action="https://api.magicalforms.com/form/vB1pUYCBvUqnSarEvAgsd6" method="post">
  <label>Your Name: <input type="text" name="Name" required /></label>
  <label>Your Email: <input type="email" name="Email" required /></label>
  <input type="hidden" name="Created" value="x-sheetmonkey-current-date-time" />
  <input type="submit" value="Sign Up" />
</form>

Once you submit this form to a Google Sheets destination, the data will appear in the linked sheet like this:

Example submission for the above form

Special form fields

Magical Forms has a few "special fields" that make saving certain common types of data easier.

Saving a current date and time:

Create a hidden field with a value of x-magicalforms-current-date-time and Magical Forms will automatically convert that value to a date and time in your Google Sheet.

<input type="hidden" name="Created" value="x-magicalforms-current-date-time" />

Saving a current date:

Create a hidden field with a value of x-magicalforms-current-date and Magical Forms will automatically convert that value to a date in your Google Sheet.

Redirecting after the form is submitted

Once a visitor to your website has successfully submitted a form, you often want to redirect them to another location. Magical Forms allows you to do this with the x-magicalforms-redirect field. Put any URL into this field and the user will be automatically redirected to that URL after submitting your form.

<input 
    type="hidden" 
    name="x-magicalforms-redirect" 
    value="https://my-site.com/signup-success.html" 
/>

This special reserved field will not be added to your spreadsheet as a column.

Limiting what websites can submit to your form

Magical Forms allows you to limit the domains that can submit to your form with the "Domains" field. If you want to allow submissions from all locations leave this field blank or enter the * wildcard character.