Currently, I am a student focusing on honing my skills by working on an app for a blog post. To kickstart my project, I downloaded the "clean-blog" template from the startbootstrap website.
If you are interested, here is the link to the template:
My current challenge involves using Node and EJS to work on form submission within the app. However, despite my efforts, the form doesn't seem to be going through. I stumbled upon a comment mentioning an "activation token needed". Here's the reference snippet: activation token needed
Even when hovering close to the submit button, there isn't any change in the mouse pointer indicating a clickable action. As a learner, I have attempted to strip away unnecessary attributes, but the form remains unresponsive. Ultimately, I reverted back all the modifications made to the page. Below is an excerpt of the code from my ejs file.
Could someone extend their expertise to help me activate the demo "form"? What steps should I take to resolve this issue?
<!DOCTYPE html>
<html lang="en">
<!-- Header-->
<%- include('layouts/header'); -%>
<body>
<!-- Navigation-->
<%- include('layouts/navbar'); -%>
<!-- Page Header-->
<header class="masthead" style="background-image: url('/assets/img/contact-bg.jpg')">
<div class="container position-relative px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<div class="page-heading">
<h1>Create New Post</h1>
<span class="subheading">Have questions? I have answers.</span>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content-->
<main class="mb-4">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<p>Want to get in touch? Fill out the form below to send me a message and I will get back to
you as soon as possible!</p>
<div class="my-5">
<!-- * * * * * * * * * * * * * * *-->
<!-- * * SB Forms Contact Form * *-->
<!-- * * * * * * * * * * * * * * *-->
<!-- This form is pre-integrated with SB Forms.-->
<!-- To make this form functional, sign up at-->
<!-- https://startbootstrap.com/solution/contact-forms-->
<!-- to get an API token!-->
<form action="/posts/store" method="POST" data-sb-form-api-token="API_TOKEN">
<div class="form-floating">
<input class="form-control" id="title" name="title" type="text"
placeholder="Enter the title..." data-sb-validations="required" />
<label for="title">Title</label>
<div class="invalid-feedback" data-sb-feedback="name:required">Title is
required.</div>
</div>
<div class="form-floating">
<textarea class="form-control" id="description" style="height: 12rem"
placeholder="Enter your message here..." style="height: 12rem"
data-sb-validations="required"></textarea>
<label for="message">Description</label>
<div class="invalid-feedback" data-sb-feedback="message:required">A Description is
required.</div>
</div>
<br />
<!-- Submit success message-->
<!---->
<!-- This is what your users will see when the form-->
<!-- has successfully submitted-->
<div class="d-none" id="submitSuccessMessage">
<div class="text-center mb-3">
<div class="fw-bolder">Form submission successful!</div>
To activate this form, sign up at
<br />
<a
href="https://startbootstrap.com/solution/contact-forms">https://startbootstrap.com/solution/contact-forms</a>
</div>
</div>
<!-- Submit error message-->
<!---->
<!-- This is what your users will see when there is-->
<!-- an error submitting the form-->
<div class="d-none" id="submitErrorMessage">
<div class="text-center text-danger mb-3">Error sending message!</div>
</div>
<!-- Submit Button-->
<button class="btn btn-primary text-uppercase disabled" id="submitButton"
type="submit">Send</button>
</form>
</div>
</div>
</div>
</div>
</main>
<!-- Footer-->
<%- include('layouts/footer'); -%>
<!-- Scripts-->
<%- include('layouts/scripts'); -%>
</body>
</html>
'''