{"id":14619,"date":"2020-08-20T20:25:02","date_gmt":"2020-08-20T18:25:02","guid":{"rendered":"https:\/\/marabelia.com\/?p=14619"},"modified":"2025-06-19T12:30:21","modified_gmt":"2025-06-19T10:30:21","slug":"complete-code-shortcodes-for-forms-with-material-design-for-contact-form-7","status":"publish","type":"post","link":"https:\/\/marabelia.com\/en\/complete-code-shortcodes-for-forms-with-material-design-for-contact-form-7\/","title":{"rendered":"Complete code (shortcodes) for forms with Material Design for Contact Form 7"},"content":{"rendered":"<div class=\"wpb-content-wrapper\">[vc_row][vc_column][vc_column_text]\n<h1>Pros and Cons of <em>Material Design for Contact Form 7<\/em><\/h1>\n<p style=\"text-align: justify;\">We want to start by saying that <em>Material Design for Contact Form 7<\/em> is not a cure-all solution. It is an extension for <em>Contact Form 7<\/em> that creates a friendlier design for forms and, in its paid version, offers interesting options such as a pre-designed form for dark or black backgrounds (\u201cBlack Form\u201d), transforming buttons and checkboxes into switches, and changing parameters like font size and button style.<\/p>\n<p>You can find the free version of the plugin in the WordPress repository here:<\/p>\n<p>https:\/\/es.wordpress.org\/plugins\/material-design-for-contact-form-7\/<\/p>\n<p style=\"text-align: justify;\">The least appealing aspect of this plugin is its complexity. The functionality it adds to <em>Contact Form 7<\/em> isn\u2019t very intuitive and is based on shortcodes, so it\u2019s best to understand how these work before designing a form with this extension.<\/p>\n<p style=\"text-align: justify;\">Additionally, the integrated Captcha doesn\u2019t work properly and lets through a lot of spam. Therefore, we recommend adding Google Captcha instead. In particular, we use <em>Advanced noCaptcha &amp; invisible Captcha<\/em> (v2 &amp; v3) by <em>Shamim Hasan<\/em> to add Google Captcha to our forms:<\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"ux4OTOLShP\"><p><a href=\"https:\/\/es.wordpress.org\/plugins\/advanced-nocaptcha-recaptcha\/\">CAPTCHA 4WP &#8211; Soluci\u00f3n antispam para WordPress<\/a><\/p><\/blockquote>\n<p><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"\u00abCAPTCHA 4WP &#8211; Soluci\u00f3n antispam para WordPress\u00bb \u2014 Plugin Directory\" src=\"https:\/\/es.wordpress.org\/plugins\/advanced-nocaptcha-recaptcha\/embed\/#?secret=hA03wlpG04#?secret=ux4OTOLShP\" data-secret=\"ux4OTOLShP\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<p style=\"text-align: justify;\">To make your work easier with this plugin, we want to share 4 ready-to-use forms with their respective codes that you can copy and paste directly into <em>Contact Form 7 + Material Design for Contact Form<\/em>.<\/p>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row css=&#8221;.vc_custom_1597949554999{padding-top: 2% !important;padding-bottom: 1% !important;}&#8221;][vc_column][vc_empty_space][vc_column_text]\n<h1>Pre-designed form templates with Material Design for Contact Form 7<\/h1>\n[\/vc_column_text][vc_empty_space][vc_empty_space][vc_column_text]\n<h2><strong><span style=\"text-decoration: underline;\"><span style=\"color: #00aae7; text-decoration: underline;\">Form Template 1<\/span><\/span><\/strong><\/h2>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row css=&#8221;.vc_custom_1597950280002{padding-top: 5% !important;padding-right: 2% !important;padding-bottom: 4% !important;padding-left: 2% !important;background-color: rgba(33,168,209,0.04) !important;*background-color: rgb(33,168,209) !important;}&#8221;][vc_column][vc_column_text][contact-form-7 id=&#8221;10626&#8243;][\/vc_column_text][\/vc_column][\/vc_row][vc_row css=&#8221;.vc_custom_1597950156111{padding-top: 2% !important;padding-right: 2% !important;padding-bottom: 2% !important;padding-left: 2% !important;background-color: rgba(33,168,209,0.46) !important;*background-color: rgb(33,168,209) !important;}&#8221;][vc_column][vc_btn style=&#8221;3d&#8221; shape=&#8221;square&#8221; color=&#8221;info&#8221; size=&#8221;lg&#8221; align=&#8221;center&#8221; i_icon_fontawesome=&#8221;fas fa-eye&#8221; button_block=&#8221;true&#8221; add_icon=&#8221;true&#8221; title=&#8221;SEE CODE FOR FORM 1&#8243; link=&#8221;url:https%3A%2F%2Fmarabelia.com%2Fwp-content%2Fuploads%2F2020%2F08%2FMaterial-design-Ejemplo-de-formulario-1.pdf||target:%20_blank|&#8221;][vc_empty_space][vc_column_text]Code for the <em>message body<\/em>:<br \/>\n[\/vc_column_text][vc_column_text]NAME: [your-name]\nE-MAIL: [your-email]\nINQUIRY: [menu-397]\nCITY: [your-address]\nPHONE: [number-584]\nMESSAGE: [your-message][\/vc_column_text][vc_empty_space][\/vc_column][\/vc_row][vc_row css=&#8221;.vc_custom_1597949554999{padding-top: 2% !important;padding-bottom: 1% !important;}&#8221;][vc_column][vc_empty_space][vc_empty_space][vc_column_text]\n<h2><span style=\"color: #282828;\"><strong><span style=\"text-decoration: underline;\">Form Template 2 (BLACK)<\/span><\/strong><\/span><\/h2>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row css=&#8221;.vc_custom_1597950360902{padding-top: 5% !important;padding-right: 2% !important;padding-bottom: 4% !important;padding-left: 2% !important;background-color: rgba(0,0,0,0.61) !important;*background-color: rgb(0,0,0) !important;}&#8221;][vc_column][vc_column_text][contact-form-7 id=&#8221;10627&#8243;][\/vc_column_text][\/vc_column][\/vc_row][vc_row css=&#8221;.vc_custom_1597950402653{padding-top: 2% !important;padding-right: 2% !important;padding-bottom: 2% !important;padding-left: 2% !important;background-color: rgba(135,135,135,0.17) !important;*background-color: rgb(135,135,135) !important;}&#8221;][vc_column][vc_btn style=&#8221;3d&#8221; shape=&#8221;square&#8221; color=&#8221;inverse&#8221; size=&#8221;lg&#8221; align=&#8221;center&#8221; i_icon_fontawesome=&#8221;fas fa-eye&#8221; button_block=&#8221;true&#8221; add_icon=&#8221;true&#8221; title=&#8221;SEE CODE FOR FORM 2&#8243; link=&#8221;url:https%3A%2F%2Fmarabelia.com%2Fwp-content%2Fuploads%2F2020%2F08%2FFormulario-2-Black.pdf||target:%20_blank|&#8221;][vc_empty_space][vc_column_text]Code for the <em>body of the message:<\/em>:[\/vc_column_text][vc_column_text]\n<pre>NAME: [your-name]\r\nE-MAIL: [your-email]\r\nWHAT DO YOU PREFER: [checkbox-43]\r\nMESSAGE: [your-message]\r\n\r\n<\/pre>\n[\/vc_column_text][vc_empty_space][\/vc_column][\/vc_row][vc_row css=&#8221;.vc_custom_1597949554999{padding-top: 2% !important;padding-bottom: 1% !important;}&#8221;][vc_column][vc_empty_space][vc_empty_space][vc_column_text]\n<h2><span style=\"color: #ff9900;\"><strong><span style=\"text-decoration: underline;\">Form Template 3<\/span><\/strong><\/span><\/h2>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row css=&#8221;.vc_custom_1597950632834{padding-top: 5% !important;padding-right: 2% !important;padding-bottom: 4% !important;padding-left: 2% !important;background-color: rgba(221,153,51,0.08) !important;*background-color: rgb(221,153,51) !important;}&#8221;][vc_column][vc_column_text][contact-form-7 id=&#8221;10632&#8243;][\/vc_column_text][\/vc_column][\/vc_row][vc_row css=&#8221;.vc_custom_1597950655471{padding-top: 2% !important;padding-right: 2% !important;padding-bottom: 2% !important;padding-left: 2% !important;background-color: rgba(221,153,51,0.56) !important;*background-color: rgb(221,153,51) !important;}&#8221;][vc_column][vc_btn style=&#8221;3d&#8221; shape=&#8221;square&#8221; color=&#8221;warning&#8221; size=&#8221;lg&#8221; align=&#8221;center&#8221; i_icon_fontawesome=&#8221;far fa-eye&#8221; button_block=&#8221;true&#8221; add_icon=&#8221;true&#8221; title=&#8221;SEE CODE FOR FORM 3&#8243; link=&#8221;url:https%3A%2F%2Fmarabelia.com%2Fwp-content%2Fuploads%2F2020%2F08%2Fformulario-3.pdf||target:%20_blank|&#8221;][vc_empty_space][vc_column_text]Code for the <em>body of the message<\/em>:[\/vc_column_text][vc_column_text]\n<pre>Name: [your-name]\r\nEmail: [your-email]\r\nCity: [your-address]\r\nPhone: [number-584]\r\nOption: [checkbox-613]\r\nNumber: [radio-671]\r\nAttachment: [file-68]\r\nMessage: [your-message]\r\n\r\n<\/pre>\n[\/vc_column_text][vc_empty_space][\/vc_column][\/vc_row]\n<\/div>","protected":false},"excerpt":{"rendered":"[vc_row][vc_column][vc_column_text] Pros and Cons of Material Design for Contact Form 7 We want to start by saying that Material Design for Contact Form 7 is not a cure-all solution. It is an extension for Contact Form 7 that creates a friendlier design for forms and, in its paid version, offers interesting options such as a [&#8230;]\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[77,99,83,98],"tags":[],"class_list":["post-14619","post","type-post","status-publish","format-standard","hentry","category-creativity-and-design","category-plugins-wordpress-2","category-tools","category-wordpress-2"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Complete code (shortcodes) for forms with Material Design for Contact Form 7 &#8226; Marabelia | Agencia Digital en Valencia<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marabelia.com\/en\/complete-code-shortcodes-for-forms-with-material-design-for-contact-form-7\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Complete code (shortcodes) for forms with Material Design for Contact Form 7 &#8226; Marabelia | Agencia Digital en Valencia\" \/>\n<meta property=\"og:description\" content=\"[vc_row][vc_column][vc_column_text] Pros and Cons of Material Design for Contact Form 7 We want to start by saying that Material Design for Contact Form 7 is not a cure-all solution. It is an extension for Contact Form 7 that creates a friendlier design for forms and, in its paid version, offers interesting options such as a [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marabelia.com\/en\/complete-code-shortcodes-for-forms-with-material-design-for-contact-form-7\/\" \/>\n<meta property=\"og:site_name\" content=\"Marabelia | Agencia Digital en Valencia\" \/>\n<meta property=\"article:published_time\" content=\"2020-08-20T18:25:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-19T10:30:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/Portada-Marabelia-sitio-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin-mbl\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-mbl\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Complete code (shortcodes) for forms with Material Design for Contact Form 7 &#8226; Marabelia | Agencia Digital en Valencia","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:\/\/marabelia.com\/en\/complete-code-shortcodes-for-forms-with-material-design-for-contact-form-7\/","og_locale":"en_US","og_type":"article","og_title":"Complete code (shortcodes) for forms with Material Design for Contact Form 7 &#8226; Marabelia | Agencia Digital en Valencia","og_description":"[vc_row][vc_column][vc_column_text] Pros and Cons of Material Design for Contact Form 7 We want to start by saying that Material Design for Contact Form 7 is not a cure-all solution. It is an extension for Contact Form 7 that creates a friendlier design for forms and, in its paid version, offers interesting options such as a [...]","og_url":"https:\/\/marabelia.com\/en\/complete-code-shortcodes-for-forms-with-material-design-for-contact-form-7\/","og_site_name":"Marabelia | Agencia Digital en Valencia","article_published_time":"2020-08-20T18:25:02+00:00","article_modified_time":"2025-06-19T10:30:21+00:00","og_image":[{"width":800,"height":800,"url":"https:\/\/marabelia.com\/wp-content\/uploads\/2025\/09\/Portada-Marabelia-sitio-1.jpg","type":"image\/jpeg"}],"author":"admin-mbl","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin-mbl","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[]}},"_links":{"self":[{"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/posts\/14619","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/comments?post=14619"}],"version-history":[{"count":3,"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/posts\/14619\/revisions"}],"predecessor-version":[{"id":14622,"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/posts\/14619\/revisions\/14622"}],"wp:attachment":[{"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/media?parent=14619"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/categories?post=14619"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/tags?post=14619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}