How to Create Contact Forms on Your WordPress Website Using Elementor

Introduction: #

In this guide, we’ll show you how to create contact forms on your WordPress website using Elementor. Contact forms are essential for converting website visitors into leads, which can ultimately turn into sales, bookings, or other valuable interactions.

Benefits: #

Contact forms help you capture visitor information, making it easier to follow up and convert them into customers. They are a critical component of your online strategy, enabling you to build a relationship with potential clients.

Prerequisites: #

Before you start, ensure you have the following:

• A WordPress account. If you don’t have one, please reach out to us at info@booklive.com, and we’ll provide you with a free account as part of your BookLive subscription.
• Logged into your WordPress account.

Step-by-Step Guide: #

1. Log into Your WordPress Dashboard #

• Open your web browser and go to your site’s URL.
• Add /wp-admin to the end of the URL.
• Enter your username and password.
• Click the “Log In” button to access your WordPress dashboard.

2. Navigate to the Page Where You Want to Add the Contact Form #

• On the left-hand side menu, hover over “Pages.”
• Click on “All Pages” to see a list of your pages.
• Identify the page where you want to add the contact form. For example, your “Contact” page.
• Hover over the page name and click “Edit with Elementor.”

3. Add a Contact Form Using BookLive Lead Capture Form #

• Wait for the Elementor editor to load, which may take 30 seconds to a minute.
• BookLive Lead Capture Form:
  • Log into your BookLive account and navigate to your Acts Dashboard.
  • Click on the “Marketing” tab on the left side, then select “Website Widgets.”
  • Copy the custom code for the “Lead Capture Form.”
  • Return to Elementor and add a container to your page.
  • Click the grid icon to open the Elementor widget panel.
  • Search for the “HTML” widget, drag it into the container, and drop it.
  • Right-click in the HTML code editor and paste the copied code.
  • Click “Update” to save the form on your website.

4. Add a Standard Contact Form Using Elementor Form Module #

• If you prefer a typical contact form, follow these steps:
  • In the Elementor editor, search for the “Form” widget.
  • Drag the “Form” widget into the container.
  • The default form includes fields for Name, Email, and Message.
  • Customize Fields:
    • Click on each field to customize its label, placeholder text, and whether it’s required.
    • To add new fields, click the “Add Item” button and select the field type (e.g., Date, Phone).
    • Example: Add an event date field with a label like “Event Date” and a placeholder “Enter the date of your event.”
  • Customize Buttons and Actions:
    • Customize the submit button text and style.
    • In “Actions After Submit,” set what happens after form submission. The default actions are “Collect Submissions” and “Email.”
    • Ensure the email action is configured correctly with your email address.
  • Style the Form:
    • Click the “Style” tab to customize the appearance of the form fields and buttons.
    • Adjust colors, typography, and spacing to match your website’s design.

5. Publish and Test Your Contact Form #

• Once you’re satisfied with the form, click the pink “Publish” button to make the form live on your website.
• Visit your site to test the form and ensure it functions correctly.

Conclusion: #

You’ve successfully created and customized a contact form on your WordPress website using Elementor. Contact forms are crucial for capturing leads and growing your business, making them a vital component of your online strategy.