Styling your newsletter form with Orbital and WordPress groups

Back to: Bootcamp: Using the Mailchimp Add-On

In this video, Matt demonstrates how to enhance the visual appeal of your newsletter form using WordPress groups and Gravity Forms’ Orbital theme settings. He also shows how to save the styled form as a reusable WordPress pattern.

What You’ll Learn

• Using WordPress groups for form organization
• Basic styling techniques for forms
• Configuring Orbital theme settings
• Creating reusable WordPress patterns

Technical Steps

Setting Up the Group

1. Add a WordPress group block
2. Place Gravity Form block inside the group
3. Rename group to “Newsletter Call to Action”
4. Apply group styling:
   • Add background color
   • Set margin and padding
   • Add border (2px black)

Styling with Orbital Theme

1. Select the Gravity Form
2. Access Orbital theme settings
3. Increase font size to 18px
4. Customize submit button background color

Creating a Reusable Pattern

1. Select the entire group
2. Save as WordPress pattern
3. Name it “newsletter”
4. Access pattern through WordPress patterns menu

Best Practices

Form Design

• Consider mobile responsiveness
• Maintain consistency with your theme
• Use appropriate spacing and margins
• Ensure readability with proper font sizing

Pattern Usage

• Create meaningful pattern names
• Use patterns for consistency across pages
• Save time by reusing styled components
• Maintain brand consistency

Benefits

1. Improved User Experience
   • Enhanced visibility
   • Better mobile responsiveness
   • Consistent styling across site
2. Efficiency
   • Quick implementation through patterns
   • Consistent styling across pages
   • Easy updates and maintenance
3. Professional Appearance
   • Polished look
   • Branded elements
   • Cohesive design

Important Notes

• Styling should complement your theme
• Mobile responsiveness is crucial
• Patterns save time and maintain consistency
• Group organization improves maintainability

Next Steps

After styling your form:

• Test on multiple devices
• Check consistency with your site’s design
• Consider creating variations for different contexts
• Implement the pattern across relevant pages