{"id":25,"date":"2017-07-05T13:06:08","date_gmt":"2017-07-05T13:06:08","guid":{"rendered":"https:\/\/www.123formbuilder.com\/blog\/how-to-create-a-contact-form-in-wordpress"},"modified":"2022-09-20T07:45:02","modified_gmt":"2022-09-20T07:45:02","slug":"how-to-create-a-contact-form-in-wordpress","status":"publish","type":"post","link":"https:\/\/www.123formbuilder.com\/blog\/how-to-create-a-contact-form-in-wordpress\/","title":{"rendered":"How to Create a Contact Form in WordPress [Infographic]"},"content":{"rendered":"\r\n<p>In this article, I\u2019m going to show you how to\u00a0<a href=\"https:\/\/www.123formbuilder.com\/contact-form-generator\/\">create a\u00a0contact form<\/a>\u00a0in WordPress without having to worry about coding it from tip to toe.<\/p>\r\n\r\n\r\n\r\n<p>Coding is fun, of course, but not everyone is experienced in HTML and PHP, so building your contact form in WordPress with the help of a plugin is a lifesaver.<\/p>\r\n\r\n\r\n\r\n<p>If you want to create a simple, functional, and mobile responsive contact form for your website, protect it from spam and receive submissions in your inbox \u2013 a plugin can do it without a problem.<\/p>\r\n\r\n\r\n\r\n<p>For many years, the\u00a0<a href=\"https:\/\/www.123formbuilder.com\/wordpress-forms\/\">123FormBuilder plugin for WordPress<\/a>\u00a0did a great job in publishing <a href=\"https:\/\/www.123formbuilder.com\/web-forms\/\">web forms<\/a> in WordPress posts and pages. It\u2019s efficient and easy:<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>You create a free account on our <a href=\"\/\">form builder<\/a> &#8211; 123FormBuilder.<\/li>\r\n<li>You create the contact form.<\/li>\r\n<li>You install the 123FormBuilder plugin in your WordPress dashboard and use the shortcode method to publish your form in a post or page.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p>123FormBuilder is also integrated with various <a href=\"https:\/\/www.123formbuilder.com\/web-form-apps\/\">third-party platforms<\/a>\u00a0that make\u00a0<a href=\"https:\/\/www.123formbuilder.com\/data-management\/\">data management<\/a>\u00a0a breeze.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"h-adding-a-contact-form-in-wordpress-with-captainform\"><strong>Adding a Contact Form in WordPress with CaptainForm<\/strong><\/h2>\r\n\r\n\r\n\r\n<p>Our newest\u00a0<a href=\"https:\/\/www.captainform.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress form plugin<\/a>\u00a0makes it easier. You can create a contact form in WordPress without having to move from one platform to another. Here\u2019s a tutorial on how to create a contact form in WordPress with\u00a0<a href=\"https:\/\/www.captainform.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">CaptainForm<\/a>:<\/p>\r\n\r\n\r\n\r\n<p>1.\u00a0<a href=\"https:\/\/www.captainform.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Download<\/a>, install and activate CaptainForm in your WordPress dashboard. You can find CaptainForm in the\u00a0<a href=\"https:\/\/wordpress.org\/plugins\/captainform\/\" target=\"_blank\" rel=\"noreferrer noopener\">Plugin Directory<\/a>, as well.<\/p>\r\n\r\n\r\n\r\n<p>2. Look for the CaptainForm icon in your menu on the left and activate your free account.<\/p>\r\n\r\n\r\n\r\n<p>3. Go to\u00a0<strong>New Form<\/strong>.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/resources.123formbuilder.com\/hs-fs\/hubfs\/123Formbuilder_April2021_Folder\/Images\/captainform-create-new-form.png?width=324&amp;name=captainform-create-new-form.png\" alt=\"captainform\" \/><\/figure>\r\n\r\n\r\n\r\n<p>4. The CaptainForm plugin has a predefined <a href=\"https:\/\/www.123formbuilder.com\/free-form-templates\/gallery-contact\/\">contact form template<\/a> that you may quickly edit in any way you want. Or you can choose to create your contact form from blank.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/resources.123formbuilder.com\/hs-fs\/hubfs\/123Formbuilder_April2021_Folder\/Images\/captainform-contact-form-template.png?width=765&amp;name=captainform-contact-form-template.png\" alt=\"captain form\" \/><\/figure>\r\n\r\n\r\n\r\n<p>5. Drag &amp; drop fields in the editor and select any field to customize it.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/resources.123formbuilder.com\/hs-fs\/hubfs\/123Formbuilder_April2021_Folder\/Images\/captainform-form-editor.png?width=765&amp;name=captainform-form-editor.png\" alt=\"Lead Form\" \/><\/figure>\r\n\r\n\r\n\r\n<p>6. Next, go to\u00a0<strong>Settings<\/strong>\u00a0to configure email notifications and enable anti-spam protection.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/resources.123formbuilder.com\/hs-fs\/hubfs\/123Formbuilder_April2021_Folder\/Images\/captainform-wp-form-settings.png?width=765&amp;name=captainform-wp-form-settings.png\" alt=\"Security Options\" \/><\/figure>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/staticresources123\/blog-images\/captainform-secure-forms.png\" alt=\"how to create a contact form in WordPress with security measures\" \/><\/figure>\r\n\r\n\r\n\r\n<p>You can configure your contact form\u2019s\u00a0<strong>CAPTCHA<\/strong>\u00a0directly in the editor. Just click the field above the submit button and you will find the Captcha options on the left.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/resources.123formbuilder.com\/hs-fs\/hubfs\/123Formbuilder_April2021_Folder\/Images\/captainform-captcha-form.png?width=765&amp;name=captainform-captcha-form.png\" alt=\"Contact Form\" \/><\/figure>\r\n\r\n\r\n\r\n<p>7. Finally, go to\u00a0<strong>Publish<\/strong>\u00a0and select the embed method. By creating a contact form in WordPress with CaptainForm, you can embed your contact form in a post, page, widget, popup, or in a theme by using its function call code. Copy the embed code and paste it where needed.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/resources.123formbuilder.com\/hs-fs\/hubfs\/123Formbuilder_April2021_Folder\/Images\/captainform-embed-wp-form.png?width=765&amp;name=captainform-embed-wp-form.png\" alt=\"embed form\" \/><\/figure>\r\n\r\n\r\n\r\n<p>Messages are sent to you by email, but they are also stored in the\u00a0<strong>Submissions<\/strong>\u00a0section of the contact form. Read more about submissions in\u00a0<a href=\"http:\/\/www.captainform.com\/docs\/where-are-form-submissions-stored\/\" target=\"_blank\" rel=\"noreferrer noopener\">CaptainForm\u2019s documentation<\/a>.<\/p>\r\n\r\n\r\n\r\n<p>If you want to style your contact form with some CSS, go to\u00a0<strong>Settings<\/strong>\u00a0\u2192\u00a0<strong>Themes<\/strong>\u00a0and click the\u00a0<strong><a href=\"https:\/\/www.captainform.com\/docs\/add-custom-css-to-your-captainform-wp-forms\" target=\"_blank\" rel=\"noreferrer noopener\">custom CSS<\/a><\/strong>\u00a0link.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/resources.123formbuilder.com\/hs-fs\/hubfs\/123Formbuilder_April2021_Folder\/Images\/captainform-css-form.png?width=568&amp;name=captainform-css-form.png\" alt=\"Custom CSS\" \/><\/figure>\r\n\r\n\r\n\r\n<p>To add some JavaScript, go to\u00a0<strong>Settings<\/strong>\u00a0\u2192\u00a0<strong>Advanced<\/strong>\u00a0and enable the option to add JS on the form or on the\u00a0<a href=\"https:\/\/www.captainform.com\/docs\/how-to-add-javascript-code-to-the-thank-you-page\" target=\"_blank\" rel=\"noreferrer noopener\">Thank-You page<\/a>. You just need to upload your script on your server and provide its URL in the JS box from that section.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/resources.123formbuilder.com\/hs-fs\/hubfs\/123Formbuilder_April2021_Folder\/Images\/captainform-wp-form-settings.png?width=765&amp;name=captainform-wp-form-settings.png\" alt=\"Email Ntifications\" \/><\/figure>\r\n\r\n\r\n\r\n<p>And that\u2019s how simple you can create a contact form in WordPress with CaptainForm. No coding experience is needed, just the plugin. Install CaptainForm in your WordPress dashboard to start right away.<\/p>\r\n\r\n\r\n\r\n<p>With the help of our friends at\u00a0<a href=\"https:\/\/venngage.com\/\" target=\"_blank\" rel=\"nofollow noopener\">Venngage<\/a>, we\u2019ve created this infographic that underlines the up\u2019s and down\u2019s of creating a contact form in WordPress and how our CaptainForm plugin comes to the rescue:<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/staticresources123\/blog-images\/captainform-infografic.png\" alt=\"how to create a contact form in wordpress infographic\" \/><\/figure>\r\n","protected":false},"excerpt":{"rendered":"<p>In this article, I\u2019m going to show you how to\u00a0create a\u00a0contact form\u00a0in WordPress without having to worry about coding it from tip to toe. Coding is fun, of course, but not everyone is experienced in HTML and PHP, so building your contact form in WordPress with the help of a plugin is a lifesaver. If [&hellip;]<\/p>\n","protected":false},"author":31,"featured_media":346,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[16,18,20],"tags":[],"class_list":["post-25","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-form-favourites","category-level-up-your-forms","category-ultimate-guides"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.2 (Yoast SEO v27.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How To Create A Contact Form In WordPress Without Coding<\/title>\n<meta name=\"description\" content=\"Learning how to create a contact form in WordPress can be difficult, if you want to code it. Instead, create one without using code. Follow this tutorial.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.123formbuilder.com\/blog\/how-to-create-a-contact-form-in-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Contact Form in WordPress [Infographic]\" \/>\n<meta property=\"og:description\" content=\"Learning how to create a contact form in WordPress can be difficult, if you want to code it. Instead, create one without using code. Follow this tutorial.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.123formbuilder.com\/blog\/how-to-create-a-contact-form-in-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"123FormBuilder Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-07-05T13:06:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-20T07:45:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/2\/2017\/07\/wordpress.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"533\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Oscar Erk\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Oscar Erk\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How To Create A Contact Form In WordPress Without Coding","description":"Learning how to create a contact form in WordPress can be difficult, if you want to code it. Instead, create one without using code. Follow this tutorial.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.123formbuilder.com\/blog\/how-to-create-a-contact-form-in-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Contact Form in WordPress [Infographic]","og_description":"Learning how to create a contact form in WordPress can be difficult, if you want to code it. Instead, create one without using code. Follow this tutorial.","og_url":"https:\/\/www.123formbuilder.com\/blog\/how-to-create-a-contact-form-in-wordpress\/","og_site_name":"123FormBuilder Blog","article_published_time":"2017-07-05T13:06:08+00:00","article_modified_time":"2022-09-20T07:45:02+00:00","og_image":[{"width":800,"height":533,"url":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/2\/2017\/07\/wordpress.jpg","type":"image\/jpeg"}],"author":"Oscar Erk","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Oscar Erk","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.123formbuilder.com\/blog\/how-to-create-a-contact-form-in-wordpress\/#article","isPartOf":{"@id":"https:\/\/www.123formbuilder.com\/blog\/how-to-create-a-contact-form-in-wordpress\/"},"author":{"name":"Oscar Erk","@id":"https:\/\/www.123formbuilder.com\/blog\/#\/schema\/person\/cdebd32c7d95dbb692eb685554790929"},"headline":"How to Create a Contact Form in WordPress [Infographic]","datePublished":"2017-07-05T13:06:08+00:00","dateModified":"2022-09-20T07:45:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www.123formbuilder.com\/blog\/how-to-create-a-contact-form-in-wordpress\/"},"wordCount":565,"publisher":{"@id":"https:\/\/www.123formbuilder.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.123formbuilder.com\/blog\/how-to-create-a-contact-form-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/2\/2017\/07\/wordpress.jpg","articleSection":["Best Practices","Form Tips","Guides"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.123formbuilder.com\/blog\/how-to-create-a-contact-form-in-wordpress\/","url":"https:\/\/www.123formbuilder.com\/blog\/how-to-create-a-contact-form-in-wordpress\/","name":"How To Create A Contact Form In WordPress Without Coding","isPartOf":{"@id":"https:\/\/www.123formbuilder.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.123formbuilder.com\/blog\/how-to-create-a-contact-form-in-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/www.123formbuilder.com\/blog\/how-to-create-a-contact-form-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/2\/2017\/07\/wordpress.jpg","datePublished":"2017-07-05T13:06:08+00:00","dateModified":"2022-09-20T07:45:02+00:00","description":"Learning how to create a contact form in WordPress can be difficult, if you want to code it. Instead, create one without using code. Follow this tutorial.","breadcrumb":{"@id":"https:\/\/www.123formbuilder.com\/blog\/how-to-create-a-contact-form-in-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.123formbuilder.com\/blog\/how-to-create-a-contact-form-in-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.123formbuilder.com\/blog\/how-to-create-a-contact-form-in-wordpress\/#primaryimage","url":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/2\/2017\/07\/wordpress.jpg","contentUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/2\/2017\/07\/wordpress.jpg","width":800,"height":533,"caption":"coder at work wearing a wordpress t-shirt"},{"@type":"BreadcrumbList","@id":"https:\/\/www.123formbuilder.com\/blog\/how-to-create-a-contact-form-in-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.123formbuilder.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Form Tips","item":"https:\/\/www.123formbuilder.com\/blog\/tag\/level-up-your-forms"},{"@type":"ListItem","position":3,"name":"How to Create a Contact Form in WordPress [Infographic]"}]},{"@type":"WebSite","@id":"https:\/\/www.123formbuilder.com\/blog\/#website","url":"https:\/\/www.123formbuilder.com\/blog\/","name":"123FormBuilder Blog","description":"","publisher":{"@id":"https:\/\/www.123formbuilder.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.123formbuilder.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.123formbuilder.com\/blog\/#organization","name":"123FormBuilder Blog","url":"https:\/\/www.123formbuilder.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.123formbuilder.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/2\/2020\/12\/logo.png","contentUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/2\/2020\/12\/logo.png","width":131,"height":25,"caption":"123FormBuilder Blog"},"image":{"@id":"https:\/\/www.123formbuilder.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.123formbuilder.com\/blog\/#\/schema\/person\/cdebd32c7d95dbb692eb685554790929","name":"Oscar Erk","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/afa59182d087bbb3a497493c89d3791b8d8f86724a08cf49ee5e55c34f1c4305?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/afa59182d087bbb3a497493c89d3791b8d8f86724a08cf49ee5e55c34f1c4305?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/afa59182d087bbb3a497493c89d3791b8d8f86724a08cf49ee5e55c34f1c4305?s=96&d=mm&r=g","caption":"Oscar Erk"},"url":"https:\/\/www.123formbuilder.com\/blog\/author\/oscar-erk123formbuilder-com"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.123formbuilder.com\/blog\/wp-json\/wp\/v2\/posts\/25","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.123formbuilder.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.123formbuilder.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.123formbuilder.com\/blog\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/www.123formbuilder.com\/blog\/wp-json\/wp\/v2\/comments?post=25"}],"version-history":[{"count":12,"href":"https:\/\/www.123formbuilder.com\/blog\/wp-json\/wp\/v2\/posts\/25\/revisions"}],"predecessor-version":[{"id":4473,"href":"https:\/\/www.123formbuilder.com\/blog\/wp-json\/wp\/v2\/posts\/25\/revisions\/4473"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.123formbuilder.com\/blog\/wp-json\/wp\/v2\/media\/346"}],"wp:attachment":[{"href":"https:\/\/www.123formbuilder.com\/blog\/wp-json\/wp\/v2\/media?parent=25"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.123formbuilder.com\/blog\/wp-json\/wp\/v2\/categories?post=25"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.123formbuilder.com\/blog\/wp-json\/wp\/v2\/tags?post=25"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}