Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove version numbers #45

Merged
merged 3 commits into from
Mar 18, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 0 additions & 45 deletions .github/workflows/main.yml

This file was deleted.

6 changes: 6 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
# Changelog

## UNRELEASED

### Changes

* Updates the documentation. No code changes.

## 1.3.0 (2023-11-03)

### Adds
Expand Down
32 changes: 22 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,19 @@
[![CircleCI](https://circleci.com/gh/apostrophecms/form/tree/main.svg?style=svg)](https://circleci.com/gh/apostrophecms/form/tree/main)
[![Chat on Discord](https://img.shields.io/discord/517772094482677790.svg)](https://chat.apostrophecms.org)

# Form Builder for Apostrophe 3
<div align="center">
<img src="https://raw.githubusercontent.com/apostrophecms/apostrophe/main/logo.svg" alt="ApostropheCMS logo" width="80" height="80">

<h1>Form builder for ApostropheCMS</h1>
<p>
<a aria-label="Apostrophe logo" href="https://docs.apostrophecms.org">
<img src="https://img.shields.io/badge/MADE%20FOR%20ApostropheCMS-000000.svg?style=for-the-badge&logo=Apostrophe&labelColor=6516dd">
</a>
<a aria-label="Join the community on Discord" href="http://chat.apostrophecms.org">
<img alt="" src="https://img.shields.io/discord/517772094482677790?color=5865f2&label=Join%20the%20Discord&logo=discord&logoColor=fff&labelColor=000&style=for-the-badge&logoWidth=20">
</a>
<a aria-label="License" href="https://github.com/apostrophecms/blog/blob/main/LICENSE.md">
<img alt="" src="https://img.shields.io/static/v1?style=for-the-badge&labelColor=000000&label=License&message=MIT&color=3DA639">
</a>
</p>
</div>

Allow ApostropheCMS editors to build their own forms. They can then place any form in one or more content areas across the website.

Expand Down Expand Up @@ -131,7 +143,7 @@ The file field widget, `@apostrophecms/form-file-field-widget`, uses a route on

### Adding forms to pages and pieces

Forms are added to pages and pieces using a widget, `@apostrophecms/form-widget`. Add this to [an area](https://v3.docs.apostrophecms.org/guide/areas-and-widgets.html) in a page or piece type field schema to let editors add a form there. It will often be best to have an area field dedicated to the form widget.
Forms are added to pages and pieces using a widget, `@apostrophecms/form-widget`. Add this to [an area](https://docs.apostrophecms.org/guide/areas-and-widgets.html) in a page or piece type field schema to let editors add a form there. It will often be best to have an area field dedicated to the form widget.

```javascript
// modules/contact-page/index.js
Expand Down Expand Up @@ -168,15 +180,15 @@ module.exports = {
}
```

**Form submission always triggers a `'submission'` [server-side event](https://v3.docs.apostrophecms.org/guide/server-events.html)** that you can listen for and handle in the `@apostrophecms/form` module or another module. Event handler functions are passed the following arguments:
**Form submission always triggers a `'submission'` [server-side event](https://docs.apostrophecms.org/guide/server-events.html)** that you can listen for and handle in the `@apostrophecms/form` module or another module. Event handler functions are passed the following arguments:

| Argument | Description |
| ------- | ------- |
| `req` | The request object from the submission |
| `form` | The form object |
| `submission` | The user submission |

**In addition, if saving to the MongoDB collection is not disabled, form submission triggers a `'beforeSaveSubmission'` [server-side event](https://v3.docs.apostrophecms.org/guide/server-events.html)** that you can listen for and handle in the `@apostrophecms/form` module or another module. Event handler functions are passed the following arguments:
**In addition, if saving to the MongoDB collection is not disabled, form submission triggers a `'beforeSaveSubmission'` [server-side event](https://docs.apostrophecms.org/guide/server-events.html)** that you can listen for and handle in the `@apostrophecms/form` module or another module. Event handler functions are passed the following arguments:

| Argument | Description |
| ------- | ------- |
Expand Down Expand Up @@ -214,7 +226,7 @@ Starter styles for user-facing forms are included in a forms.less file. These of

### Custom class prefix

Need more control over your styling? You can include your own class prefix that will be in included on most of the labels, inputs, and message/error elements within the forms. The class that is created uses the [BEM](http://getbem.com/naming/) convention. You add the prefix you want in the `@apostrophecms/form` configuration.
Need more control over your styling? You can include your own class prefix that will be included on most of the labels, inputs, and message/error elements within the forms. The class that is created uses the [BEM](http://getbem.com/naming/) convention. You add the prefix you want in the `@apostrophecms/form` configuration.

```javascript
'@apostrophecms/form': {
Expand All @@ -227,7 +239,7 @@ This results in a class like `my-form__input` being added to input elements in t

## Using reCAPTCHA for user validation

Google's reCAPTCHA is built in as an optional feature. You will first need to [set up a reCAPTCHA site up on their website](https://www.google.com/recaptcha/) using the *version three option*. Make sure your domains are configured (using `localhost` for local development).
Google's reCAPTCHA is built in as an optional feature. You will first need to [set up reCAPTCHA on your website](https://www.google.com/recaptcha/) using the *version three option*. Make sure your domains are configured (using `localhost` for local development).

Copy the **site key** and **secret key**. You will need to enter them in the site's global settings when logged in. Each form will have a checkbox to enable reCAPTCHA for that form.

Expand Down Expand Up @@ -267,7 +279,7 @@ These functions can be extended for project-level validation using the super pat
2. Creating a new function that uses the original one, adds functionality, and returns an identically structured response.
3. Assigning the new function to the original function property.

An example for the text area field in project code might look like this:
An example of the text area field in a project's code might look like this:

```javascript
// modules/@apostrophecms/form-textarea-field-widget/ui/src/index.js
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"form builder"
],
"devDependencies": {
"apostrophe": "^3.58.1",
"apostrophe": "^4.0.0",
"eslint": "^8.50.0",
"eslint-config-apostrophe": "^4.1.0",
"eslint-config-standard": "^17.1.0",
Expand Down