Links

Creating / Storing Form Data

Whatever forms you create with Gridbox, you can store the entire form data with Netlify without writing any script or code.
Gridbox is tightly integrated with Netlify Forms. When you use pre-built Contact Forms or create HTML forms from scratch, you form can instantly accept submissions—no backend code or infrastructure required. As soon as your website is deployed to Netlify, you start accepting submissions which will appear in your Netlify dashboard.
This setting only works with Netlify platform. Whenever you publish your Project to Netlify, your website will be ready to receive user submissions. You can even Download and host with Netlify platform manually.

How to setup Netlify Forms?

By default, we've enabled "Save to Netlify" setting for all pre-built contact forms, so you don't have to change anything. So, you can start with pre-built contact forms. All you need is to drag and drop the contact form, add any extra fields if you want. Once you're ready click on the Publish button to deploy to Netlify. That's it.
This setting is enabled by default for all pre-built contact forms. You don't have to configure anything.
Selecting Form Element and Accessing Settings

Selecting the form element to change Netlify form settings

Sometimes, it is difficult to select the form element in the canvas straightway as the form element may be deeply nested inside some DIV element or Section element, but with Inspect you can do that easily.
  1. 1.
    Click on any input field inside the form.
  2. 2.
    Click on Properties Tab
  3. 3.
    This will open the left side panel with active settings tab
  4. 4.
    Click on Inspect Tab
  5. 5.
    Under Inspect Tab -> Click on the Form Element-> This will select the form tag
  6. 6.
    Then click on -> Properties Tab -> To access the form settings
Selecting Form Element using Inspect Panel

Connecting with FormSpree, Revue or other services

Form Settings
  1. 1.
    Follow the above steps to select the Form Element
  2. 2.
    From Properties -> Under Action -> Give any action url -> like Form action url from FormSpree.io or Revue form action url
  3. 3.
    You're done.

Creating Forms from Scratch

If you want to create your own form, do the following.
  1. 1.
    Click on + Add Block
  2. 2.
    Under Form Elements
  3. 3.
    Drag and Drop Empty Form block any where in the canvas.
  4. 4.
    Make sure that you drag and drop all the input elements inside the form block like label, input field, email, textarea, dropdown, etc...
  5. 5.
    Click on the form element by using the previous step
  6. 6.
    From the left sidebar under Properties Tab -> click on the Save to Netlify checkbox as mentioned in the image below.

Viewing Form Data using Netlify

Once you've designed the page, you need to Deploy the project to to Netlify using Publish button from the top right.
  1. 1.
    Once you publish, click on the published url
  2. 2.
    Fill the form with dummy data to test the form submission
  3. 3.
    Go back to Editor, from the publish click on the domain settings to open Netlify - it will open the Netlify site settings automatically.
  4. 4.
    Click on the form tab, where you can find all form submission across your site.
Netlify form submission

Viewing Form Data

Netlify Forms
  1. 1.
    Click on Publish Button
  2. 2.
    Make sure that you site has been hosted already
  3. 3.
    From the live url -> Feed any form input data for testing
  4. 4.
    Then from Publish diaglog -> Click on Advanced Settings
  5. 5.
    This will open the Netlify Settings
  6. 6.
    From the top menu -> click on Forms -> You can see the list of user form submissions