# 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. 

![](/files/-MBcUYs5p6SeBxy3bvrx)

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

![](/files/-MBcW3WjUogSJB658JF8)

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.

![](/files/-MBcWQ8mF9PCu7xDcUaS)

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

![](/files/-MBcXVUkvjJCQK4lQmdu)

Now drag the name and email fields in each column.

![](/files/-MBcXfvjyfadauzRblfx)

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

![](/files/-MBcXpuGpuextaXI3ec4)

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.  

![](/files/-MBcY_pfVRn1hgNmIlBa)

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.

![](/files/-MBcZZgPVHClT7MSbFFu)

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

![](/files/-MBcZjEAbejO9Jznpehk)

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. 😇


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://cakewp.gitbook.io/gutenberg-forms/tutorials/how-to-create-inline-forms-in-gutenberg.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.