{"id":5728,"date":"2023-04-27T10:27:58","date_gmt":"2023-04-27T10:27:58","guid":{"rendered":"https:\/\/www.privyr.com\/blog\/?p=5728"},"modified":"2025-11-11T06:46:56","modified_gmt":"2025-11-11T06:46:56","slug":"how-to-add-custom-contact-form-7-with-elementor","status":"publish","type":"post","link":"https:\/\/www.privyr.com\/blog\/how-to-add-custom-contact-form-7-with-elementor\/","title":{"rendered":"How to Add and Customise Contact Form 7 with Elementor"},"content":{"rendered":"\n

Have you been using Elementor<\/a> to manage your website? Great choice! Now that you\u2019ve designed a great website and attracted some visitors to your site, you may also want to capture their interest and then engage with them to increase your sales. <\/p>\n\n\n\n

The next step is to add a WordPress Forms to your pages. If you haven\u2019t included forms on your website already, Contact Form 7 is a good form plugin to start with<\/strong>. It\u2019s not only free but it\u2019s also a popular and versatile form plugin for WordPress that allows you to create simple forms easily. What\u2019s even better is that it perfectly integrates with Elementor.<\/p>\n\n\n\n

The question is, how do you add and customise Contact Form 7 with Elementor? Don\u2019t worry, we\u2019re here to help!<\/em><\/strong>   <\/p>\n\n\n\n

In this article, we\u2019ll guide you through the process of adding and customising contact forms within an Elementor-designed page. Here\u2019s a step-by-step guide:<\/p>\n\n\n\n

Step 1. Install and activate Contact Form 7 and Elementor plugins<\/h2>\n\n\n\n

If you haven’t already, install both the Contact Form 7 and Elementor plugins on your WordPress website. To do this, <\/p>\n\n\n\n

    \n
  1. Go to your WordPress Dashboard and navigate to “Plugins<\/strong>” > “Add New<\/strong>” <\/li>\n\n\n\n
  2. Search for “Contact Form 7” and “Elementor”, and click “Install Now<\/strong>” for each plugin. <\/li>\n\n\n\n
  3. Once installed, click “Activate<\/strong>“.<\/li>\n<\/ol>\n\n\n\n

    Step 2. Create a contact form with Contact Form 7<\/h2>\n\n\n\n

    Once you have both Contact Form 7 and Elementor, the next step is to create a contact form. Here\u2019s how to do it:<\/p>\n\n\n\n

      \n
    1. Go to “Contact<\/strong>” > “Add New<\/strong>” in your WordPress Dashboard, you\u2019ll find a default form.<\/li>\n\n\n\n
    2. Edit the form template and customise the form fields.<\/li>\n\n\n\n
    3. Click “Save<\/strong>” and copy the shortcode provided in the “Form<\/strong>” box.<\/li>\n<\/ol>\n\n\n\n

      Step 3. Edit a page or post with Elementor<\/h2>\n\n\n\n

      You need a page or a post built with Elementor in order to customise Contact Form 7 with Elementor. If you don\u2019t have one already, you can easily create it by following the steps below:<\/p>\n\n\n\n

        \n
      1. Go to “Pages<\/strong>” or “Posts<\/strong>” on your WordPress dashboard and create a new page or post, or edit an existing one. <\/li>\n\n\n\n
      2. Click the “Edit with Elementor<\/strong>” button to open the Elementor editor.<\/li>\n\n\n\n
      3. Design the post or page the way you want. <\/li>\n<\/ol>\n\n\n\n

        Elementor provides a simple drag-and-drop interface to design your website. However, make sure you have the basic knowledge of the tool\u2019s functionalities so it doesn\u2019t take you forever to build a page. You can find many resources on the internet about using Elementor tools.  <\/p>\n\n\n\n

        Step 4. Add the Contact Form 7 shortcode to your Elementor page<\/h2>\n\n\n\n

        Your form\u2019s ready and you\u2019ve published an Elementor-designed page. Now, you need to add your Contact Form 7 shortcode to your page. You can do this on Elementor editor by following the steps below: <\/p>\n\n\n\n

          \n
        1. In the Elementor editor, search for the “Shortcode<\/strong>” widget in the panel. <\/li>\n\n\n\n
        2. Drag and drop the widget onto the page where you want the contact form to appear. <\/li>\n\n\n\n
        3. In the “Shortcode” widget settings, paste the Contact Form 7 shortcode you copied earlier.<\/li>\n<\/ol>\n\n\n\n

          Step 5. Customise your form\u2019s appearance with custom CSS<\/h2>\n\n\n\n

          To style your Contact Form 7 form, you’ll need to add custom CSS. You can do this in a couple of different ways:<\/p>\n\n\n\n