{"id":77715,"date":"2016-12-16T09:59:00","date_gmt":"2016-12-16T14:59:00","guid":{"rendered":"https:\/\/www.templatemonster.com\/help\/?p=77715"},"modified":"2017-01-30T05:54:16","modified_gmt":"2017-01-30T10:54:16","slug":"js-animated-add-select-options-rd-contact-form","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/js-animated-add-select-options-rd-contact-form.html","title":{"rendered":"JS Animated. How to add select options into RD Contact Form"},"content":{"rendered":"<p>This video tutorial shows how to <strong> add select options into RD Contact Form<\/strong> in <a href=\"https:\/\/www.templatemonster.com\/website-templates.php\" target=\"_blank\">JS animated templates<\/a>. <\/p>\r\n\r\n <div class=\"video-container\">\r\n\t<iframe src=\"https:\/\/www.youtube.com\/embed\/POUd2edbEyg\"><\/iframe>\r\n<\/div>\r\n<ol>\r\n\t<li>\r\n\t\t<p>Use <strong>FTP<\/strong> or <strong>File Manager<\/strong> at your hosting cPanel, then open the appropriate *.html file for editing (in our case it is &#8216;contacts.html&#8217; file).<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/12\/How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-1.png\"><img loading=\"lazy\" decoding=\"async\" src=\"\/help\/wp-content\/uploads\/2016\/12\/How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-1.png\" alt=\"How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-1\" width=\"1102\" height=\"601\" class=\"alignnone size-full wp-image-77716\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-1.png 1102w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-1-150x82.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-1-300x164.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-1-768x419.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-1-1024x558.png 1024w\" sizes=\"auto, (max-width: 1102px) 100vw, 1102px\" \/><\/a>\t\t\r\n\t<\/li> \r\n\t\r\n\t\r\n\t<li>\r\n\t\t<p>In this example we are going to add <strong>simple selection menu.<\/strong><\/p>\r\n\t<\/li>\r\n\t\r\n\t\r\n\t<li>\r\n\t\t<p>Search for the <strong>Get In Touch<\/strong> comment within the <strong>contacts.html file<\/strong> content, and add following code below: <\/p>\r\n\t\t<pre class=\"brush:html\">&lt;div class=\"form-group\"&gt;\r\n\t&lt;label for=\"gender-select\" class=\"form-label form-label-outside\"&gt;Gender:&lt;\/label&gt;\r\n\t&lt;select id=\"gender-select\" data-placeholder=\"Select an option\" class=\"form-control\" name=\"gender\"&gt;\r\n\t\t&lt;option value=\"Male\"&gt;Male&lt;\/option&gt;\r\n\t\t&lt;option value=\"Female\"&gt;Female&lt;\/option&gt;\r\n\t&lt;\/select&gt;\r\n&lt;\/div&gt;<\/pre>\r\n\t\t\r\n\t\t\r\n\t\t<p>When you are done, press the <strong>Save changes<\/strong> button.<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/12\/How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-2.png\"><img loading=\"lazy\" decoding=\"async\" src=\"\/help\/wp-content\/uploads\/2016\/12\/How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-2.png\" alt=\"How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-2\" width=\"1271\" height=\"717\" class=\"alignnone size-full wp-image-77717\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-2.png 1271w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-2-150x85.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-2-300x169.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-2-768x433.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-2-1024x578.png 1024w\" sizes=\"auto, (max-width: 1271px) 100vw, 1271px\" \/><\/a>\t\t\r\n\t<\/li>\r\n\t\r\n\t<li>\r\n\t\t<p>Go back to your site and refresh the contacts page to see the changes.<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/12\/How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-3.png\"><img loading=\"lazy\" decoding=\"async\" src=\"\/help\/wp-content\/uploads\/2016\/12\/How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-3.png\" alt=\"How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-3\" width=\"1257\" height=\"688\" class=\"alignnone size-full wp-image-77718\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-3.png 1257w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-3-150x82.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-3-300x164.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-3-768x420.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-3-1024x560.png 1024w\" sizes=\"auto, (max-width: 1257px) 100vw, 1257px\" \/><\/a>\t<\/li>\r\n\t\r\n\t\r\n\t<li>\r\n\t\t<p>In this example we are going to add the <strong>selection menu with subcategories<\/strong>. <\/p>\r\n\t<\/li>\r\n\t\r\n\t\r\n\t<li>\r\n\t\t<p>Open the <strong>contact-us.html<\/strong> file, then add the following code below the simple selection menu.<\/p>\r\n\t\r\n\t<pre class=\"brush:html\">&lt;div class=&quot;form-group&quot;&gt;\r\n\t&lt;label for=&quot;country-select&quot; class=&quot;form-label form-label-outside&quot;&gt;Country:&lt;\/label&gt;\r\n\t&lt;select id=&quot;country-select&quot; data-placeholder=&quot;Select an option&quot; class=&quot;form-control select-filter&quot; name=&quot;country-select&quot;&gt;\r\n\t\t&lt;optgroup label=&quot;Europe&quot;&gt;\r\n\t\t\t&lt;option value=&quot;Poland&quot;&gt;Poland&lt;\/option&gt;\r\n\t\t\t&lt;option value=&quot;Germany&quot;&gt;Germany&lt;\/option&gt;\r\n\t\t\t&lt;option value=&quot;England&quot;&gt;England&lt;\/option&gt;\r\n\t\t&lt;\/optgroup&gt;\r\n\t\t&lt;optgroup label=&quot;Asia&quot;&gt;\r\n\t\t\t&lt;option value=&quot;China&quot;&gt;China&lt;\/option&gt;\r\n\t\t\t&lt;option value=&quot;Japan&quot;&gt;Japan&lt;\/option&gt;\r\n\t\t\t&lt;option value=&quot;Mongolia&quot;&gt;Mongolia&lt;\/option&gt;\r\n\t\t&lt;\/optgroup&gt;\r\n\t&lt;\/select&gt;\r\n&lt;\/div&gt;<\/pre>\r\n\t\r\n\r\n\r\n<p>When you are done, press the <strong>Save changes<\/strong> button.<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/12\/How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-4.png\"><img loading=\"lazy\" decoding=\"async\" src=\"\/help\/wp-content\/uploads\/2016\/12\/How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-4.png\" alt=\"How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-4\" width=\"1282\" height=\"460\" class=\"alignnone size-full wp-image-77719\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-4.png 1282w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-4-150x54.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-4-300x108.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-4-768x276.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-4-1024x367.png 1024w\" sizes=\"auto, (max-width: 1282px) 100vw, 1282px\" \/><\/a>\r\n<\/li>\r\n\r\n\r\n\r\n<li>\r\n\t<p>Go back to your site and refresh the contacts page to check a selection menu with subcategories.<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/12\/How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-5.png\"><img loading=\"lazy\" decoding=\"async\" src=\"\/help\/wp-content\/uploads\/2016\/12\/How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-5.png\" alt=\"How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-5\" width=\"1281\" height=\"669\" class=\"alignnone size-full wp-image-77720\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-5.png 1281w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-5-150x78.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-5-300x157.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-5-768x401.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/12\/How_to_add_select_options_in_RD_contact_form_in_JS_animated_templates-5-1024x535.png 1024w\" sizes=\"auto, (max-width: 1281px) 100vw, 1281px\" \/><\/a>\t\r\n<\/li>\r\n<\/ol>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=POUd2edbEyg?width=1280&amp;height=720\" rel=\"prettyPhoto\">JS Animated. How to add select options into RD Contact Form<\/a>","protected":false},"excerpt":{"rendered":"<p>This video tutorial shows how to <strong> add select options into RD Contact Form<\/strong> in JS animated templates. <\/p>\n","protected":false},"author":73,"featured_media":77721,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1016],"tags":[497,2415,571,2078,2073,908],"class_list":["post-77715","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-js-animated-tutorials","tag-contact-form","tag-js-animated","tag-menu-2","tag-rd","tag-rd-mailform","tag-select"],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/77715","targetHints":{"allow":["GET"]}}],"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\/73"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=77715"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/77715\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/77721"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=77715"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=77715"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=77715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}