Horizontal Gravity Forms Form in Oxygen

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:

                

                        

							
"*" indicates required fields
                        

                        
Name*

                            
                            
                                                    
                                                    First
                                                
                            
                            
                            
                        
Email*

                            
                        
Message*

        
  
            
            
            
            
            
            
            
            
            
            
            
            
        
                        
                        

Replace 1 with the ID of your Gravity Forms form.

Step 3

At Manage > Stylesheets add: