# Getting Started

This introductory section guides you through your first experience with Grapedrop. We will start from creating a project from scratch up to the online publication of a complete project.

# Preface

The goal of this tutorial is to grasp the basics of the platform, so we'll not focus too much on the design and the functionality of the page but more on the tools that will help to build your next real, production-ready, product. As an example, the final result will be a landing page for selling a product of Fitness lessons, with its own header, feature section, contact form and more.

Here you can find the final result of this guide: Getting Started Result

# Creating the project

Once you have created your account and logged in Grapedrop, you will be redirected to your main dashboard page.

Grapedrop Dashboard

This is where you'll manage all of your projects. As you can guess, initially the page is empty and will invite you to create your first project, so let's start by clicking on "Start your new project now!"

On the next page you will decide the name of the project and its starting template. For our case, let's call it "My first website" and as we want to create it from scratch let's select the Blank Page template and click on "Create Project"

New Project

# Using the Editor

Once you've defined your project you'll be redirected to the core of the platform, the Editor.

Editor

WARNING

For the best editing experience, we highly suggest using, as the browser, the latest Chrome version

The editor is mainly splitted in 4 different sections:

  • Canvas - the largest and the most important section. This where you'll see your project taking life, by creating layouts with blocks and arranging them via Drag & Drop capability
  • Left Sidebar - In this section, you will be able to see the hierarchy structure of your project. In the upper side, you'll manage the pages and below, for each of your pages, you'll see all the inner layers
  • Right Sidebar - The right sidebar is responsible to handle the behavior and styles (color, background, etc.) of any element dropped in the canvas
  • Topbar - This section contains different commands for your project editing and management

Now let's jump into the real creation.

# Blocks

You should know that all the elements dropped in the canvas are what we call Blocks. A block can be a really simple element like an image and text or also a complex composition of other blocks. For this reason, we've split them into different categories but the most important one is definitely the Basic Blocks, getting good knowledge on how they work will help to create and manage all other categories.

To access all available blocks, just click the big "+" (Plus) button near to the Grapedrop logo (a link which brings you back to your project list) and you'll see them pop up on the left

Blocks

As you see the Basic Blocks category is selected by default and underneath there are also other sub-categories, for now, we'll stick with the Basic one.

Click on the Basic sub-category to show all the available blocks in it and let's focus on 2 really fundamental blocks: Section and Grid

Blocks Basic

# Section Block

The Section is quite easy to use and understand, you can drop it only in the root layer (the Body) of the page, it's not nestable, so you can't put one Section into another. The purpose of this block is quite simple, keep your content centered and responsive. All you have to do is to drop it into the canvas and you'll see its outline

Drop section block

You can start to drop in the Body whatever you want, the editor doesn't limit you, but to keep your content look good across multiple devices we highly suggest starting with this Block.

You will see that the Section has an inner element called Container, this is where we'll drop our content and it's responsible to keep our content centered. It also has a maximum width of 1200px applied by default, but you can change it if you want your content to be placed in a larger container on bigger screens

Container width

The section we've just dropped will be the header of our page and for this reason we'd like this section to take all the space of the window. Now select the section block and on left sidebar, under Settings, enable Fill screen option and you'll see the section taking all the available space.

Fill screen

Now that we have placed a section block we can start exploring the next immediately suggested one, the Grid block.

# Grid Block

The Grid block is mainly responsible to layout your content so it's probably the one you'll need to use the most. Indeed, we suggest taking your time and get very confident with this block as once grasped the basics you'll be able to build any possible layout. Let's start by dropping one Grid block in our section.

Grid block

As you can see the block is composed of a row element (the Grid itself) and 3 inner columns. By selecting the Grid you'll see in the right sidebar, under Layout, new grid-related properties: Horizontal Align, Vertical Align and Allow multiline. Those properties are quite self-explanatory and they change the behavior of all of its columns. The same you'll notice on selecting a single column.

Grid block

The column will show these other properties:

  • Behaviour - The Fill parent value is the default one and, in this case, the column tries to take all the available space. As we have 3 identical columns and the multiline (on the grid) is disabled, all of them take the space equally. The Fit content value instead shrink the width down to the inner content and while is empty, selecting it now, you'd see constrict almost to 0
  • Vertical Align - This changes the vertical alignment of the single column
  • Order - This property is able to change the order of columns. You can actually change the order of columns by simply dragging them, so the true utility of this property is to use it only when you change the device view because altering the structure by dragging them will affect the order in all devices

You can add as many columns as you want, by selecting the Grid and clicking on Add column button, under Settings, or simply by cloning a selected column (via clone action on the block element toolbar or simply using CTRL + C/ CTRL + V shortcuts)

Add columns

For deleting columns, just select one and press (Delete) key or via delete action (trash icon) on the block toolbar

TIP

If you make a mistake, remember you can use these shortcuts:

  • CTRL + Z - Undo
  • CTRL + + Z - Redo

# Text Blocks

Now let's proceed with the composition of our header. Before adding text content make the grid fill the height with a value of 100% and delete one of the columns, so the result would be something like this

Header start

Now let's drag a Header and a Text block into the left column and update them with some content. To update text blocks just double-click on them to enter in edit mode and once you've finished just click anywhere else outside of the block.

Text header

Great, now you've probably noticed that texts have some kind of white space between them. The Header block has default top and bottom margins (outer gap, highlighted with yellow color on hover), instead, the text has paddings (inner gap, highlighted with blue color on hover) around all its content. When you need, you can actually adjust them very quickly via the Style Manager under the Layout section.

Margins and paddings

And what about centering, vertically, our texts in the column? You can actually try to play with margins and paddings to achieve this but the result won't be that accurate and scalable (think about updating your content or simply visualizing your page on different screen sizes). In Grapedrop, when you face layout doubts, try to think if it's something solvable with Grids. Indeed, in this case, all we have to do is to simply use Vertical align property on the column block and all our content will be automatically centered

Centering column

# Image Block

Now let's drag an Image block into the right column of our header. Once the block is dropped the Image Manager modal will pop up.

Image Manager

Right now we don't have any asset uploaded yet but you can start doing so by clicking on the Upload button. For our example, we're gonna use free images from Unsplash. So, switch the value of the select, the one you see on top, with Free Images by Unsplash category and search for some context-related picture.

Unsplash images

Now just double-click on the image you like, to select it and close the modal, then you will see it in the canvas. If you need to change the image you can always double-click on that block to reopen the Image Manager.

The image will try, automatically, to fill the available width of the element containing the image but you can always resize it by using resize handlers.

Image

TIP

By default, when you resize an image the editor keeps its aspect ratio to avoid the stretching effect, but if you need to ignore it you can press during resizing

As we did before with the text part, to center the image vertically, select the right column and change the Vertical align property to center.

Right column

Now, to make things a little bit more interesting, let's resize our image a few pixels less than its column, drag another image just after the first one and resize to make it a bit smaller than the first image. So, the result should be something like this

Header 2 images

The column of the grid tries to adapt itself with the newly added image but what we'd like to do is to put the first image back to center and make the second one float around it.

All we need to do is to enable Free Move from the Setting action on the block toolbar (gear icon). This will detach the element from the standard block flow (where elements are disposed top-to-bottom and left-to-right) and will allow you to move it freely on the canvas.

Free move

WARNING

When the block enters in the Free Move mode is out of the standard flow but its movement is still related to its original position. This means that if you add a new block near to the one moved in Free Move mode this will probably gonna change its position because you've moved its original one by putting a new element near to him. If you want to see an example of this effect, try to resize the first image from the example above

This could appear to be a big flaw but actually this technique brings a lot of benefits as it's easier to maintain in a responsive editing context. If you try to move the column containing the images (eg. changing Vertical Align to bottom) you'll see that the floating image keeps its position and the same will occur when, for example, on a smaller device that column will slide down in the document.

We can also add another image to make it look more symmetrical

Header 3 images

TIP

When you see Free Move blocks overlap and you need to change their order, is easier to re-arrange them in Layers (using the move icon)

Free layers order

To complete the left side of our header we can drop a Link block under our text, which will become later a CTA. When you select a Link, on the right sidebar, you can see all the available options under Settings

Link block

This block allows you 5 different type of links:

  • URL - Here you can insert any external URL
  • Element - Select any element available in the page by inserting its ID (useful to point to different sections)
  • Page - Point to another page of the project
  • Email - Use this to let the user send an email in a quick way (will open its default email application)
  • Phone - Point to some phone number, useful to dial numbers faster on any device able to make phone calls

TIP

The Link block doesn't accept any other element inside it, but if you need to apply a link on anything else (eg. an image) you can use the Link Box which allows you to have the same options of the Link but with the possibility to drop anything else inside it

What if we'd like to center our link in that column? As you might guess, we can solve it by using Grid. Just drop one under the link, move the link in the middle column, change the column Behaviour to Fit content and you'll get something like this

Center link

The one only problem now is the breaking text, to avoid that, select the link and under Typography choose No for the Line breaking property

The final piece of the structure of our header will be the top navbar, which will contain the logo of our product and links to different sections of our page. So, drag the Navbar block, this time under Extra sub-category, on top of our main section

Navbar

For now, we'll leave untouched the navigation links and will just change the brand logo. Generally, a logo is a single image of the brand/product but for our case, to make more practice, we'll choose a composition of an icon and a text. As usual, we'll use a grid to build this composition, so, let's start by dropping a new grid block under the text on the left side of our navbar. As we might need our logo being linkable be sure to drop it inside the Link box

Logo start

TIP

Usually, it might be not easy to move around things into small blocks, so remember, in that case, it's much easier to move things in the Layers panel (left sidebar)

In the left column, we'll drop an Icon block (Basic sub-category) and from the icon manager, we'll choose something related to our context. In the middle column, we'll drop a simple Text block for the name of the product. We can just remove the right column and the text above the grid. If you want you can resize the icon and change a bit the style of the text. This is my final result

Logo start

TIP

A lot nested grids might create too much white space around the content, so remember you can adjust it by changing their relative margins/paddings under the Layout properties

The last thing, you might have noticed how the navbar pushed our header section below by making our content not aligned anymore. To adjust this, select the navbar and, under the Settings properties, change its Position to Detached

Navbar detach

Great, now that we have a good structure of the main header section we can start working on making it more presentable by using the Style Manager

# Styling

As you've seen we already started making use of the Style Manager during the header composition but in this section, we'll give a better look at some common styling aspects.

By using some block you might have noticed how the Style Manager changes its properties based on the currently selected block (eg. grid-related properties under Layout category). So, each block can have its own set of properties to style in order to avoid the user let break the layout with some incompatibility.

Almost all the blocks have this set of styling categories

Style Manager categories

but there are some particular cases where this set might differ (eg. the Body block has only Typography and Background)

WARNING

The Settings category you see above the Layout is a bit a different category and its main purpose is to change some behavior of the block. The big difference between other categories is that its changes apply equally on all possible devices where others can be defined differently on each device

Now, let's start with the styling...

As a first thing, select the main section and change its Fill color (under Background) to #303a52 and the Font color (under Typography) to white. As our Navbar is not under the same section the font color didn't change, so update its Font color with the same value.

Generally, we suggest changing the main typography properties like Font, Font size and Color directly on the Body block as it'll apply on all of its inner children. So, select the Body and change the Font to Helvetica (good as a beginning but, will see later how to load other fonts), Font size to 16px and Color to #333 (currently not visible as our section and navbar have a different one)

As an extra point, let's give more visibility to our heading text (Font size to 64px), the text below the heading (Font size to 20px) and the navigation links (Font size to 18px)

Style Header start

TIP

You can preview your page in another tab by clicking on Preview command Preview button

Great, now it starts taking its shape. Let's focus now on the CTA button and adjust the grid in the middle to make it fit correctly the new styled content.

At first, let's move the CTA button from the middle column to the left one to make it more aligned with the other text (change also to 0px the left padding of its grid block) and now apply the following changes to the CTA link:

Layout

  • Padding top/Padding bottom - 15px
  • Padding left/Padding right - 30px

Typography

  • Font size - 20px
  • Font color - white
  • Text decoration - none

Border

  • Border radius (all) - 5px

Background

  • Fill color - #fc85ae

This configuration should lead to a similar result

CTA button

We can also add a bit of top margin (eg. 30px) to the grid containing the CTA to give it a bit more of visibility.

Now let's adjust the main grid containing our images and texts. The images in the right column are a bit off from the right edge, to align them correctly let's tell the right column to Fit content (Behaviour property)

WARNING

It might happen to see the column shrinking the image, in that case, try to clear the height property from the Style Manager and update only the width

And this is how the header should look like now

Header final

Now we can go to the next step, make our design look good on mobile

# Responsive design

By default, Grapedrop's blocks are all made with the responsive design in mind, so most of them adapt automatically to the screen size change, but as it also allows a high level of layout customization some manual changes are still required. So, keep in mind to check your design frequently.

Let's start by switching to the Tablet view Tablet switch

This is how it might appear

Tablet view

Well, a bit messy... but you'll see soon how to fix it in a few tweaks.

Let's start from the beginning, as you can see there is something wrong with our logo, this happens on all the Grid blocks, the Allow multiline property is enabled by default on smaller devices and each column fill all the row. So, the fix is quite obvious, force the Allow multiline to No

Logo mobile fix

The images below are definitely too much here, what we can do is to set Hidden on the 2 floating images via Visibility property (under Layout category) and then resize the middle one. After the resize you'll probably notice how the column containing the image is attached to the left side, to fix this you can select its Grid and change Horizontal Align to Center

TIP

If you want to change the horizontal alignment of your column without affecting all others (like we did above) you can use a little trick by changing margins to auto on the side you'd like to move. For the above case, to center the column you'd need to set auto on the left and the right margin

Grid margin trick

Another extra point would be selecting the column containing texts and change its Order (under Layout) to 2 which will put it under the image

This what you should see now

Tablet view end

Obviously we could play more to make it more harmonical but as we already said, the design part is not our main goal

One yet issue you might encounter is when you click on the hamburger menu (included in the Navbar block) and you can see how the navigation links overlaps the image below.

Navbar mobile issue

This happens because we detached the navbar from the standard flow (via its Position property in Settings) and this makes other elements below unable to respond to its dimension. So, to fix it quickly, we can change the navbar background with the same color of the section

Navbar mobile issue fixed

Now let's see what is happening in the Mobile view

Mobile view

As you see what is done on the upper size is propagated to the lowest one. So, most of the work is already done, we can just improve a few things like hiding the last image (as we've done before) and decrease the size of the heading text (eg. 40px).

This is the final result on how it'll be on the mobile devices

Mobile view final

Great, now that we have completed the header section we are ready to go with the next one. The new section will show some key points of our product by using one image on the left and the list of features on the right. We'll keep going with the Basic Blocks set and will see how to use Classes to make our styles reusable

# Shared styles with Classes

Let's start by defining the structure of our new section. First of all, drop a new Section block below our header and place a Grid inside of it. Start by removing one of the columns from the Grid in order to have 2 of them. In the left column, insert an Image Box (similar to Image but in this case, the image will fit dynamically to the size of the block) and choose something from the Image Manager. In the right column, drop a Header block (insert a text of your choice) and below place a simple Link.

The result should appear similar to this

Feature section

In order to introduce you to Classes what we'd do now is try to reuse the same style we've applied to the CTA button, in the header, on the Link block we've dropped before.

You can find the Class viewer in the right sidebar of the editor, right above the Style Manager properties

Classes position

This panel will show you all the classes assigned to the selected block (with multiple selections it will show all the common classes between selected blocks). There is also a dropdown with States (we will see them later) and the "+" (Plus) button for adding classes to selected blocks.

So, let's select our CTA link (from the header section), click on the "+" button, write a name of the new Class and press (Enter). This how the viewer will change

Class viewer with the added class

You can see now the newly created class cta button, which you can edit by double-clicking on the name or remove it by clicking its "x" button. Another important element added to the viewer is the Sync button Sync button, if you see it, it means the selected block has styles you can transfer to the current classes. Indeed, if you click now the Sync button it will disappear and you might also notice the status change of previously modified properties (they become yellow, which means are not part of the selected block anymore but inherited from some parent block)

Sync button

Great, now that we have added CTA styles on the class we can use it on other blocks, so select the Link we have added recently (currently without classes), click on the "+" button, type the same name of the class (cta button) and press (Enter). This is how you use Classes to share styles.

Link with shared classes

Now, keep in mind that when you update style properties of a block containing classes it will only update that selected block, but when you click the Sync button the editor will transfer styles from the block to the class and all the blocks containing that particular class will update accordingly.

One common design pattern you might probably see with CTA buttons is how they change their style when you over them with your mouse pointer (or even click on them). This is where States come handy, let's see how they work.

Select one of our CTA buttons, change the State dropdown to Hover and you'll see its border changing the color (this indicates that you're editing with an active State). Now we can update the style properties, change the Fill color (under Background) to #e16a93 and you will see it applied only on the selected block. You might have also noticed that the Sync button has appeared again and as we want this effect being applied on all our CTAs we need to click on Sync button. After the sync, if you've finished applying styles, remember to return to the default State

State hover

You might notice how the color change is not pleasant and smooth how you would expect, this is because we didn't apply any Transition to the link block. To do so, keep the CTA selected (in the default State), open the Extra category in the Style Manager and add a new Transition layer (Plus icon). Here you specify what type of property you want to animate (choose one from the list or All if you can't see the property you want in the list), the duration of the transition in seconds and the easing function to apply. For our needs, we'll set Background color as a property, 0.2 seconds to the duration and leave the default ease as easing function

CTA with transiton

Once applied the change remember to Sync your styles in order to apply them to all CTA buttons. This is how the result should look like

State hover with transitions

Let's go back to our section, now we need to write some key features about our product and, as previously, we're gonna keep using our well-known basic blocks. Start by dragging a new Grid block under the Header text, keep only 2 columns, in the right one put an Icon (select an icon of your choice) and in the left one place a Text block. Make the column containing the Icon Fit content (as Behaviour). Select also the right column containing all the texts (header, the new grid, and link) and set Text align (under Typography) to right

Feature section right column

The grid in which we've placed an Icon and Text will be our feature line and as we want 3 of them, select and copy it 2 times (update those copies with a new text a new icon)

3 feature lines

The point of having these 3 feature lines unstyled is to show how you can speed up your work by using the Multiple Selection. To select multiple blocks you can start by selecting the first one and then pressing CTRL you can select other blocks one by one or, if those blocks are children of the same parent you can select the first one (eg. one on the top), press and select the last one (eg. one on the bottom), this will also select all blocks in the middle.

With the Multiple Selection enabled you can style your blocks all at once and the same is for adding/removing Classes

Multi selection

As you can see, from the video above, we selected our 3 grids, styled them, applied a new Class and clicked the Sync button to transfer styles from blocks to the Class. The same would be focusing on one only block, transfer its styles to the class and then applying that class to other blocks

Multi selection alt

We can reduce the height of our grids by removing their padding and setting Min height to auto

Feature line grid

As those changes are applied to a grid containing a class we can Sync them with that class. Let's also add a bit of top margin to the link below (eg. 30px) and probably increase the bottom margin on the heading text (eg. 30/40px), to give more visibility to our features. In the end, we should see something similar

Features right end

Let's move now to the left side of our section. As we didn't use that much space with texts we can give more emphasis to our image. So, select the Image and give to it 450px as Height, as we've used an Image Box block we care less about sizing it properly as it will adapt automatically, so we can move the width responsibility to the other column. Select the right column and make its Max width 400px, probably it would be nice also to set its Vertical Align to center

Features section end

To complete the section, check the responsivity of the design on smaller screen sizes as we did before (remember that Grid goes in multi-line by default), to obtain a similar effect

Features section tablet

In tablet view, we reduced the Height of the image to 300px, added 100% value to the Max width property of the column containing our features and changed its Text align to left. Disable also the multiline on feature lines (remember to sync styles to apply them to the current class)

Features section mobile

In mobile view, we only changed the Height of the image (180px) and the Font size of the header text (30px)

# Custom blocks

In the last section, we have introduced the usage of Classes for sharing styles, in the next one we can see how to save and reuse Custom blocks.

In the new section, we'll describe the available instructors by creating a card, for each of them, containing valuable information.

Let's start by dragging in the canvas a new Section block and assign to its Fill color something that would help the user to distinguish it from the previous section (eg. #dde2ed). Now drop also a Header (add any text as a section description) and a Grid that will contain our cards. Align to center the Header text (Text Align property in Typography) and set #303a52 to its Font color

Start instructors section

Now we can start creating the card. As the beginning, we can use the Box block as the main wrapper, it's a simple and generic block, but it would be almost the same as using the Grid block with one only column. So, drop a Box block into one of our columns and style it with these properties:

  • Fill color: white
  • Border radius: 5px (all corners)
  • Box shadow: Offset Y 5px, Blur 10px, Fill color: #bbb

Card start

Insert in the card following blocks: an Image box, a Grid, Header and Text. Then, in the Grid put an Image block inside the middle column and, under the Text, copy one of our CTA. This is what you should see

Card structure

For the Image box choose any image of your choice and set the Height to 100px. For the Image placed in the grid, choose the instructor profile image (but any image would be good for us), set Border radius to 100% (all corners, this will transform the image in a circle) and Border to 5px solid white (Width, Style, Fill color).

TIP

If the chosen image for the profile hasn't the size of a square (same width and height) you'll probably see an oval instead of the circle. Unfortunately, changing manually the sizes of the image will not help, as you will get a stretched result, so in this case, we suggest to switch the Image block with the Image box (this will avoid stretching of the image)

Now, we'll use one of the margin tricks to raise up our image, so, select the grid and change its top Margin with a value of -50px, this will bring up not only the grid but also all the blocks below

Card head

To make the image look already centered and good on mobile, make all the columns Fit the content, then center them using Horizontal Align in Grid and add a fixed Width to the Image (eg. 100px)

In the next step, we can update the Header with the name of the instructor and the Text block with some information. For the styling, put the Header in the center (using Text align property) and reduce its Font size (eg. 25px). Update the Text and the CTA Width to 100%. Obviously you can play more with styling to make it look better (eg. use the same Border radius on top corners of the Image box to be inline with the card container). As the card container tries to get all the available width we can limit it by setting its Max Width to something like 320px. This is how it might look like so far

Card final

Let's create now our first Custom block, to bring up the custom block modal you should select a block (in our case, the card container) and press CTRL + K or just choice the Create block from the toolbar setting

Create custom block

From the modal, you can see the code of the block and its preview. If you need you can edit the code before saving and see its changes in the preview below

Custom block modal

In the Extra tab, you can also add a description, upload a different preview and choice if to make the block available only in this project

Custom block extra

TIP

If you update the code and want to remake the preview screenshot you can use the action in the bottom left corner of the preview container

Custom block preview

Once saved you'll see the block under Custom blocks category, you can edit it (on mouse over, click on the pencil icon in the bottom right corner) and drop in the canvas like any other block

Custom blocks

TIP

Mixing Custom Blocks with Classes might help you to create highly scalable templates

Now we can drag our Card block in the remaining columns of the grid and update their content. To center them correctly, make columns Fit content and then change the Horizontal Align of the grid to Space between (4th option)

Cards

If you try to switch to the Tablet view, this is what you'll probably see

Cards Tablet

The behavior of the grid is correct but what we'd need is simply putting all the cards at the center in a new row. You could try different approaches but the fastest would be simply changing the direction of the grid from Row (default value) to Column and putting the Horizontal Align to the center (changing direction changes some grid property)

Cards Direction

You can also add some margin to columns (eg. margin bottom to 20px) and the final result would be this (the Mobile view should be already fine)

Cards Tablet

# Forms

In the next section, we'll add a simple subscription form and will see how to check the collected data.

Start by dropping, in the canvas, a new Section block, assign to it the same background and typography color of the Header section. Inside the section, place a heading block and below drop a grid with 2 columns. In the left column add a Text, in the right one drop a Form block (Forms sub-category in Basic Blocks). Change the text, style them as you wish and update the size of the columns to give them more space (eg. set Max Width value to 500px and Horizontal Align of the grid to Space between)

Form section

WARNING

You can drop other Forms blocks (Input, Select, etc.) only inside a Form one (even an empty one is ok)

You might have noticed how the text inside the form wrapper is not visible, this happens because the container doesn't have an explicit color so it inherits it from the section. For this case, we'll just change the background color from white to rgba(0,0,0,0.2) (which means black with 0.2 of opacity).

Remove in the Form the part containing the Message and Gender, and update the style of the button by replacing its default class with cta button one (if you see a white border around the button you can remove it via Border property). You can also give more space to the Send button by updating the padding of its container (Form group). This is how you might see it now

Form styled

On selecting input blocks you might see different properties under Settings, make them all required, change the Options name to Level and update its options list with this values: Beginner, Intermediate, Advanced (one per row)

WARNING

Be sure to have inputs with unique Name properties in each form, to avoid being overwritten

Form input properties

Our inputs are ready, now we can select the Form and check its properties.

Form props

The Name is not mandatory for the form but it's might be helpful when you'll check the collected data, so let's call it Subscription. The Method tells the browser how to send the data, if you have no idea how it's used, leave it as POST. In the Action you specify the URL where to send the data, for collecting data on Grapedrop you have to leave it as it is (empty). The State property allows you to customize the message on success or an error (eg. the user lost the internet connection) of the form submit.

Form status

The Redirect property allows you to send your users to another page/URL once they submitted, successfully, the form.

As always, check the section on different device modes and make appropriate changes (in this case, is mainly reducing the font size and centering the grid)

Form final

To test your form, click on the Preview button (eye icon) which will open your page in a new tab, fill the form and press Send. Now you can go back to the editor and check the data. To see all the collected records, open the page settings from the Pages panel (point the mouse over the page layer and click on the gear icon) and go to the Forms tab

Page setting button

Page settings forms

Here you'll be able to see all the future records collected by the landing page, export the data (available from the Basic plan) and do other generic operations to manage records (check the top-right Gear button)

# Publish

Once the design of the page is finished we can finally publish it online.

You can publish it directly from the editor. First of all, you have to decide where you'd like to make it available, so reach the page settings and go to the Domain tab

Page settings domain

Make sure to have the Public switch turned on, then you can choose to use the Subdomain or a Custom domain. You can also specify a slug for the page if necessary. Now Save your changes and close the modal.

TIP

We highly recommend checking also the General and SEO tabs to increase the potential value of the page

The last step is to actually publish your content, so click on the Publish button and confirm.

Page publish button

Page publish modal

Congratulations! Your page is online and you've learned the basics of the Grapedrop platform. Now you're ready to create your next success project 💪