{"id":6509,"date":"2011-03-15T05:49:13","date_gmt":"2011-03-15T09:49:13","guid":{"rendered":"http:\/\/info.template-help.com\/?p=6509"},"modified":"2017-09-06T05:45:21","modified_gmt":"2017-09-06T09:45:21","slug":"how-to-create-contact-form-in-wordpress","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/how-to-create-contact-form-in-wordpress.html","title":{"rendered":"WordPress. How to create Contact Form (based on Contact Form7)"},"content":{"rendered":"

\r\n

This video tutorial will show you how to add a contact form in WordPress using the Contact Form 7 plugin.<\/p>\r\n

WordPress. How to create Contact Form (based on Contact Form7)<\/a><\/p>\r\n

\r\n\r\n\r\n<\/a>\r\n<\/div>\r\n
    \r\n
  1. \r\n

    Installing Contact Form 7 plugin<\/strong>:<\/p>\r\n

      \r\n
    1. \r\n

      Open WordPress admin panel:<\/p>\r\n

      \t\t\"Wordpress_How_to_create_contact_form-1\"<\/a><\/p>\r\n<\/li>\r\n

    2. \r\n

      Go to Plugins<\/strong> menu and click Add New<\/strong>:<\/p>\r\n

      \t\"Wordpress_How_to_create_contact_form-2\"<\/a><\/p>\r\n

      If you want to search for the plugin and download from the Internet, type Contact Form 7<\/strong> in the search field, you will see all details for this plugin and you can install it:<\/p>\r\n

      \t\t\"Wordpress_How_to_create_contact_form-3\"<\/a><\/p>\r\n<\/li>\r\n<\/ol>\r\n<\/li>\r\n

    3. \r\n

      Creating Contact Form<\/strong>:<\/p>\r\n

      If the plugin has been installed properly, you should see the Contact<\/strong> tab in the left column. Click it:<\/p>\r\n

      \"Wordpress_How_to_create_contact_form-4\"<\/a><\/p>\r\n

        \r\n
      1. \r\n

        You can edit the current Contact form from this plugin or create a new contact form, just click Add New<\/strong> at the top of the screen:<\/p>\r\n

        \"Wordpress_How_to_create_contact_form-5\"<\/a><\/p>\r\n<\/li>\r\n

      2. \r\n

        Use the generate Tag drop down to create the codes for every field like Text field, text area, checkboxes, etc., and copy the code to the container on the left side.<\/p>\r\n

        \"Wordpress_How_to_create_contact_form-6\"<\/a><\/p>\r\n<\/li>\r\n

      3. \r\n

        From each Generated codes field, you can find the section ‘And, put this code into the Mail fields below<\/em>.’, copy the codes below it and add them to Mail block, so that you can get the message from this Contact Form in the way you need (set the structure for the email that you will get from Sender):<\/p>\r\n

        \"Wordpress_How_to_create_contact_form-7\"<\/a><\/p>\r\n<\/li>\r\n

      4. \r\n

        Click Save and copy the code from the Contact Form that we have created to paste it in some specific position on the website:<\/p>\r\n

        \"Wordpress_How_to_create_contact_form-8\"<\/a><\/p>\r\n<\/li>\r\n<\/ol>\r\n<\/li>\r\n

      5. \r\n

        Adding Contact Form to a Text Widget<\/strong>:<\/p>\r\n

          \r\n
        1. \r\n

          Go to Appearance > Widgets<\/strong>:<\/p>\r\n

          \"Wordpress_How_to_create_contact_form-9\"<\/a><\/p>\r\n<\/li>\r\n

        2. \r\n

          Drag and drop Text<\/strong> widget to the Sidebar section (or any section you want to add it to):<\/p>\r\n

          \"Wordpress_How_to_create_contact_form-10\"<\/a><\/p>\r\n<\/li>\r\n

        3. \r\n

          Paste the code to this Text widget and click Save<\/strong>:<\/p>\r\n

          \"Wordpress_How_to_create_contact_form-11\"<\/a><\/p>\r\n<\/li>\r\n

        4. \r\n

          Go to Blog page to check the sidebar Contact Form:<\/p>\r\n

          \"Wordpress_How_to_create_contact_form-12\"<\/a><\/p>\r\n<\/li>\r\n<\/ol>\r\n<\/li>\r\n

        5. \r\n

          Adding Contact Form to a specific page and linking this page to Menu <\/strong>:<\/p>\r\n

            \r\n
          1. \r\n

            Creating New Page with a Contact Form and adding it to menu<\/strong>. Go to Pages, click Add New<\/strong> to add a new page:<\/p>\r\n

            \"Wordpress_How_to_create_contact_form-13\"<\/a><\/p>\r\n<\/li>\r\n

          2. \r\n

            Paste the codes of Contact Form to the Content container of this page, and Publish:<\/p>\r\n

            \"Wordpress_How_to_create_contact_form-14\"<\/a><\/p>\r\n<\/li>\r\n

          3. \r\n

            Go to Appearance > Menus<\/strong>:<\/p>\r\n

            \"Wordpress_How_to_create_contact_form-15\"<\/a><\/p>\r\n<\/li>\r\n

          4. \r\n

            Choose the Header Menu:<\/p>\r\n

            \"Wordpress_How_to_create_contact_form-16\"<\/a><\/p>\r\n<\/li>\r\n

          5. \r\n

            Drag that new page to the position you want and click Save Menu<\/strong>:<\/p>\r\n

            \"Wordpress_How_to_create_contact_form-17\"<\/a><\/p>\r\n<\/li>\r\n

          6. \r\n

            Refresh your website to see the new Menu item, click it and check the new page that has your new Contact Form:<\/p>\r\n

            \"Wordpress_How_to_create_contact_form-18\"<\/a><\/p>\r\n<\/li>\r\n<\/ol>\r\n<\/li>\r\n<\/ol>\r\n

            Feel free to check the detailed video tutorial below:<\/p>\r\n

            WordPress. How to create Contact Form (based on Contact Form7)<\/a>\r\n<\/p>\r\n<\/p>\r\n

            <\/p>","protected":false},"excerpt":{"rendered":"

            This video tutorial will show you how to add contact form in WordPress using the Contact Form 7 plugin.<\/p>\n","protected":false},"author":69,"featured_media":38829,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[247,728],"tags":[639,796,640,2405],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/6509"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/69"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=6509"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/6509\/revisions"}],"predecessor-version":[{"id":83090,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/6509\/revisions\/83090"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/38829"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=6509"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=6509"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=6509"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}