---
title: Fluent Forms with Oxygen Builder Widget
description: The Oxygen Builder Widget and Fluent Forms allow you to create and style powerful forms without code. You can modify your form colors, shapes, sizes, backgrounds, margins, padding, and more, making form creation easy and visually appealing. This guide will…
url: "https://fluentforms.com/docs/fluent-forms-with-oxygen-builder-widget/"
updated: "2025-06-03"
category: Form Building / Publishing Form
---

# Fluent Forms with Oxygen Builder Widget

The Oxygen Builder Widget and Fluent Forms allow you to create and style powerful forms without code. You can modify your form colors, shapes, sizes, backgrounds, margins, padding, and more, making form creation easy and visually appealing.

This guide will show you how to customize and publish forms using the Fluent Forms Oxygen Widget.

## Add Fluent Forms with Oxygen Builder Widget

First, install and activate the**[Oxygen Builder](https://oxygenbuilder.com/)** plugin on your WordPress site. Then, create a new page and click the **Edit with** **Oxygen** button to open the **Oxygen** editor.

![Add page with Oxygen builder scaled 48246](https://fluentforms.com/wp-content/uploads/2025/01/Add-page-with-Oxygen-builder-scaled.webp)

To add element, click the **Plus Icon (+)** in the top left and type **Fluent Form** into the search bar. Then, click on the **Fluent Form** block to add it.

![search fluent form 02 48246](https://fluentforms.com/wp-content/uploads/2025/01/search-fluent-form-02.webp)

If you already have forms, just choose one from the dropdown. If not, create a new form in [Fluent Forms](https://fluentforms.com/docs/how-to-create-a-form-with-fluent-forms/) first.

![Select a form 04 48246](https://fluentforms.com/wp-content/uploads/2025/01/Select-a-form-04.webp)

## Customizing Form Appearance

### Primary

In the **Primary** section, you can modify your form as you want.

**Form Container:** You can customize the form container to match your website's design. You can change the background color, set the maximum width, and adjust the padding and margins to control the spacing around your form.

You can also customize the border by setting its color, width, and style (solid, dashed, dotted, or none). Additionally, adjust the border-radius to round the corners as needed.

![container scaled 48246](https://fluentforms.com/wp-content/uploads/2025/01/container-scaled.webp)

**Labels**: Use the color picker to choose the text and asterisk colors. Customize typography settings such as font family, size, weight, color, alignment, letter spacing, line height, decoration, and style to match your design preferences.

**Input & Textarea:** You can customize the **Input**and **Textarea** fields by adjusting the label color, background, width, height, margins, and padding. You can also set text indent and modify border properties like width, color, style, and corner radius. These options help you create clean, user-friendly form fields matching your design.

**File Upload Field**: You can style the File Upload button by customizing its color, shape, typography, and border. Use the available options to adjust font size, weight, alignment, border style, width, and radius to match your design.

**Multi-step Forms:** For multi-step forms, you can style a **Section Break** and a **Progress Bar** to divide the form into steps and help users track their progress easily.

![Textera 05 scaled 48246](https://fluentforms.com/wp-content/uploads/2025/01/Textera-05-scaled.webp)

**Box Shadow**: Box Shadow lets you add a shadow around your form to create a soft depth effect. You can easily adjust the shadow color, direction, blur, and spread to match your design.

![Box scaled 48246](https://fluentforms.com/wp-content/uploads/2025/01/Box--scaled.webp)

**Submit Button:**You can style the submit button by changing its color, width, margin, padding, and more to fit the look of your form.

![submit button 06 2 scaled 48246](https://fluentforms.com/wp-content/uploads/2025/01/submit-button-06-2-scaled.webp)

## Advanced

In the **Advanced** section, you can add simple effects like animations, text shadows, transitions, and change the opacity of your form and submit button. You can also use basic filters and transformations to engage your form more.

![advanced 07 48246](https://fluentforms.com/wp-content/uploads/2025/01/advanced-07.webp)

Once you've finished designing your form, click **Apply Params** and the **Save** button to save all your changes.

![apply scaled 48246](https://fluentforms.com/wp-content/uploads/2025/01/apply--scaled.webp)

### Publishing Your Form

When your form is ready, you can easily publish it or share the form directly through a link or on social media to reach your audience easily. platforms.

If you have any further questions, concerns, or suggestions, please do not hesitate to contact our[support team](https://wpmanageninja.com/support-tickets/?utm_source=wpmn&utm_medium=home&utm_campaign=site#/). Thank you.