Contact Form Block
The Contact Form block allows you to easily add contact forms to your SeedProd pages. This block integrates seamlessly with WPForms, one of the most popular WordPress form builders, enabling you to create and manage professional contact forms without any coding.
With the Contact Form block, you can embed any WPForms contact form directly into your landing pages, coming soon pages, or maintenance mode pages. This makes it simple for visitors to get in touch with you while maintaining the beautiful design of your SeedProd pages.
Adding the Contact Form Block to Your Pages
Follow these steps to add a Contact Form block to your SeedProd page:
Step 1: Add the Block
Under Design > Blocks, drag and drop the Contact Form block into the desired section of your page.
Locate the Contact Form block in the blocks panel and drag it to your desired location on the page.
Step 2: Configure Content Settings
Once added, click on the Contact Form block to open its settings. In the Content tab, you can select which WPForms contact form to display.
Form:
- Select a Form: Choose from any contact form you’ve previously created in WPForms. The dropdown menu displays all available forms from your WPForms library
- + New Form: Create a new WPForms contact form directly from the SeedProd builder. This opens the WPForms editor where you can design your form and then return to select it
Select your WPForms contact form from the dropdown menu or create a new form.
Step 3: Customize the Design
In the Advanced tab, you can customize the visual appearance of your Contact Form block:
Advanced Styles:
- Typography: Customize the font family, size, weight, line height, and letter spacing for the form text. Click Edit to access detailed typography controls for form labels and input text
- Text Color: Set the color for form labels and text to match your page design
Spacing:
- Margin: Control the outer spacing around your Contact Form block (Top, Right, Bottom, Left). This determines how much space appears between the form and surrounding elements
- Padding: Adjust the inner spacing within your Contact Form block (Top, Right, Bottom, Left). This creates breathing room between the form content and the block edges
Attributes:
- CSS ID: Displays the auto-generated unique identifier for your Contact Form block. This ID is created automatically by SeedProd for custom styling or JavaScript targeting
- Custom Class: Add custom CSS classes to apply specific styles from your theme or custom CSS
- Custom Attributes: Add any HTML attributes to the form wrapper element. Enter each attribute on a new line using the format: attribute-name|value (e.g., data-tracking|contact-form)
Device Visibility:
- Hide on Desktop: Hide the Contact Form block on desktop screens
- Hide on Tablet: Hide the Contact Form block on tablet devices
- Hide on Mobile: Hide the Contact Form block on mobile devices
Animation Effects:
- Entrance Animation: Choose from various animation effects that play when the Contact Form scrolls into view. Options include Bounce, Fade In, Zoom In, Rotate In, and many more. This helps draw attention to your contact form and creates visual interest
Customize typography, spacing, and display settings in the Advanced tab.
Step 4: Save Your Changes
Once you have finished configuring the Contact Form block and customizing its appearance, make sure to save your work.
You’ve successfully added a Contact Form block to your page! The Contact Form block makes it easy to collect visitor information, answer questions, and build relationships with your audience. Experiment with different WPForms designs and styling options to create a contact form that matches your brand and encourages visitor engagement.