{"id":51462,"date":"2015-08-10T01:25:38","date_gmt":"2015-08-10T05:25:38","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=51462"},"modified":"2017-09-06T05:38:58","modified_gmt":"2017-09-06T09:38:58","slug":"wordpress-how-to-add-additional-fields-to-contact-form","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/wordpress-how-to-add-additional-fields-to-contact-form.html","title":{"rendered":"WordPress. How to add additional fields to contact form"},"content":{"rendered":"

\r\n

This tutorial shows how to add additional fields to Contact Form<\/strong> in WordPress<\/strong>.<\/p>\r\n

Joomla 3.x. How to install engine and template on localhost<\/a><\/p>\r\n

In WordPress<\/strong> templates, we always have a sample of contact form added with Contact Form 4 plugin. You can edit this form or create a new one: <\/p>\r\n

\"Wordpress-how_to_add_additional_fields_contact_form-1\"<\/a><\/p>\r\n

    \r\n
  1. \r\n

    Log into WordPress Admin Panel, <\/strong>go to Contact<\/strong>, you will see the current contact form of the template. You can edit this form or click Add New<\/strong> to create a new form: <\/p>\r\n

    \"Wordpress-how_to_add_additional_fields_contact_form-2\"<\/a>\r\n\t<\/li>\r\n

  2. \r\n

    We will try to create a new Contact form<\/strong> now. Click Add New<\/strong>, then a sample form will show up, this form includes some basic fields such as Name<\/strong>, email<\/strong>, etc. So we will create some additional field, for example Cell phone<\/strong> and File Upload<\/strong>:<\/p>\r\n

    \"Wordpress-how_to_add_additional_fields_contact_form-3\"<\/a>\r\n<\/li>\r\n

  3. \r\n

    For Cell phone<\/strong> field: <\/p>\r\n

    Copy the code from one of the other fields to get the same layout with the new name of the field:<\/p>\r\n

    \"Wordpress-how_to_add_additional_fields_contact_form-4\"<\/a><\/p>\r\n

    We can select Text field<\/strong> from Generate Tag<\/strong> button, fill in the name, choose some option provided. After this, you will see the code generated. Just copy it to the left side: <\/p>\r\n

    \"Wordpress-how_to_add_additional_fields_contact_form-5\"<\/a><\/p>\r\n

    \"Wordpress-how_to_add_additional_fields_contact_form-6\"<\/a><\/p>\r\n

    \"Wordpress-how_to_add_additional_fields_contact_form-7\"<\/a>\r\n\t<\/li>\r\n

  4. \r\n

    \r\n\tCopy the other code to the Message Body<\/strong> so that you will get this field to your email:<\/p>\r\n

    \"Wordpress-how_to_add_additional_fields_contact_form-8\"<\/a>\r\n\t<\/li>\r\n

  5. \r\n

    For File Upload<\/strong> field, we will do the same steps, copy the layout with the name of the field:<\/p>\r\n

    \"Wordpress-how_to_add_additional_fields_contact_form-9\"<\/a><\/p>\r\n

    From Generate Tag button, we will choose File upload<\/strong>. Fill in the name and other options:<\/p>\r\n

    \"Wordpress-how_to_add_additional_fields_contact_form-10\"<\/a><\/p>\r\n

    \"Wordpress-how_to_add_additional_fields_contact_form-11\"<\/a><\/p>\r\n

    You will see the code generated after this. Just copy it to the left side:<\/p>\r\n

    \"Wordpress-how_to_add_additional_fields_contact_form-12\"<\/a><\/p>\r\n

    To get this file to your email, you need to copy this code to the File attachments<\/strong>:<\/p>\r\n

    \"Wordpress-how_to_add_additional_fields_contact_form-13\"<\/a>\r\n\t<\/li>\r\n

  6. \r\n

    Put a title for this form, and click Save<\/strong>:<\/p>\r\n

    \"Wordpress-how_to_add_additional_fields_contact_form-14\"<\/a><\/p>\r\n

    You will see the code for this form on the top:<\/p>\r\n

    \"Wordpress-how_to_add_additional_fields_contact_form-15\"<\/a><\/p>\r\n

    Copy this code to a page, a post or a text widget. Then you can test the form. After getting the confirmation that the message is successfully sent, you can open your email to check:<\/p>\r\n

    \"Wordpress-how_to_add_additional_fields_contact_form-16\"<\/a>\r\n\t<\/li>\r\n<\/ol>\r\n

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

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

    Joomla 3.x. How to install engine and template on localhost<\/a>
    \r\n<\/p>","protected":false},"excerpt":{"rendered":"

    This tutorial shows how to add additional fields to Contact Form<\/strong> in Wordpress<\/strong>.<\/p>\n","protected":false},"author":69,"featured_media":51790,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[728],"tags":[639,640,2405],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/51462"}],"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=51462"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/51462\/revisions"}],"predecessor-version":[{"id":83083,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/51462\/revisions\/83083"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/51790"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=51462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=51462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=51462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}