{"id":5536,"date":"2023-11-30T13:48:07","date_gmt":"2023-11-30T06:48:07","guid":{"rendered":"https:\/\/danielepais.com\/journal\/?p=5536"},"modified":"2023-11-30T13:48:07","modified_gmt":"2023-11-30T06:48:07","slug":"tutorial-creating-a-custom-search-form","status":"publish","type":"post","link":"https:\/\/danielepais.com\/journal\/tutorial-creating-a-custom-search-form\/","title":{"rendered":"Tutorial: Creating a Custom Search Form"},"content":{"rendered":"<p>Tutorial: Creating a <a href=\"https:\/\/danielepais.com\/journal\/building-custom-themes-for-wordpress\/\">Custom<\/a> Search Form with Google Site Search<\/p>\n<p><a href=\"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2023\/11\/Creating-a-Custom-Search-Form.jpg\" data-rel=\"lightbox-image-0\" data-rl_title=\"\" data-rl_caption=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/ywAAAAAAQABAAACAUwAOw==\" fifu-lazy=\"1\" fifu-data-sizes=\"auto\" fifu-data-srcset=\"https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyMy8xMS9DcmVhdGluZy1hLUN1c3RvbS1TZWFyY2gtRm9ybS5qcGc\/b4cf937f6a20\/creating-a-custom-search-form.webp?p=5536&w=75&h=0&c=0 75w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyMy8xMS9DcmVhdGluZy1hLUN1c3RvbS1TZWFyY2gtRm9ybS5qcGc\/ac0130c9fe18\/creating-a-custom-search-form.webp?p=5536&w=100&h=0&c=0 100w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyMy8xMS9DcmVhdGluZy1hLUN1c3RvbS1TZWFyY2gtRm9ybS5qcGc\/640c86862422\/creating-a-custom-search-form.webp?p=5536&w=150&h=0&c=0 150w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyMy8xMS9DcmVhdGluZy1hLUN1c3RvbS1TZWFyY2gtRm9ybS5qcGc\/04270c99efb2\/creating-a-custom-search-form.webp?p=5536&w=240&h=0&c=0 240w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyMy8xMS9DcmVhdGluZy1hLUN1c3RvbS1TZWFyY2gtRm9ybS5qcGc\/5da122be2dc2\/creating-a-custom-search-form.webp?p=5536&w=320&h=0&c=0 320w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyMy8xMS9DcmVhdGluZy1hLUN1c3RvbS1TZWFyY2gtRm9ybS5qcGc\/0994561c3244\/creating-a-custom-search-form.webp?p=5536&w=500&h=0&c=0 500w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyMy8xMS9DcmVhdGluZy1hLUN1c3RvbS1TZWFyY2gtRm9ybS5qcGc\/2e0765b8497c\/creating-a-custom-search-form.webp?p=5536&w=640&h=0&c=0 640w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyMy8xMS9DcmVhdGluZy1hLUN1c3RvbS1TZWFyY2gtRm9ybS5qcGc\/2eb5bd4727fc\/creating-a-custom-search-form.webp?p=5536&w=800&h=0&c=0 800w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyMy8xMS9DcmVhdGluZy1hLUN1c3RvbS1TZWFyY2gtRm9ybS5qcGc\/c1cf3596fadb\/creating-a-custom-search-form.webp?p=5536&w=1024&h=0&c=0 1024w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyMy8xMS9DcmVhdGluZy1hLUN1c3RvbS1TZWFyY2gtRm9ybS5qcGc\/cd4b6cb987f5\/creating-a-custom-search-form.webp?p=5536&w=1280&h=0&c=0 1280w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyMy8xMS9DcmVhdGluZy1hLUN1c3RvbS1TZWFyY2gtRm9ybS5qcGc\/d859da3af544\/creating-a-custom-search-form.webp?p=5536&w=1600&h=0&c=0 1600w\" class=\"aligncenter size-full wp-image-5538\" title=\"\" fifu-data-src=\"https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyMy8xMS9DcmVhdGluZy1hLUN1c3RvbS1TZWFyY2gtRm9ybS5qcGc\/92d2230c2720\/creating-a-custom-search-form.webp?p=5536\" alt=\"Creating a Custom Search Form\" width=\"850\" height=\"400\" \/><\/a><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6acd1214c46f1\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #18bc9c;color:#18bc9c\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #18bc9c;color:#18bc9c\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6acd1214c46f1\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/danielepais.com\/journal\/tutorial-creating-a-custom-search-form\/#Introduction\" >Introduction<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/danielepais.com\/journal\/tutorial-creating-a-custom-search-form\/#Prerequisites\" >Prerequisites<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/danielepais.com\/journal\/tutorial-creating-a-custom-search-form\/#Step_1_Setting_Up_the_HTML_Structure\" >Step 1: Setting Up the HTML Structure<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/danielepais.com\/journal\/tutorial-creating-a-custom-search-form\/#Step_2_Adding_JavaScript_Functionality\" >Step 2: Adding JavaScript Functionality<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/danielepais.com\/journal\/tutorial-creating-a-custom-search-form\/#Step_3_Styling_the_Form\" >Step 3: Styling the Form<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/danielepais.com\/journal\/tutorial-creating-a-custom-search-form\/#Step_4_Testing_the_Form\" >Step 4: Testing the Form<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/danielepais.com\/journal\/tutorial-creating-a-custom-search-form\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Introduction\"><\/span>Introduction<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In this tutorial, we&#8217;ll learn how to create a custom <a href=\"https:\/\/danielepais.com\/journal\/a-custom-html-css-link-box\/\">HTML<\/a> search form that uses Google to search within a specific site. This form will include input fields for a search term, a dropdown to select a predefined website, and an option to manually enter a website URL. We&#8217;ll also add some <a href=\"https:\/\/www.w3schools.com\/html\/html_styles.asp\" target=\"_blank\" rel=\"noopener\">basic styling<\/a> to make the form visually appealing.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Prerequisites\"><\/span>Prerequisites<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>Basic knowledge of HTML and CSS.<\/li>\n<li>Familiarity with JavaScript.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Step_1_Setting_Up_the_HTML_Structure\"><\/span>Step 1: Setting Up the HTML Structure<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ol>\n<li>\n<p><strong>Create the Basic Form<\/strong>: Start with a basic HTML5 structure. Place a\u00a0<code>&lt;form&gt;<\/code>\u00a0tag within the\u00a0<code>&lt;body&gt;<\/code>.<\/p>\n<\/li>\n<\/ol>\n<p><code>&lt;form onsubmit=\"performGoogleSiteSearch(event)\"&gt;<br \/>\n\u00a0 \u00a0 &lt;!-- Form elements will go here --&gt;<br \/>\n&lt;\/form&gt;<\/code><\/p>\n<ol start=\"2\">\n<li><strong>Add Input Fields<\/strong>:<\/li>\n<\/ol>\n<ul>\n<li>Add an input field for the search keyword.<\/li>\n<li>Include a dropdown (<code>&lt;select&gt;<\/code>) for predefined websites.<\/li>\n<li>Add another input field for entering a custom website URL.<\/li>\n<\/ul>\n<p><code>&lt;!-- Keyword Input --&gt;<br \/>\n&lt;label for=\"keyword\"&gt;Search for:&lt;\/label&gt;<br \/>\n&lt;input type=\"text\" id=\"keyword\" name=\"keyword\" placeholder=\"Enter keyword\"&gt;<\/code><\/p>\n<p><code>&lt;!-- Dropdown for Predefined Websites --&gt;<br \/>\n&lt;label for=\"websiteSelect\"&gt;Choose a website:&lt;\/label&gt;<br \/>\n&lt;select id=\"websiteSelect\" name=\"website\"&gt;<br \/>\n\u00a0 \u00a0 &lt;!-- Options go here --&gt;<br \/>\n&lt;\/select&gt;<\/code><\/p>\n<p><code>&lt;!-- Custom Website URL Input --&gt;<br \/>\n&lt;label for=\"customWebsite\"&gt;Or enter a website URL:&lt;\/label&gt;<br \/>\n&lt;input type=\"text\" id=\"customWebsite\" name=\"customWebsite\" placeholder=\"Enter URL\"&gt;<\/code><\/p>\n<ol start=\"3\">\n<li><strong>Add Search Button<\/strong>:<\/li>\n<\/ol>\n<ul>\n<li>Include a button to submit the form.<\/li>\n<\/ul>\n<p><code>&lt;button type=\"submit\"&gt;Search&lt;\/button&gt;<\/code><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Step_2_Adding_JavaScript_Functionality\"><\/span>Step 2: Adding JavaScript Functionality<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ol>\n<li>\n<p><strong>Write the JavaScript Function<\/strong>: This function will construct the Google search query and open it in a new tab.<\/p>\n<\/li>\n<\/ol>\n<p><code>function performGoogleSiteSearch(event) {<br \/>\n\u00a0 \u00a0 event.preventDefault();<br \/>\n\u00a0 \u00a0 \/\/ Retrieve values from the form<br \/>\n\u00a0 \u00a0 \/\/ Construct the search query<br \/>\n\u00a0 \u00a0 \/\/ Open in new tab<br \/>\n}<\/code><\/p>\n<ol start=\"2\">\n<li><strong>Handle Form Submission<\/strong>: Ensure the function is called when the form is submitted.<\/li>\n<\/ol>\n<p><code>&lt;form onsubmit=\"performGoogleSiteSearch(event)\"&gt;<br \/>\n\u00a0 \u00a0 &lt;!-- Form elements --&gt;<br \/>\n&lt;\/form&gt;<\/code><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Step_3_Styling_the_Form\"><\/span>Step 3: Styling the Form<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ol start=\"1\">\n<li>\n<p><strong>Add CSS for Styling<\/strong>: Use CSS to style the form elements for a consistent and modern look.<\/p>\n<\/li>\n<\/ol>\n<p><code>\/* Add styles for the body, form, labels, inputs, select, and button *\/<\/code><\/p>\n<ol start=\"2\">\n<li><strong>Responsive <a href=\"https:\/\/danielepais.com\/journal\/design-of-the-day-30-04-2020\/\">Design<\/a> Considerations<\/strong>: Mention any additional styling for different screen sizes, if applicable.<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"Step_4_Testing_the_Form\"><\/span>Step 4: Testing the Form<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ol>\n<li>\n<p><strong>Testing Functionality<\/strong>: Describe how to test each part of the form, including entering keywords, selecting websites from the dropdown, and entering a custom URL.<\/p>\n<\/li>\n<li>\n<p><strong>Cross-Browser Testing<\/strong>: Encourage testing the form across different <a href=\"https:\/\/danielepais.com\/journal\/web-scraping-increase-sales\/\">web<\/a> browsers for compatibility.<\/p>\n<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Wrap up the tutorial by summarizing what the readers have learned. Encourage them to experiment with further customizations and to use the form in their own projects.<\/p>\n<p>You can see and test the form here: <a href=\"https:\/\/danielepais.com\/ref08\/search.html\" target=\"_blank\" rel=\"noopener\">Site Specific Search Form with Google Results<\/a><\/p>\n<div class=\"su-button-center\"><a href=\"https:\/\/danielepais.com\/ref08\/search.html\" class=\"su-button su-button-style-3d su-button-wide\" style=\"color:#FFFFFF;background-color:#17BBA0;border-color:#139680;border-radius:10px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#FFFFFF;padding:8px 26px;font-size:20px;line-height:30px;border-color:#5dd0bd;border-radius:10px;text-shadow:none\"><i class=\"sui sui-crosshairs\" style=\"font-size:20px;color:#FFFFFF\"><\/i> TRY IT NOW LIVE<small style=\"padding-bottom:8px;color:#FFFFFF\">Tutorial: Creating a Custom Search Form<\/small><\/span><\/a><\/div>\n<div class=\"su-button-center\"><a href=\"https:\/\/danielepais.com\/journal\/free-downloads\/\" class=\"su-button su-button-style-3d su-button-wide\" style=\"color:#FFFFFF;background-color:#2c3e50;border-color:#243240;border-radius:10px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#FFFFFF;padding:8px 26px;font-size:20px;line-height:30px;border-color:#6c7885;border-radius:10px;text-shadow:none\"><i class=\"sui sui-crosshairs\" style=\"font-size:20px;color:#FFFFFF\"><\/i> DOWNLOAD<small style=\"padding-bottom:8px;color:#FFFFFF\">Tutorial: Creating a Custom Search Form<\/small><\/span><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Creating a Custom Search Form with Google Site Search. In this tutorial, we&#8217;ll learn how to create a custom HTML search form that uses Google to search..<\/p>\n","protected":false},"author":1,"featured_media":5538,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[1128,562,561],"tags":[1231],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.8 - aioseo.com -->\n\t<meta name=\"description\" content=\"Creating a Custom Search Form with Google Site Search. In this tutorial, we&#039;ll learn how to create a custom HTML search form that uses Google to search..\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Daniele Pais\"\/>\n\t<meta name=\"google-site-verification\" content=\"googleb91c9505ed997b99\" \/>\n\t<meta name=\"msvalidate.01\" content=\"AD1C96C338E051848BE08C67378B20CA\" \/>\n\t<meta name=\"keywords\" content=\"custom search form,content creation,web design,web development\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/danielepais.com\/journal\/tutorial-creating-a-custom-search-form\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.8\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Daniele Pais Blog\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Tutorial: Creating a Custom Search Form | Phuket Web Design\" \/>\n\t\t<meta property=\"og:description\" content=\"Creating a Custom Search Form with Google Site Search. In this tutorial, we&#039;ll learn how to create a custom HTML search form that uses Google to search..\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/danielepais.com\/journal\/tutorial-creating-a-custom-search-form\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2023\/11\/Creating-a-Custom-Search-Form.jpg\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2023\/11\/Creating-a-Custom-Search-Form.jpg\" \/>\n\t\t<meta property=\"og:image:width\" content=\"850\" \/>\n\t\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2023-11-30T06:48:07+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2023-11-30T06:48:07+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:site\" content=\"@daniele_pais\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Tutorial: Creating a Custom Search Form | Phuket Web Design\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Creating a Custom Search Form with Google Site Search. In this tutorial, we&#039;ll learn how to create a custom HTML search form that uses Google to search..\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2023\/11\/Creating-a-Custom-Search-Form.jpg\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/tutorial-creating-a-custom-search-form\\\/#article\",\"name\":\"Tutorial: Creating a Custom Search Form | Phuket Web Design\",\"headline\":\"Tutorial: Creating a Custom Search Form\",\"author\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/author\\\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/#person\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/Creating-a-Custom-Search-Form.jpg\",\"width\":850,\"height\":400,\"caption\":\"Creating a Custom Search Form\"},\"datePublished\":\"2023-11-30T13:48:07+07:00\",\"dateModified\":\"2023-11-30T13:48:07+07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/tutorial-creating-a-custom-search-form\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/tutorial-creating-a-custom-search-form\\\/#webpage\"},\"articleSection\":\"Content Creation, Web Design, Web Development, Custom Search Form\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/tutorial-creating-a-custom-search-form\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/danielepais.com\\\/journal\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/category\\\/web\\\/#listItem\",\"name\":\"Web\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/category\\\/web\\\/#listItem\",\"position\":2,\"name\":\"Web\",\"item\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/category\\\/web\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/category\\\/web\\\/web-development\\\/#listItem\",\"name\":\"Web Development\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/category\\\/web\\\/web-development\\\/#listItem\",\"position\":3,\"name\":\"Web Development\",\"item\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/category\\\/web\\\/web-development\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/tutorial-creating-a-custom-search-form\\\/#listItem\",\"name\":\"Tutorial: Creating a Custom Search Form\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/category\\\/web\\\/#listItem\",\"name\":\"Web\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/tutorial-creating-a-custom-search-form\\\/#listItem\",\"position\":4,\"name\":\"Tutorial: Creating a Custom Search Form\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/category\\\/web\\\/web-development\\\/#listItem\",\"name\":\"Web Development\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/#person\",\"name\":\"Daniele Pais\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/tutorial-creating-a-custom-search-form\\\/#personImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/86bedf0ab24a6d4a4f32de230cc797ef?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Daniele Pais\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/author\\\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\\\/#author\",\"url\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/author\\\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\\\/\",\"name\":\"Daniele Pais\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/tutorial-creating-a-custom-search-form\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/86bedf0ab24a6d4a4f32de230cc797ef?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Daniele Pais\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/tutorial-creating-a-custom-search-form\\\/#webpage\",\"url\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/tutorial-creating-a-custom-search-form\\\/\",\"name\":\"Tutorial: Creating a Custom Search Form | Phuket Web Design\",\"description\":\"Creating a Custom Search Form with Google Site Search. In this tutorial, we'll learn how to create a custom HTML search form that uses Google to search..\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/tutorial-creating-a-custom-search-form\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/author\\\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/author\\\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/Creating-a-Custom-Search-Form.jpg\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/tutorial-creating-a-custom-search-form\\\/#mainImage\",\"width\":850,\"height\":400,\"caption\":\"Creating a Custom Search Form\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/tutorial-creating-a-custom-search-form\\\/#mainImage\"},\"datePublished\":\"2023-11-30T13:48:07+07:00\",\"dateModified\":\"2023-11-30T13:48:07+07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/#website\",\"url\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/\",\"name\":\"Phuket Web Design\",\"description\":\"Digital Print\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/#person\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Tutorial: Creating a Custom Search Form | Phuket Web Design","description":"Creating a Custom Search Form with Google Site Search. In this tutorial, we'll learn how to create a custom HTML search form that uses Google to search..","canonical_url":"https:\/\/danielepais.com\/journal\/tutorial-creating-a-custom-search-form\/","robots":"max-image-preview:large","keywords":"custom search form,content creation,web design,web development","webmasterTools":{"google-site-verification":"googleb91c9505ed997b99","msvalidate.01":"AD1C96C338E051848BE08C67378B20CA","miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/danielepais.com\/journal\/tutorial-creating-a-custom-search-form\/#article","name":"Tutorial: Creating a Custom Search Form | Phuket Web Design","headline":"Tutorial: Creating a Custom Search Form","author":{"@id":"https:\/\/danielepais.com\/journal\/author\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\/#author"},"publisher":{"@id":"https:\/\/danielepais.com\/journal\/#person"},"image":{"@type":"ImageObject","url":"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2023\/11\/Creating-a-Custom-Search-Form.jpg","width":850,"height":400,"caption":"Creating a Custom Search Form"},"datePublished":"2023-11-30T13:48:07+07:00","dateModified":"2023-11-30T13:48:07+07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/danielepais.com\/journal\/tutorial-creating-a-custom-search-form\/#webpage"},"isPartOf":{"@id":"https:\/\/danielepais.com\/journal\/tutorial-creating-a-custom-search-form\/#webpage"},"articleSection":"Content Creation, Web Design, Web Development, Custom Search Form"},{"@type":"BreadcrumbList","@id":"https:\/\/danielepais.com\/journal\/tutorial-creating-a-custom-search-form\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal#listItem","position":1,"name":"Home","item":"https:\/\/danielepais.com\/journal","nextItem":{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal\/category\/web\/#listItem","name":"Web"}},{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal\/category\/web\/#listItem","position":2,"name":"Web","item":"https:\/\/danielepais.com\/journal\/category\/web\/","nextItem":{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal\/category\/web\/web-development\/#listItem","name":"Web Development"},"previousItem":{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal\/category\/web\/web-development\/#listItem","position":3,"name":"Web Development","item":"https:\/\/danielepais.com\/journal\/category\/web\/web-development\/","nextItem":{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal\/tutorial-creating-a-custom-search-form\/#listItem","name":"Tutorial: Creating a Custom Search Form"},"previousItem":{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal\/category\/web\/#listItem","name":"Web"}},{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal\/tutorial-creating-a-custom-search-form\/#listItem","position":4,"name":"Tutorial: Creating a Custom Search Form","previousItem":{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal\/category\/web\/web-development\/#listItem","name":"Web Development"}}]},{"@type":"Person","@id":"https:\/\/danielepais.com\/journal\/#person","name":"Daniele Pais","image":{"@type":"ImageObject","@id":"https:\/\/danielepais.com\/journal\/tutorial-creating-a-custom-search-form\/#personImage","url":"https:\/\/secure.gravatar.com\/avatar\/86bedf0ab24a6d4a4f32de230cc797ef?s=96&d=mm&r=g","width":96,"height":96,"caption":"Daniele Pais"}},{"@type":"Person","@id":"https:\/\/danielepais.com\/journal\/author\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\/#author","url":"https:\/\/danielepais.com\/journal\/author\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\/","name":"Daniele Pais","image":{"@type":"ImageObject","@id":"https:\/\/danielepais.com\/journal\/tutorial-creating-a-custom-search-form\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/86bedf0ab24a6d4a4f32de230cc797ef?s=96&d=mm&r=g","width":96,"height":96,"caption":"Daniele Pais"}},{"@type":"WebPage","@id":"https:\/\/danielepais.com\/journal\/tutorial-creating-a-custom-search-form\/#webpage","url":"https:\/\/danielepais.com\/journal\/tutorial-creating-a-custom-search-form\/","name":"Tutorial: Creating a Custom Search Form | Phuket Web Design","description":"Creating a Custom Search Form with Google Site Search. In this tutorial, we'll learn how to create a custom HTML search form that uses Google to search..","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/danielepais.com\/journal\/#website"},"breadcrumb":{"@id":"https:\/\/danielepais.com\/journal\/tutorial-creating-a-custom-search-form\/#breadcrumblist"},"author":{"@id":"https:\/\/danielepais.com\/journal\/author\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\/#author"},"creator":{"@id":"https:\/\/danielepais.com\/journal\/author\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2023\/11\/Creating-a-Custom-Search-Form.jpg","@id":"https:\/\/danielepais.com\/journal\/tutorial-creating-a-custom-search-form\/#mainImage","width":850,"height":400,"caption":"Creating a Custom Search Form"},"primaryImageOfPage":{"@id":"https:\/\/danielepais.com\/journal\/tutorial-creating-a-custom-search-form\/#mainImage"},"datePublished":"2023-11-30T13:48:07+07:00","dateModified":"2023-11-30T13:48:07+07:00"},{"@type":"WebSite","@id":"https:\/\/danielepais.com\/journal\/#website","url":"https:\/\/danielepais.com\/journal\/","name":"Phuket Web Design","description":"Digital Print","inLanguage":"en-US","publisher":{"@id":"https:\/\/danielepais.com\/journal\/#person"}}]},"og:locale":"en_US","og:site_name":"Daniele Pais Blog","og:type":"article","og:title":"Tutorial: Creating a Custom Search Form | Phuket Web Design","og:description":"Creating a Custom Search Form with Google Site Search. In this tutorial, we'll learn how to create a custom HTML search form that uses Google to search..","og:url":"https:\/\/danielepais.com\/journal\/tutorial-creating-a-custom-search-form\/","og:image":"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2023\/11\/Creating-a-Custom-Search-Form.jpg","og:image:secure_url":"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2023\/11\/Creating-a-Custom-Search-Form.jpg","og:image:width":"850","og:image:height":"400","article:published_time":"2023-11-30T06:48:07+00:00","article:modified_time":"2023-11-30T06:48:07+00:00","twitter:card":"summary","twitter:site":"@daniele_pais","twitter:title":"Tutorial: Creating a Custom Search Form | Phuket Web Design","twitter:description":"Creating a Custom Search Form with Google Site Search. In this tutorial, we'll learn how to create a custom HTML search form that uses Google to search..","twitter:image":"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2023\/11\/Creating-a-Custom-Search-Form.jpg"},"aioseo_meta_data":{"post_id":"5536","title":null,"description":null,"keywords":[],"keyphrases":{"focus":{"keyphrase":"Custom Search Form","score":85,"analysis":{"keyphraseInTitle":{"score":9,"maxScore":9,"error":0},"keyphraseInDescription":{"score":9,"maxScore":9,"error":0},"keyphraseLength":{"score":9,"maxScore":9,"error":0,"length":3},"keyphraseInURL":{"score":1,"maxScore":5,"error":1},"keyphraseInIntroduction":{"score":9,"maxScore":9,"error":0},"keyphraseInSubHeadings":{"score":3,"maxScore":9,"error":1},"keyphraseInImageAlt":{"score":9,"maxScore":9,"error":0},"keywordDensity":{"type":"best","score":9,"maxScore":9,"error":0}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":"#post_title #separator_sa #site_title","og_description":"#post_excerpt","og_object_type":"default","og_image_type":"featured","og_image_url":"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2023\/11\/Creating-a-Custom-Search-Form.jpg","og_image_width":"850","og_image_height":"400","og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":[],"twitter_use_og":true,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","location":null,"local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"created":"2023-11-30 03:46:32","updated":"2025-06-11 19:10:10","ai":null,"seo_analyzer_scan_date":null},"_links":{"self":[{"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/posts\/5536"}],"collection":[{"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/comments?post=5536"}],"version-history":[{"count":0,"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/posts\/5536\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/media\/5538"}],"wp:attachment":[{"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/media?parent=5536"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/categories?post=5536"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/tags?post=5536"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}