---
title: FAQs with search box
category: Marketing
paid: false
isActive: true
ltr: {"html":{"htmlTail":[{"label":"index.html","code":"<div\n  x-data=\"{ faqsList: [\n  {\n      q: 'What are some random questions to ask?',\n      a: 'That\\'s exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you\\'re able to find the perfect random question.',\n      href: 'javascript:void(0)'\n  },\n  {\n      q: 'Do you include common questions?',\n      a: 'This generator doesn\\'t include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.',\n      href: 'javascript:void(0)'\n  },\n  {\n      q: 'Can I use this for 21 questions?',\n      a: 'Yes! there are two ways that you can use this question generator depending on what you\\'re after. You can indicate that you want 21 questions generated.',\n      href: 'javascript:void(0)'\n  },\n  {\n      q: 'Are these questions for girls or for boys?',\n      a: 'The questions in this generator are gender neutral and can be used to ask either male or females (or any other gender the person identifies with).',\n      href: 'javascript:void(0)'\n  },\n  {\n      q: 'What do you wish you had more talent doing?',\n      a: 'If you\\'ve been searching for a way to get random questions, you\\'ve landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.',\n      href: 'javascript:void(0)'\n  }\n] }\"\n>\n  <section class=\"py-14\">\n    <div class=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n      <div class=\"space-y-5 sm:text-center sm:max-w-md sm:mx-auto\">\n        <h3 class=\"text-gray-800 text-3xl font-extrabold sm:text-4xl\">\n          How can we help?\n        </h3>\n        <p class=\"text-gray-600\">\n          Everything you need to know about the product. Can’t find the\n          answer you’re looking for? feel free to\n          <a\n            class=\"text-indigo-600 font-semibold whitespace-nowrap\"\n            href=\"javascript:void(0)\"\n          >\n            contact us </a\n          >.\n        </p>\n        <form @submit.prevent=\"\" class=\"mx-auto sm:max-w-xs\">\n          <div class=\"relative\">\n            <svg\n              class=\"w-6 h-6 text-gray-400 absolute left-3 inset-y-0 my-auto\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\"\n            >\n              <path\n                fillRule=\"evenodd\"\n                d=\"M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n            <input\n              type=\"text\"\n              placeholder=\"Enter your email\"\n              class=\"w-full pl-12 pr-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg\"\n            />\n          </div>\n        </form>\n      </div>\n      <div class=\"mt-12\">\n        <ul\n          class=\"space-y-8 gap-12 grid-cols-2 sm:grid sm:space-y-0 lg:grid-cols-3\"\n        >\n          <template x-for=\"(item, index) in faqsList\" :key=\"index\">\n            <li class=\"space-y-3\">\n              <summary\n                class=\"flex items-center justify-between font-semibold text-gray-700\"\n                x-text=\"item.q\"\n              ></summary>\n              <p class=\"text-gray-600 leading-relaxed\" x-html=\"item.a\"></p>\n              <a\n                :href=\"item.href\"\n                class=\"flex items-center gap-x-1 text-sm text-indigo-600 hover:text-indigo-400 duration-150 font-medium\"\n              >\n                Read more\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  class=\"h-5 w-5\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke=\"currentColor\"\n                >\n                  <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M13 7l5 5m0 0l-5 5m5-5H6\"\n                  />\n                </svg>\n              </a>\n            </li>\n          </template>\n        </ul>\n      </div>\n    </div>\n  </section>\n</div>"}]},"react":{"jsxCss":[],"jsxTail":[{"code":"export default () => {\n\n    const faqsList = [\n        {\n            q: \"What are some random questions to ask?\",\n            a: \"That's exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you're able to find the perfect random question.\",\n            href: \"javascript:void(0)\",\n        },\n        {\n            q: \"Do you include common questions?\",\n            a: \"This generator doesn't include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.\",\n            href: \"javascript:void(0)\",\n        },\n        {\n            q: \"Can I use this for 21 questions?\",\n            a: \"Yes! there are two ways that you can use this question generator depending on what you're after. You can indicate that you want 21 questions generated.\",\n            href: \"javascript:void(0)\",\n        },\n        {\n            q: \"Are these questions for girls or for boys?\",\n            a: \"The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).\",\n            href: \"javascript:void(0)\",\n        },\n        {\n            q: \"What do you wish you had more talent doing?\",\n            a: \"If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.\",\n            href: \"javascript:void(0)\",\n        }\n    ]\n\n    return (\n        <section className='py-14'>\n            <div className=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n                <div className=\"space-y-5 sm:text-center sm:max-w-md sm:mx-auto\">\n                    <h3 className=\"text-gray-800 text-3xl font-extrabold sm:text-4xl\">\n                        How can we help?\n                    </h3>\n                    <p className=\"text-gray-600\">\n                        Everything you need to know about the product. Can’t find the answer you’re looking for? feel free to {\" \"}\n                        <a\n                            className='text-indigo-600 font-semibold whitespace-nowrap'\n                            href='javascript:void(0)'>\n                            contact us\n                        </a>.\n                    </p>\n                    <form onSubmit={(e) => e.preventDefault()} className=\"mx-auto sm:max-w-xs\">\n                        <div className=\"relative\">\n                            <svg className=\"w-6 h-6 text-gray-400 absolute left-3 inset-y-0 my-auto\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                                <path fillRule=\"evenodd\" d=\"M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z\" clipRule=\"evenodd\" />\n                            </svg>\n                            <input\n                                type=\"text\"\n                                placeholder=\"Enter your email\"\n                                className=\"w-full pl-12 pr-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg\"\n                            />\n                        </div>\n                    </form>\n                </div>\n                <div className='mt-12'>\n                    <ul className='space-y-8 gap-12 grid-cols-2 sm:grid sm:space-y-0 lg:grid-cols-3'>\n                        {faqsList.map((item, idx) => (\n                            <li\n                                key={idx}\n                                className=\"space-y-3\"\n                            >\n                                <summary\n                                    className=\"flex items-center justify-between font-semibold text-gray-700\">\n                                    {item.q}\n                                </summary>\n                                <p\n                                    dangerouslySetInnerHTML={{ __html: item.a }}\n                                    className='text-gray-600 leading-relaxed'>\n                                </p>\n                                <a href={item.href} className=\"flex items-center gap-x-1 text-sm text-indigo-600 hover:text-indigo-400 duration-150 font-medium\">\n                                    Read more\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" className=\"w-5 h-5\">\n                                        <path fillRule=\"evenodd\" d=\"M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-1.96H5.75A.75.75 0 015 10z\" clipRule=\"evenodd\" />\n                                    </svg>\n                                </a>\n                            </li>\n                        ))}\n                    </ul>\n                </div>\n            </div>\n        </section>\n    );\n};","label":"App.jsx"}]},"svelte":{"svelteTail":[{"label":"App.svelte","code":"<script>\n  let faqsList = [\n    {\n      q: \"What are some random questions to ask?\",\n      a: \"That's exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you're able to find the perfect random question.\",\n      href: \"javascript:void(0)\",\n    },\n    {\n      q: \"Do you include common questions?\",\n      a: \"This generator doesn't include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.\",\n      href: \"javascript:void(0)\",\n    },\n    {\n      q: \"Can I use this for 21 questions?\",\n      a: \"Yes! there are two ways that you can use this question generator depending on what you're after. You can indicate that you want 21 questions generated.\",\n      href: \"javascript:void(0)\",\n    },\n    {\n      q: \"Are these questions for girls or for boys?\",\n      a: \"The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).\",\n      href: \"javascript:void(0)\",\n    },\n    {\n      q: \"What do you wish you had more talent doing?\",\n      a: \"If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.\",\n      href: \"javascript:void(0)\",\n    }\n  ];\n</script>\n\n<section class='py-14'>\n  <div class=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n    <div class=\"space-y-5 sm:text-center sm:max-w-md sm:mx-auto\">\n      <h3 class=\"text-gray-800 text-3xl font-extrabold sm:text-4xl\">\n        How can we help?\n      </h3>\n      <p class=\"text-gray-600\">\n        Everything you need to know about the product. Can’t find the answer you’re looking for? feel free to\n        <a class='text-indigo-600 font-semibold whitespace-nowrap' href='javascript:void(0)'>\n          contact us\n        </a>.\n      </p>\n      <form on:submit|preventDefault class=\"mx-auto sm:max-w-xs\">\n        <div class=\"relative\">\n          <svg class=\"w-6 h-6 text-gray-400 absolute left-3 inset-y-0 my-auto\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n            <path fill-rule=\"evenodd\" d=\"M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z\" clip-rule=\"evenodd\" />\n          </svg>\n          <input\n            type=\"text\"\n            placeholder=\"Enter your email\"\n            class=\"w-full pl-12 pr-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg\"\n          />\n        </div>\n      </form>\n    </div>\n    <div class='mt-12'>\n      <ul class='space-y-8 gap-12 grid-cols-2 sm:grid sm:space-y-0 lg:grid-cols-3'>\n        {#each faqsList as item (item.q)}\n          <li class=\"space-y-3\">\n            <summary class=\"flex items-center justify-between font-semibold text-gray-700\">\n              {item.q}\n            </summary>\n            <p class='text-gray-600 leading-relaxed'>{@html item.a}</p>\n            <a href={item.href} class=\"flex items-center gap-x-1 text-sm text-indigo-600 hover:text-indigo-400 duration-150 font-medium\">\n              Read more\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"w-5 h-5\">\n                <path fill-rule=\"evenodd\" d=\"M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-2.01H5.75A.75.75 0 015 10z\" clip-rule=\"evenodd\" />\n              </svg>\n            </a>\n          </li>\n        {/each}\n      </ul>\n    </div>\n  </div>\n</section>"}]},"preview":"function App() {\n\n    const faqsList = [\n        {\n            q: \"What are some random questions to ask?\",\n            a: \"That's exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you're able to find the perfect random question.\",\n            href: \"javascript:void(0)\",\n        },\n        {\n            q: \"Do you include common questions?\",\n            a: \"This generator doesn't include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.\",\n            href: \"javascript:void(0)\",\n        },\n        {\n            q: \"Can I use this for 21 questions?\",\n            a: \"Yes! there are two ways that you can use this question generator depending on what you're after. You can indicate that you want 21 questions generated.\",\n            href: \"javascript:void(0)\",\n        },\n        {\n            q: \"Are these questions for girls or for boys?\",\n            a: \"The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).\",\n            href: \"javascript:void(0)\",\n        },\n        {\n            q: \"What do you wish you had more talent doing?\",\n            a: \"If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.\",\n            href: \"javascript:void(0)\",\n        }\n    ]\n\n    return (\n        <section className='py-14'>\n            <div className=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n                <div className=\"space-y-5 sm:text-center sm:max-w-md sm:mx-auto\">\n                    <h3 className=\"text-gray-800 text-3xl font-extrabold sm:text-4xl\">\n                        How can we help?\n                    </h3>\n                    <p className=\"text-gray-600\">\n                        Everything you need to know about the product. Can’t find the answer you’re looking for? feel free to {\" \"}\n                        <a\n                            className='text-indigo-600 font-semibold whitespace-nowrap'\n                            href='javascript:void(0)'>\n                            contact us\n                        </a>.\n                    </p>\n                    <form onSubmit={(e) => e.preventDefault()} className=\"mx-auto sm:max-w-xs\">\n                        <div className=\"relative\">\n                            <svg className=\"w-6 h-6 text-gray-400 absolute left-3 inset-y-0 my-auto\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                                <path fillRule=\"evenodd\" d=\"M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z\" clipRule=\"evenodd\" />\n                            </svg>\n                            <input\n                                type=\"text\"\n                                placeholder=\"Enter your email\"\n                                className=\"w-full pl-12 pr-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg\"\n                            />\n                        </div>\n                    </form>\n                </div>\n                <div className='mt-12'>\n                    <ul className='space-y-8 gap-12 grid-cols-2 sm:grid sm:space-y-0 lg:grid-cols-3'>\n                        {faqsList.map((item, idx) => (\n                            <li\n                                key={idx}\n                                className=\"space-y-3\"\n                            >\n                                <summary\n                                    className=\"flex items-center justify-between font-semibold text-gray-700\">\n                                    {item.q}\n                                </summary>\n                                <p\n                                    dangerouslySetInnerHTML={{ __html: item.a }}\n                                    className='text-gray-600 leading-relaxed'>\n                                </p>\n                                <a href={item.href} className=\"flex items-center gap-x-1 text-sm text-indigo-600 hover:text-indigo-400 duration-150 font-medium\">\n                                    Read more\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" className=\"w-5 h-5\">\n                                        <path fillRule=\"evenodd\" d=\"M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-1.96H5.75A.75.75 0 015 10z\" clipRule=\"evenodd\" />\n                                    </svg>\n                                </a>\n                            </li>\n                        ))}\n                    </ul>\n                </div>\n            </div>\n        </section>\n    );\n};","vue":{"vueCss":[],"vueTail":[{"code":"<template>\n  <section class='py-14'>\n    <div class=\"max-w-screen-xl mx-auto px-4 md:px-8\">\n      <div class=\"space-y-5 sm:text-center sm:max-w-md sm:mx-auto\">\n        <h3 class=\"text-gray-800 text-3xl font-extrabold sm:text-4xl\">\n          How can we help?\n        </h3>\n        <p class=\"text-gray-600\">\n          Everything you need to know about the product. Can’t find the answer you’re looking for? feel free to\n          <a class='text-indigo-600 font-semibold whitespace-nowrap' href='javascript:void(0)'>\n            contact us\n          </a>.\n        </p>\n        <form @submit.prevent=\"\" class=\"mx-auto sm:max-w-xs\">\n          <div class=\"relative\">\n            <svg\n              class=\"w-6 h-6 text-gray-400 absolute left-3 inset-y-0 my-auto\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\"\n            >\n              <path\n                fillRule=\"evenodd\"\n                d=\"M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z\"\n                clip-rule=\"evenodd\"\n              />\n            </svg>\n            <input type=\"text\" placeholder=\"Enter your email\" class=\"w-full pl-12 pr-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg\" />\n          </div>\n        </form>\n      </div>\n      <div class='mt-12'>\n        <ul class='space-y-8 gap-12 grid-cols-2 sm:grid sm:space-y-0 lg:grid-cols-3'>\n          <li v-for=\"(item, index) in faqsList\" :key=\"index\" class=\"space-y-3\">\n            <summary class=\"flex items-center justify-between font-semibold text-gray-700\">\n              {{ item.q }}\n            </summary>\n            <p v-html=\"item.a\" class=\"text-gray-600 leading-relaxed\"></p>\n            <a :href=\"item.href\" class=\"flex items-center gap-x-1 text-sm text-indigo-600 hover:text-indigo-400 duration-150 font-medium\">\n              Read more\n              <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 7l5 5m0 0l-5 5m5-5H6\"/>\n              </svg>\n            </a>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </section>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      faqsList: [\n        {\n          q: \"What are some random questions to ask?\",\n          a: \"That's exactly the reason we created this random question generator. There are hundreds of random questions to choose from so you're able to find the perfect random question.\",\n          href: \"javascript:void(0)\",\n        },\n        {\n          q: \"Do you include common questions?\",\n          a: \"This generator doesn't include most common questions. The thought is that you can come up with common questions on your own so most of the questions in this generator.\",\n          href: \"javascript:void(0)\",\n        },\n        {\n          q: \"Can I use this for 21 questions?\",\n          a: \"Yes! there are two ways that you can use this question generator depending on what you're after. You can indicate that you want 21 questions generated.\",\n          href: \"javascript:void(0)\",\n        },\n        {\n          q: \"Are these questions for girls or for boys?\",\n          a: \"The questions in this generator are gender neutral and can be used to ask either male of females (or any other gender the person identifies with).\",\n          href: \"javascript:void(0)\",\n        },\n        {\n          q: \"What do you wish you had more talent doing?\",\n          a: \"If you've been searching for a way to get random questions, you've landed on the correct webpage. We created the Random Question Generator to ask you as many random questions as your heart desires.\",\n          href: \"javascript:void(0)\",\n        }\n      ],\n    }\n  },\n}\n</script>","label":"App.vue"}]}}
slug: /faqs
id: "farmui-faq-00"
created_at: 1670157220758
---

<FUIFaqsWithSearchBox />