Setting Up Form Submission to Trigger a POST Request
To ensure that our Contact Us form correctly triggers a POST request to the contacts/create
page, we need to modify the form action and handle the form submission properly. This involves modifying the form action, managing authenticity tokens, and ensuring the form data is sent correctly.
Modify the form action
When you click on the Send button on the Contact Us form, it currently directs to the current URL with query parameters:
/?contact[email]=&contact[body]=
We need to change this behavior so that the form submits a POST request to the /contacts/create
endpoint.
Desired URL:
/contacts/create
In detail, we need to modify the form in app/views/pages/index.html.liquid
to update the action attribute to point to /contacts/create
and ensure the method is set to POST
.
To do that, add the following line to your app/views/pages/index.html.liquid
file:
<form action="/contacts/create" method="post">
app/views/pages/index.html.liquid
<h2>Contact Us</h2>
<form action="/contacts/create" method="post">
<div>
<label for="email">Email</label>
<input type="text" name="contact[email]" id="email">
</div>
<div>
<textarea name="contact[body]"></textarea>
</div>
<input type="submit" value="Send">
</form>
Add missing authenticity token
For security reasons, especially to prevent Cross-Site Request Forgery (CSRF) attacks, it’s important to include an authenticity token in the form. This token ensures that the form submission originates from your application.
If you are using a Language Server Protocol (LSP), you might see a warning about the missing authenticity token:
To fix this, add the following hidden input field within the form:
<input type="hidden" name="authenticity_token" value="{{ context.authenticity_token }}">
This hidden field ensures that the authenticity token is sent along with the form data, which the server will verify.
The updated form in index.html.liquid
should look like this:
app/views/pages/index.html.liquid
<h2>Contact Us</h2>
<form action="/contacts/create" method="post">
<input type="hidden" name="authenticity_token" value="{{ context.authenticity_token }}">
<div>
<label for="email">Email</label>
<input type="text" name="contact[email]" id="email">
</div>
<div>
<textarea name="contact[body]"></textarea>
</div>
<input type="submit" value="Send">
</form>
Test the form submission
Now, when you click on the Send button, the form data will be sent via a POST request to the /contacts/create
endpoint. The URL will change to /contacts/create
, indicating that the form has been submitted as intended.
For example, after submission, the URL should look like this:
https://contactus.staging.oregon.platform-os.com/contacts/create
With this setup, your form is now correctly configured to submit data to the contacts/create
endpoint, and includes the necessary authenticity token to protect against CSRF attacks.