• »
  • Forms
    • »
  • Adding a contact form to a page

Adding a contact form to a page

Read time: 4 minutes

The “Form” flexible content block on your WordPress site allows you to easily add forms created with Contact Form 7. Here’s a quick guide on how to add a form to a page using the “Form” flexible block.

Steps to Add a Form Using the “Form” Flexible Block

  1. Log in to Your WordPress Admin Dashboard:
    • Go to your WordPress login page (usually yourwebsite.com/wp-admin).
    • Enter your username and password to log in.
  2. Navigate to the Page Editor:
    • In the left-hand menu, click on “Pages.”
    • Select the page where you want to add the form, or click “Add New” to create a new page.
  3. Add a Flexible Content Block:
    • Click on the “+” icon to add a new block.
    • From the block options, select the “Flexible Content” block and choose the “Form” block type.
  4. Configure the Form Block:
    • In the “Content” tab of the form block, you will have options to add the form:
      • Form Title: Enter an optional title for your form.
      • Form Description: Add a description or instructions for the form if needed.
      • Select Form: Use the dropdown menu to select the Contact Form 7 form you want to add. This will list all the forms you’ve created using Contact Form 7.
    • In the “Settings” tab, you can configure additional settings for the form block:
      • Section ID: Add an optional ID to enable smooth page scrolling to this section via on-page links.
      • Remove Bottom Margin: Toggle this option if you want to remove the default margin at the bottom of the block, making it sit flush with the block below it.
  5. Preview and Save Draft:
    • Click the “Save Draft” button to save your work without publishing it.
    • Click the “Preview” button to see how your form will look when published.
  6. Publish the Page:
    • Once you’re satisfied with your page and the form placement, click the “Publish” button to make the page live on your website.
    • If you’re editing an existing page, click “Update” to save the changes.

Example Configuration

Content Tab:

  • Form Title: “Contact Us”
  • Form Description: “Please fill out the form below to get in touch with us.”
  • Select Form: Choose your Contact Form 7 form from the dropdown list.

Settings Tab:

  • Section ID: “contact-form-section”
  • Remove Bottom Margin: Yes

By following these steps, you can easily add a Contact Form 7 form to any page on your WordPress site using the “Form” flexible content block. This allows for a consistent and customisable approach to managing forms across your website.

Prev article