{"id":139657,"date":"2021-04-15T15:30:00","date_gmt":"2021-04-15T20:30:00","guid":{"rendered":"https:\/\/getflywheel.com\/?p=13090"},"modified":"2024-03-21T14:50:49","modified_gmt":"2024-03-21T19:50:49","slug":"how-to-use-contact-form-7","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-use-contact-form-7\/","title":{"rendered":"How to Use Contact Form 7"},"content":{"rendered":"\n

Including easy-to-find contact information on the websites you build is a great way to help users get ahold of you (or your clients!) Sometimes, an email address is all you need, but if you\u2019d like to automate the process with a little more functionality, a contact form can help ensure that you always get the information you need from the people trying to reach you. <\/span><\/p>\n\n\n\n

While you could <\/span>build your own custom plugin<\/span><\/a>, there are a number of great form plugins already available that you could install\u2014<\/span>Contact Form 7<\/span><\/a> is one of them.  <\/span><\/p>\n\n\n\n

With more than five million active installations, Contact Form 7 is the most popular form plugin in the WordPress plugin directory, and it\u2019s a great solution for many of your form needs. <\/span><\/p>\n\n\n\n

It’s also regularly updated and includes lots of customizable choices, numerous options for multiple forms, and great support in general.<\/span><\/p>\n\n\n\n

Ready to give Contact Form 7 a try? Let\u2019s set it up!<\/span><\/p>\n\n\n\n

Install It<\/h3>\n\n\n\n

To install Contact Form 7, just go to <\/span>Plugins > Add New<\/b>. Search for \u201cContact Form 7\u201d and click <\/span>Install Now<\/b>. <\/span><\/p>\n\n\n\n

\"screenshot<\/figure>\n\n\n\n

Build the Actual Form<\/h3>\n\n\n\n

Once you\u2019ve installed the plugin, navigate to the new <\/span>Contact<\/b> tab and select <\/span>Add New<\/b>.<\/span><\/p>\n\n\n\n

\"screenshot<\/figure>\n\n\n\n

Select the language you\u2019d like to use, and again, hit the <\/span>Add New<\/b> button. <\/span><\/p>\n\n\n\n

Now we\u2019ll build the actual form. As a default, you\u2019ll see a form that asks for \u201cYour Name (required),\u201d \u201cYour Email (required),\u201d \u201cSubject,\u201d \u201cYour Message,\u201d and a <\/span>Send<\/b> button<\/span>.<\/p>\n\n\n\n

\"contact-form-7-form\"<\/figure>\n\n\n\n

From here you can add, remove, or simply edit any of these fields to meet the needs of your site. To add a new tag to the form, just click the relevant button (text, email, URL, etc.). A new window will open with further options, such as if the tag is required or if you\u2019d like placeholder text until the user fills enters their own. <\/span><\/p>\n\n\n\n

\"contact-form-7-options\"<\/figure>\n\n\n\n

Once you hit<\/span> Insert Tag<\/b>, you\u2019ll see a new line added to your form that looks something like this: <\/span><\/p>\n\n\n\n

[url* url-300 placeholder \"www.website.com\"]<\/code><\/pre>\n\n\n\n
That\u2019s a good start, but you\u2019ll want to add text above that tag so users know what you\u2019re looking for. <\/span><\/p>\n\n\n\n
Start a new paragraph, enter your text, add a break before the tag, and then close it with a paragraph. It should look like this:<\/span><\/p>\n\n\n\n
&amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;gt;Website URL &amp;amp;amp;amp;amp;amp;lt;br \/&amp;amp;amp;amp;amp;amp;gt;\n[url* url-300 placeholder \"www.website.com\"] &amp;amp;amp;amp;amp;amp;lt;\/p&amp;amp;amp;amp;amp;amp;gt;<\/code><\/pre>\n\n\n\n
Once you\u2019re done setting up your form, hit <\/span>Save<\/b>. Don\u2019t worry, you can always make changes later on! <\/span><\/p>\n\n\n\n
Set Your Email Preferences<\/h3>\n\n\n\n
When someone submits a  form, you\u2019ll get an email with all of the information they\u2019ve provided. In the Mail<\/strong> tab, you can arrange the information in that email using the same tags from your form. At the top of the page, it\u2019ll tell you which tags you can use. <\/span><\/p>\n\n\n\n
\"contact-form-7-tags\"<\/figure>\n\n\n\n
In the <\/span>Message Body<\/b> section, you can use those tabs to arrange how the email you\u2019ll receive will look. This makes it super easy to see everything your clients submit.<\/span> <\/span><\/p>\n\n\n\n
Again, once you’re done, hit Save<\/strong>.<\/p>\n\n\n\n
Edit the Automated Messages<\/h3>\n\n\n\n
The <\/span>Messages<\/b> tab allows you to control messages a user sees when they submit a form. This includes anything from error messages to notifying the user that their form was successfully submitted. <\/span><\/p>\n\n\n\n
There are default messages for just about every use case, so if you\u2019re not too concerned about adding a unique tone of voice, you can probably skip this tab. But if you\u2019d like to add a little personality to your form, these messages are a great way to do so. <\/span><\/p>\n\n\n\n
\"contact-form-7-messages\"<\/figure>\n\n\n\n
Once you’ve made any changes, go ahead and Save<\/strong>.<\/p>\n\n\n\n
Add any Additional Settings<\/h3>\n\n\n\n
The last tab, Additional Settings<\/strong>, allows you to add some specific code snippets to your form. You can view these functions here<\/a>.<\/p>\n\n\n\n
Once you’re finished with any additional settings, hit Save<\/strong>, then copy the shortcode from the top of the page.<\/p>\n\n\n\n
\"contact-form-7-shortcode\"<\/figure>\n\n\n\n
Finally, paste that shortcode onto the post or page you want the form on, and voila! You’ve got a contact form on your site.<\/p>\n\n\n\n
\n\n\n\n
<\/div>\n\n\n\n
Contact forms are just the tip of the iceberg when it comes to all of the great marketing functionality available for WordPress sites\u2014what we often forget under the waterline of that iceberg is all the important performance optimizations provided by your host. <\/p>\n\n\n\n
If you’re looking for a more performant WordPress hosting<\/a> partner, check out our plans<\/a>! <\/p>\n","protected":false},"excerpt":{"rendered":"
Including easy-to-find contact information on the websites you build is a great way to help users get ahold of you (or your clients!) Sometimes, an email address is all you need, but if you\u2019d like to automate the process with a little more functionality, a contact form can help ensure that you always get the…<\/span><\/span><\/p>\n","protected":false},"author":326,"featured_media":142024,"template":"","resource-topic":[901],"resource-role":[1397,896,897],"resource-type":[916],"class_list":["post-139657","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\nHow to Use Contact Form 7<\/title>\n<meta name=\"description\" content=\"A contact form can help ensure that you're always getting the information you need from clients. Here's how to build one with Contact Form 7.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use Contact Form 7\" \/>\n<meta property=\"og:description\" content=\"A contact form can help ensure that you're always getting the information you need from clients. Here's how to build one with Contact Form 7.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-use-contact-form-7\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-21T19:50:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2021\/04\/contact-form-header.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"627\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"How to Use Contact Form 7\" \/>\n<meta name=\"twitter:description\" content=\"A contact form can help ensure that you're always getting the information you need from clients. Here's how to build one with Contact Form 7.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2021\/04\/contact-form-header.png\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-use-contact-form-7\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-use-contact-form-7\/\",\"name\":\"How to Use Contact Form 7\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2021-04-15T20:30:00+00:00\",\"dateModified\":\"2024-03-21T19:50:49+00:00\",\"description\":\"A contact form can help ensure that you're always getting the information you need from clients. Here's how to build one with Contact Form 7.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-use-contact-form-7\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-use-contact-form-7\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-use-contact-form-7\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Use Contact Form 7\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f6180ac79b3b1f535995d94fa9560149\",\"name\":\"Britt Dreisbach\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8895e96ebec5211a4f9dc2483d055c38bcd0da21fb7ef6c38973ef8e83a733b4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8895e96ebec5211a4f9dc2483d055c38bcd0da21fb7ef6c38973ef8e83a733b4?s=96&d=mm&r=g\",\"caption\":\"Britt Dreisbach\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use Contact Form 7","description":"A contact form can help ensure that you're always getting the information you need from clients. Here's how to build one with Contact Form 7.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"How to Use Contact Form 7","og_description":"A contact form can help ensure that you're always getting the information you need from clients. Here's how to build one with Contact Form 7.","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-use-contact-form-7\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2024-03-21T19:50:49+00:00","og_image":[{"width":1200,"height":627,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2021\/04\/contact-form-header.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_title":"How to Use Contact Form 7","twitter_description":"A contact form can help ensure that you're always getting the information you need from clients. Here's how to build one with Contact Form 7.","twitter_image":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2021\/04\/contact-form-header.png","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-use-contact-form-7\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-use-contact-form-7\/","name":"How to Use Contact Form 7","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2021-04-15T20:30:00+00:00","dateModified":"2024-03-21T19:50:49+00:00","description":"A contact form can help ensure that you're always getting the information you need from clients. Here's how to build one with Contact Form 7.","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-use-contact-form-7\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/how-to-use-contact-form-7\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-use-contact-form-7\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"How to Use Contact Form 7"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f6180ac79b3b1f535995d94fa9560149","name":"Britt Dreisbach","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8895e96ebec5211a4f9dc2483d055c38bcd0da21fb7ef6c38973ef8e83a733b4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8895e96ebec5211a4f9dc2483d055c38bcd0da21fb7ef6c38973ef8e83a733b4?s=96&d=mm&r=g","caption":"Britt Dreisbach"}}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2021\/04\/contact-form.png","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Designer, Developer, Freelancer","topic":"<strong>Topics:<\/strong> WordPress","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/139657","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/326"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/142024"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=139657"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=139657"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=139657"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=139657"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}