FAQ add on to capture categorised questions via public form and publish Question plus Admin's answer to (FAQs)

Hi everyone… long time Wix user, but newbie here… definitely UN-TECH! Please excuse my 'un’tech-like descriptions…

Question:
Is there a Wix FAQ add on or FAQ App, that would enable questions to be submitted by non members via a form on a public site, stored and notification sent by email to admin with link, then edited with answer added by admin and then post the completed Q&A publicly (or not) to the list of FAQs, with a copy going to the submitter by email?

Product:

Wix FAQ

What are you trying to achieve:
Public visitors to a public website fill in a form (Ask the Expert) with their email, a freeform question, and a required category selection.
On submit, a copy of the Question with standard and editable header and footer goes to the visitor
On submit, a copy of the Question with link goes to the FAQ app as an incomplete entry and also goes as a notification to nominated admin email(s).
When admin login to FAQ, they see a list of Questions that need to be answered and not yet public.
Once an answer has been included, the FAQ is saved and ready to be sent back to the visitor’s email and then set to publish on the live site FAQ (under selected category) or store for admin only.

What have you already tried:
Alternatively it could be a support App with tickets that enable the admin to answer the question, send an email to the visitor who asked the question, plus post the Q&A to a selected category of FAQs.

I’m sure this must exist? It just makes sense?

Can’t wait to hear the good news!?
Many thanks,
Jacqui

1 Like

Hey Jacqui,

Unfortunately, there isn’t an app on the Wix App Market currently that fulfills the required functionality.

The good news, though, is that this logic flow can be custom-coded for your website using Wix Velo. If you’d like to explore this option, feel free to reach out to us — we can get it done for you! (:

Get in touch

1 Like

What you are trying to achieve is a very complex thing. At least in my imagination this can get very complexe very fast. It will depend on what kind of functionality exactly you will want to have inside your own created APP.

COPY-PASTE the following EXAMPLE into your ordinary EDITOR and save it as → HTML-FILE. Once saved, start it and see if this maybe could be a start of what you are trying to achieve.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FAQ Submission Example</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .admin-section { margin-top: 40px; }
        .faq-list { margin-top: 20px; }
        .faq-item { border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; }
    </style>
</head>
<body>
    <h1>Ask the Expert</h1>
    <form id="questionForm">
        <label for="email">Email:</label><br>
        <input type="email" id="email" required><br><br>
        
        <label for="question">Question:</label><br>
        <textarea id="question" required></textarea><br><br>
        
        <label for="category">Category:</label><br>
        <select id="category" required>
            <option value="General">General</option>
            <option value="Technical">Technical</option>
            <option value="Support">Support</option>
        </select><br><br>
        
        <button type="submit">Submit Question</button>
    </form>

    <div class="admin-section">
        <h2>Admin Dashboard</h2>
        <div id="faqList" class="faq-list"></div>
    </div>

    <script>
        // Store questions in local storage for demo purposes
        const form = document.getElementById('questionForm');
        const faqList = document.getElementById('faqList');

        function getQuestions() {
            return JSON.parse(localStorage.getItem('questions')) || [];
        }

        function saveQuestions(questions) {
            localStorage.setItem('questions', JSON.stringify(questions));
        }

        function renderFAQList() {
            const questions = getQuestions();
            faqList.innerHTML = '';
            questions.forEach((faq, index) => {
                const faqItem = document.createElement('div');
                faqItem.className = 'faq-item';
                faqItem.innerHTML = `
                    <strong>Email:</strong> ${faq.email}<br>
                    <strong>Category:</strong> ${faq.category}<br>
                    <strong>Question:</strong> ${faq.question}<br>
                    <strong>Answer:</strong> ${faq.answer || 'Pending'}<br>
                    <button onclick="editQuestion(${index})">Edit/Answer</button>
                    <button onclick="publishFAQ(${index})">Publish</button>
                `;
                faqList.appendChild(faqItem);
            });
        }

        function editQuestion(index) {
            const questions = getQuestions();
            const question = questions[index];
            const answer = prompt('Provide an answer:', question.answer || '');
            if (answer !== null) {
                questions[index].answer = answer;
                saveQuestions(questions);
                renderFAQList();
            }
        }

        function publishFAQ(index) {
            const questions = getQuestions();
            const question = questions[index];
            if (question.answer) {
                alert(`FAQ Published:\n\n${question.question}\n\nAnswer: ${question.answer}`);
            } else {
                alert('Please answer the question before publishing.');
            }
        }

        form.addEventListener('submit', (e) => {
            e.preventDefault();
            const email = document.getElementById('email').value;
            const question = document.getElementById('question').value;
            const category = document.getElementById('category').value;

            const newQuestion = { email, question, category, answer: null };
            const questions = getQuestions();
            questions.push(newQuestion);
            saveQuestions(questions);

            alert('Your question has been submitted!');

            form.reset();
            renderFAQList();
        });

        renderFAQList();
    </script>
</body>
</html>

If you are afraid of → VIRUSES ← about this you should always think, you can open …

PASTE THE CODE INTO THE UPPER LEFT CORNER-SECTION (HTML-SECTION) and press the YELLOW → RUN ← button.

Now, after you have taken a look onto the result and tested it out → you can start to improve and expand this little example-app and even connect it to your WIX-WEBPAGE and maybe even to a DATABASE if you like to.

It’s all about IMAGINATIONS and what you will create out of it. BE CREATIVE!!!

GOOD LUCK & HAPPY CODING !!!

2 Likes

Awesome. Thank you Code-Ninja!

So you need to let me know how much it will cost me to create this app to work within the Wix FAQ app, or instead of it, with at least the same functionality that it currently has?

Or you may want to create it to add to the Wix marketplace? I think it could be quite valuable and easy to sell? I can help you scope and test it in return for me being the first to use it?

A few more things…

  1. The admin may want to (and should be able to) edit the question and the category before it is published to the public FAQ list.

  2. It would also be great if the completed Q&A could belong to multiple categories.

  3. It would be great if the Admin could include a special note that will only go in the email to the person who submitted the question, along with both the question and answer?

  4. And of course the admin should be able to decide if the Q&A will be added to the public FAQs or not.

  5. Obviously the emails with the visitor would need to be stored in the Wix member profile, and all the FAQ data would need to be stored in a searchable database (per Wix-FAQ).

Look forward to working with you (if you don’t mind working within my ‘non-techie’ language)?
Jacqui

1 Like

Hello again.

Yes it would be possible, but it also would be time-consuming.
I think we could try to generate such an app. My suggestion would be to find more interested programmers who maybe want to join such an ongoing project.

But you also should be aware of, that his would be a long-time-project (no fees or payment).

At first we should start to plan … like for example…

1. Define the Project Scope and Goals:

  • Clearly define what your app will do, who the users are, and what features it should include.
  • Create a project roadmap with milestones and deadlines.

2. Establish Roles and Responsibilities:

  • Assign roles based on skill sets (e.g., front-end development, back-end development, design, project management).
  • Ensure each team member knows what they’re responsible for to avoid overlap or confusion.

3. Choose Development Tools and Technologies:

  • Decide on the tech stack: programming languages, frameworks, databases, etc.
  • Use collaborative development platforms like GitHub or GitLab for version control.
  • If working on a web or mobile app, choose front-end frameworks (e.g., React, Vue.js) and back-end technologies (e.g., Node.js, Python).

4. Use Project Management Tools:

  • Tools like Trello, Asana, or Jira help track tasks, bugs, and progress.
  • Use agile methodologies (Scrum/Kanban) for iterative development.

5. Version Control and Code Collaboration:

  • Use Git for version control to manage code changes across team members.
  • Create branches for different features and merge them once they are tested and complete.

6. Implement CI/CD Pipelines:

  • Set up Continuous Integration (CI) and Continuous Deployment (CD) systems like Jenkins or CircleCI to automate testing and deployment.

7. Frequent Communication:

  • Regular meetings (daily/weekly stand-ups) to discuss progress, challenges, and updates.
  • Use communication platforms like Slack or Microsoft Teams to stay connected.

8. Design and Prototyping:

  • Collaborate on design using tools like Figma or Adobe XD.
  • Agree on UI/UX guidelines early on to keep the look and feel consistent.

9. Documentation and Code Quality:

  • Keep good documentation for future reference (e.g., API documentation, readme files).
  • Set code quality standards (e.g., using linting tools and code reviews).

10. Testing and Debugging:

  • Ensure thorough testing (unit tests, integration tests, and user acceptance testing).
  • Use tools like Selenium for automated testing or Postman for API testing.

11. Deployment and Maintenance:

  • Decide on the deployment environment (e.g., AWS, Google Cloud, Heroku).
  • Plan for post-launch maintenance and updates.

12. Security and Data Privacy:

  • Implement security best practices, especially if the app will handle sensitive data (e.g., encryption, secure authentication).

13. Legal Considerations:

  • Make sure to consider licenses for third-party libraries, tools, or APIs.
  • If monetizing, consider payment integration and legal compliance.

14. User Feedback and Iteration:

  • Plan how you’ll gather and incorporate user feedback for improvements.

By focusing on clear communication, proper use of tools, and structured collaboration, you’ll be able to work effectively with your team to build the app.

Once we have enough information of everything we need to know about, we can start to code.

Not all mentioned points will match to this ongoing project, but mostly.

2 Likes

I know you may think it’s a good idea for an app but this is not a popular request at all. It is too specific and complex for a unique website need.

What you are describing is a ticketing management system that allow users to send a question to receive an answer. Some support ticketing systems also offer a knowledge base (which is where questions and answers are displayed in a searchable database).

Knowledge bases and ticketing systems are very complex and robust. You should consider searching for a 3rd party app that already offers this functionality.

1 Like

Thanks Codequeen. You’re right and I agree. Appreciate your wise advice.

1 Like

TRUE !!! :grinning:

2 Likes