> For the complete documentation index, see [llms.txt](https://cakewp.gitbook.io/gutenberg-forms/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cakewp.gitbook.io/gutenberg-forms/tutorials/how-to-create-inline-forms-in-gutenberg.md).

# How to create inline forms in Gutenberg

Creating any form layout with Gutenberg form is super easy. It comes with a "**Form Columns**" block which you can use to create any layout. Let's see how easy it is to create an inline form using it. 

**Here is a step-by-step tutorial.**

If you are creating the form directly on a page, post or CPT add the Gutenberg Forms block. And if you are creating it via the "**Forms**" screen, ignore this step. 

![](https://1512352932-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3kpG_L2KnkqtciR1m_%2F-MBcSu9Pvfd_xrlYdpeZ%2F-MBcUYs5p6SeBxy3bvrx%2FImage%202020-07-07%20at%201.52.20%20PM.png?alt=media\&token=5c3ad67a-c4a1-494b-8013-ef63358443cc)

Now click on the standard button that will insert a basic standard form. You can then remove extra fields and add need fields/blocks.

![](https://1512352932-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3kpG_L2KnkqtciR1m_%2F-MBcSu9Pvfd_xrlYdpeZ%2F-MBcW3WjUogSJB658JF8%2FImage%202020-07-07%20at%202.00.24%20PM.png?alt=media\&token=f6b8fd3b-f6b9-4431-a8aa-bfd97b52c032)

For this tutorial we will create a form with the following fields:

* Name
* Email
* Button

So we can simply remove the Message field from the standard form. We also need to disable the default submit button as we need to place it inside a column. 

Simply select the main form block and from the sidebar settings, you can disable it under the "General" settings panel.

![](https://1512352932-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3kpG_L2KnkqtciR1m_%2F-MBcSu9Pvfd_xrlYdpeZ%2F-MBcWQ8mF9PCu7xDcUaS%2FScreen%20Recording%202020-07-07%20at%2002.03.14%20PM.gif?alt=media\&token=ff86b3fa-b3c3-45d8-a788-d7d992cfbe86)

Now let's add a **form columns** block and add 3 columns. 

![](https://1512352932-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3kpG_L2KnkqtciR1m_%2F-MBcSu9Pvfd_xrlYdpeZ%2F-MBcXVUkvjJCQK4lQmdu%2FScreen%20Recording%202020-07-07%20at%2002.07.25%20PM.gif?alt=media\&token=949476f0-8e9e-4ee0-b807-c3e18a2931cf)

Now drag the name and email fields in each column.

![](https://1512352932-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3kpG_L2KnkqtciR1m_%2F-MBcSu9Pvfd_xrlYdpeZ%2F-MBcXfvjyfadauzRblfx%2FScreen%20Recording%202020-07-07%20at%2002.08.56%20PM.gif?alt=media\&token=c3ca8a4e-8c4c-40a0-9054-df20b697467f)

Finally, add a "**Form Button**" block in the last column. 

![](https://1512352932-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3kpG_L2KnkqtciR1m_%2F-MBcSu9Pvfd_xrlYdpeZ%2F-MBcXpuGpuextaXI3ec4%2FScreen%20Recording%202020-07-07%20at%2002.09.28%20PM.gif?alt=media\&token=07ac7fcd-1d91-4af4-9974-192e7cadea42)

That's it! we have created an inline form with 3 columns. You can add more columns if you wish. And style the button or fields using the customization options available in the sidebar.

This is how it looks on the front-end for the **Tweenty TweentyTheme**. Your output may be different depending on the theme you are using.  

![](https://1512352932-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3kpG_L2KnkqtciR1m_%2F-MBcSu9Pvfd_xrlYdpeZ%2F-MBcY_pfVRn1hgNmIlBa%2FImage%202020-07-07%20at%202.12.43%20PM.png?alt=media\&token=acca678e-c8b0-4b30-b3e4-89351bdca9b2)

The button sticks on the top of the column as other content. You may either use custom CSS to align it to the bottom vertically. Or simply use a spacer block above it to add spacing from the top.

![](https://1512352932-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3kpG_L2KnkqtciR1m_%2F-MBcSu9Pvfd_xrlYdpeZ%2F-MBcZZgPVHClT7MSbFFu%2FScreen%20Recording%202020-07-07%20at%2002.16.54%20PM.gif?alt=media\&token=4e41860b-04f0-4f54-98fa-18db968c4967)

This is how it looks on the front with the spacer added and some colors applied to the button.

![](https://1512352932-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M3kpG_L2KnkqtciR1m_%2F-MBcSu9Pvfd_xrlYdpeZ%2F-MBcZjEAbejO9Jznpehk%2FImage%202020-07-07%20at%202.18.45%20PM.png?alt=media\&token=87711f34-ecec-4127-bb00-02a9635db7ec)

You may also be interested in removing the label and adding it as a placeholder. Check out these two posts for that.

{% content-ref url="/pages/-MBc\_-Wi0gRDEs8B901a" %}
[How to Disable Field Labels](/gutenberg-forms/quick-tips/how-to-disable-field-labels.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MBc\_yM1idLW2ziXpfFE" %}
[How to add a placeholder text to an input field?](/gutenberg-forms/quick-tips/how-to-add-a-placeholder-text-to-an-input-field.md)
{% endcontent-ref %}

Hope that was helpful. 😇