12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on Mar 16, 2022

Horizontal Gravity Forms Form in Oxygen

Sridhar Katakam

This members-only tutorial provides the steps to set up a responsive horizontal opt-in form in Oxygen using Gravity Forms.

Step 1

Create a form having a Single Line Text field (for name) and Email (under Advanced Fields).

Drag the email field to the right of Name field so they are side-by-side.

For both fields, enter placeholder text and set Field Label Visibility to Hidden.

In the Form Settings, assign a CSS Class Name of horizontal-form.

Step 2

Edit the Page/Template where you would like to show the form.

Add a Section having #50c5b5 Background Color. Set top and bottom padding to 20px each.

Add a Div inside the Section.

Layout Child Elements: Horizontal
Vertical Item Alignment: Middle
Width: 100%

Under Custom CSS add

gap: 20px;

Add a Heading inside the Div that reads say, "Subscribe to our Newsletter".

Text Color: white
Font Size: 20px
Font Weight: 500
Tag: h3.

Add a Shortcode adjacent to and below it i.e, as a child of the Div.

Full shortcode:


                
Name*

Replace 1 with the ID of your Gravity Forms form.

Step 3

At Manage > Stylesheets add:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $599 one-time).

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right