Adding a Terms & Conditions field

When collecting data through forms, it's often necessary to include Terms and Conditions that users must accept before submitting their responses. Here's a simple guide on implementing this on monday using EasyForm.

1. Prepare your Terms & Conditions document

You can use any public URL as your Terms & Conditions, a page on your website, a Google Doc, etc.

To use Google Docs:

Upload your document to Google Docs
For a public link to the Doc, go to File → Share → Publish to web → Link
For a public embed code to the Doc, go to File → Share → Publish to web → Embed

Add a new Dropdown field to your board.
Include a single option: "I accept the terms and conditions."
Create an EasyForm and add the Dropdown field.
If you want the Terms & Conditions to be mandatory, mark the field as required to ensure users must accept before submitting.

3. Adding the Terms & Conditions to EasyForm

Adding the Terms & Conditions as a link

To add a link to the Terms & Conditions, paste an HTML a tag in the description of the Dropdown field with a URL for your document. Copy the code below and replace YOUR_DOCUMENT_URL it with the URL to your doc.

<a href='YOUR_DOCUMENT_URL' target='_blank' rel='noopener noreferrer'>Terms and Conditions</a>

Then add the HTML to the Dropdown field description:

Adding the Terms & Conditions as an embedded document

You can embed an external document in your form and display it as Terms & Conditions. To do this, paste the embed code into your document in the description of the Dropdown field. Replace YOUR_DOCUMENT_URL in the code with the URL to your Terms & Conditions. If you are copying the embed code for a Google doc, add a width and height like in the code below to adjust the size of the document to the form.

<iframe
  width="100%"
  height="315"
  src="YOUR_DOCUMENT_URL"
  frameborder="0"
  allowfullscreen
>
</iframe>

Adding a collapsible Terms & Conditions

By adding some HTML and CSS, you can make the terms and conditions collapsible. All you need to do is past this code block below in the Dropdown field description and replace the text with your Terms & Conditions, ending up with this form:

Copy the code below and replace the content with your Terms & Conditions. Notice the the summary tag is the text visible when the Terms & Conditions are closed.

<body>
  <details
    style="
      margin: 10px 0;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
    "
  >
    <summary style="font-weight: bold; cursor: pointer">
      Terms and Conditions
    </summary>
    <p>
      This is a collapsible description. You can include any HTML content,
      such as text, images, or links. The content will be hidden until the user
      clicks the "Description" summary above.
    </p>
    <p>
      Additional content can be added here. This is useful for long descriptions
      you want to keep hidden by default.
    </p>
  </details>
</body>

Then paste it in the Dropdown field description:

Adding collapsible embedded Terms & Conditions document

Copy the code below and replace the YOUE_DOCUMENT_URL with the URL to your Terms & Conditions.

<body>
  <details
    style="
      margin: 10px 0;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
    "
  >
    <summary style="font-weight: bold; cursor: pointer">
      Terms and Conditions
    </summary>
    <p>
      <iframe
        width="100%"
        height="315"
        src="YOUR_DOCUMENT_URL"
        frameborder="0"
        allowfullscreen
      ></iframe>
    </p>
  </details>
</body>

Finally, paste the code in the Dropdown field description:

PreviousAdding a confirmation checkbox NextPrepopulating embedded wordpress forms with user data

Last updated 7 months ago