{"id":11503,"date":"2011-10-25T05:40:00","date_gmt":"2011-10-25T09:40:00","guid":{"rendered":"http:\/\/info.template-help.com\/?p=11503"},"modified":"2017-09-06T05:44:19","modified_gmt":"2017-09-06T09:44:19","slug":"wordpress-contact-form-advanced-configuration","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/wordpress-contact-form-advanced-configuration.html","title":{"rendered":"WordPress. Contact form. Advanced Configuration"},"content":{"rendered":"<p>\r\n<p><strong>ContactForm 7 <\/strong>for WordPress allows you  to flexibly design the form and mail. This tutorial is going to show you its  structure and explain how it works.<!--more--> It assumes that you <strong>already have <\/strong>the  Contact Form 7 plugin installed your WordPress website. Otherwise, please check <a href=\"http:\/\/info.template-help.com\/how-to-create-contact-form-in-wordpress.html\">How to create Contact Form in WordPress<\/a>.<\/p>\r\n<div class=\"inline-banner\">\r\n<a href=\"https:\/\/www.templatemonster.com\/service-center\/\">\r\n<img src=\"\/help\/files\/banners\/inline\/Banner-3-(835-x100).jpg\" \/>\r\n<\/a>\r\n<\/div>\r\n<h3>structure<\/h3>\r\n<p>To work on  the forms, click the <strong>&ldquo;Contact&rdquo; <\/strong>button  in the left side menu:<\/p>\r\n<p> <a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/10\/contact_menu.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/10\/contact_menu-83x300.jpg\" alt=\"\" width=\"83\" height=\"300\" class=\"aligncenter size-medium wp-image-11504\" \/><\/a><\/p>\r\n<p>The next  page consists of the following parts:<\/p>\r\n<p> A <strong>list of existing forms<\/strong>+ an <strong>&ldquo;Add new&rdquo; <\/strong>option to add more forms to  pages, posts or text widgets.<\/p>\r\n<p><a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/10\/contact_form_1.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/10\/contact_form_1-300x22.jpg\" alt=\"\" width=\"300\" height=\"22\" class=\"aligncenter size-medium wp-image-11505\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/10\/contact_form_1-300x22.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/10\/contact_form_1-1024x75.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/10\/contact_form_1.jpg 1101w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>The current  form title with the shortcode that adds the form to your page + the options to  copy or delete the form. In brown it has the shortcode to copy and paste into  your pages, posts etc to make them show the form. <\/p>\r\n<p><a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/10\/contact_form_2.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/10\/contact_form_2-300x43.jpg\" alt=\"\" width=\"300\" height=\"43\" class=\"aligncenter size-medium wp-image-11506\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/10\/contact_form_2-300x43.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/10\/contact_form_2-1024x148.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/10\/contact_form_2.jpg 1094w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>The form itself + an option to generate and add tags to your form.<\/p>\r\n<p><a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/10\/contact_form_3.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/10\/contact_form_3-300x119.jpg\" alt=\"\" width=\"300\" height=\"119\" class=\"aligncenter size-medium wp-image-11507\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/10\/contact_form_3-300x119.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/10\/contact_form_3-1024x407.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/10\/contact_form_3.jpg 1103w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>You do not  need to worry about the rather complex syntax of the tags. You can use the <strong>&ldquo;GenerateTag&rdquo; <\/strong>tool to generate as many tags  as you want. You&rsquo;ll get a bunch of options to choose from regarding fields, like adding  a drop-down menu, radio buttons, checkboxes, CAPTCHA, file upload, etc.\u00a0 Just give your new field a name and fill in the  choices suggested. Once you have done this, the tag will be generated automatically  (in the box with the <strong>brown background<\/strong>).  All you have to do is to  copy the tag code to the form on the right.<\/p>\r\n<p>Let&rsquo;s take  a closer look at the first tag of the standard form as an example:<\/p>\r\n<pre>\r\n  &lt;p&gt;Your  Name (required)&lt;br \/&gt;\r\n  [text* your-name] &lt;\/p&gt;\r\n  <\/pre>\r\n<p>This is the field where your visitor fills in his\/her name. The -tags indicate that we have 1 paragraph, the -tag is a line break. This means that the input field itself will  be on the second line. Since the first line, we only have text: Your name  (required). You can easily change this text to something else like: Your Full Name  (required). It doesn&rsquo;t affect the field. <\/p>\r\n<p>The second word  in the tag is its name. The name of [text* your-name] is &lsquo;your-name. This name is important  as it is used later in your mail template. I.e.:<\/p>\r\n<ul class=\"post-list\">\r\n<li><strong>text<\/strong>: indicates that this is a text-field.\r\n    <\/li>\r\n<li><strong>*<\/strong>: indicates that this field is required.\r\n    <\/li>\r\n<li><strong>your-name<\/strong>: is the name of the field.\r\n<\/li>\r\n<li><strong>Mail settings<\/strong> (this is where you can  change the email to receive messages though the form) <\/li>\r\n<li><strong>Message body<\/strong> of the  mail that you will receive after your site visitors submit the form. <\/li>\r\n<\/ul>\r\n<p><a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/10\/contact_form_4.png\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/10\/contact_form_4-300x226.png\" alt=\"\" width=\"300\" height=\"226\" class=\"aligncenter size-medium wp-image-11508\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/10\/contact_form_4-300x226.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/10\/contact_form_4.png 558w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<h3>Settings<\/h3>\r\n<p>Here go the  settings for each field:<\/p>\r\n<dl>\r\n<dt><strong>[A] Basic header fields<\/strong> (<em>To<\/em>, <em>From <\/em>and <em>Subject<\/em>):<\/dt>\r\n<dd>These are basic  and necessary <a href=\"http:\/\/en.wikipedia.org\/wiki\/E-mail_header#Message_header\">message header<\/a> fields and you can embed <a href=\"http:\/\/contactform7.com\/2009\/11\/17\/tag-syntax\/#mail_tag\"><em>mail tags<\/em><\/a> anywhere in these fields.<\/dd>\r\n<dt><strong>[B] Message body:<\/strong><\/dt>\r\n<dd>This is the  message body, you can embed <em>mail tags <\/em>anywhere  in this field.<\/dd>\r\n<dt><strong>[C] Additional headers:<\/strong><\/dt>\r\n<dd>You can insert  additional message header fields here, <a href=\"http:\/\/contactform7.com\/2009\/11\/28\/adding-cc-bcc-and-other-mail-headers\/\">such as <em>Cc <\/em>and <em>Bcc<\/em><\/a>. There should be one field per line.  You can embed <em>mail tags <\/em>anywhere in these fields.<\/dd>\r\n<dt><strong>[D] File attachments:<\/strong><\/dt>\r\n<dd>If you attach <a href=\"http:\/\/contactform7.com\/2009\/11\/24\/file-uploading-and-attachment\/\">uploaded files<\/a> to this mail, put <em>mail tags <\/em>for the  uploaded files into this field.<\/dd>\r\n<dt><strong>[E] Use of HTML:<\/strong><\/dt>\r\n<dd>By default,  plain text is used for the message body. To <a href=\"http:\/\/en.wikipedia.org\/wiki\/E-mail_header#Plain_text_and_HTML\">use HTML<\/a>, check this box.<\/dd>\r\n<dt> <strong>[F] Mail (2):<\/strong><\/dt>\r\n<dd><em>Mail  (2) <\/em>is yet another  mail section, except that this is a non-optional section. <em>Mail (2) <\/em>works in completely the same  manner as <em>Mail<\/em>. To activate <em>Mail (2)<\/em>, check the <em>Use mail (2) <\/em><em>check<\/em>box. <\/dd>\r\n<\/dl>\r\n<p>You can edit  mail templates in the &lsquo;Mail&rsquo; field same as you did with the form template. You can  use tags there as well, but note that tags for mail are different from those tags  for forms.<\/p>\r\n<p>Tags you can use in a mail template contain only one word in brackets and looks  like [your-name]. <\/p>\r\n<h3>Example<\/h3>\r\n<p>The two tags correspond with the same name.  In mail, [your-name] will be replaced  by the user&rsquo;s input value, which is submitted through the corresponding form field,  which, in this case, is [text*  your-name].<\/p>\r\n<p>The <strong>Messages<\/strong> that your visitors  can see when they use the form (customizable, if you double click on them). <\/p>\r\n<p> <a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/10\/contact_form_6.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/10\/contact_form_6-300x184.jpg\" alt=\"\" width=\"300\" height=\"184\" class=\"aligncenter size-medium wp-image-11509\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/10\/contact_form_6-300x184.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/10\/contact_form_6-1024x631.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/10\/contact_form_6.jpg 1100w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p> A field for some additional settings (where you can add a code to override  some of the functions added above).<\/p>\r\n<p>  <a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/10\/contact_form_7.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/10\/contact_form_7-300x16.jpg\" alt=\"\" width=\"300\" height=\"16\" class=\"aligncenter size-medium wp-image-11510\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/10\/contact_form_7-300x16.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/10\/contact_form_7-1024x56.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/10\/contact_form_7.jpg 1101w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>The Save button to save all your changes.<\/p>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<p><a href=\"\/help\/files\/wordpress\/contact_form_wordpress.htm\" target=\"blank\">How to configure wordpress contact form<\/a><\/p>\r\n<p>You can find  more information about this plugin at:<\/p>\r\n<ul class=\"post-list\">\r\n<li><a href=\"http:\/\/wordpress.org\/extend\/plugins\/contact-form-7\/\" target=\"_blank\" title=\"Contact form 7\">The plugin&rsquo;s official page on WordPress.org<\/a> <\/li>\r\n<li><a href=\"http:\/\/contactform7.com\/\" target=\"_blank\" title=\"Contact Form 7 official website\">The plugin&rsquo;s  official website<\/a> <\/li>\r\n<\/ul>\r\n<p><!--more--><\/p>\r\n<\/p>\r\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>ContactForm 7 for WordPress allows you to flexibly design the form and mail. This tutorial is going to show you its structure and explain how it works.<\/p>\n","protected":false},"author":30,"featured_media":11515,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[728],"tags":[1090,639,640,2405],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/11503"}],"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\/30"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=11503"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/11503\/revisions"}],"predecessor-version":[{"id":83089,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/11503\/revisions\/83089"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/11515"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=11503"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=11503"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=11503"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}