How to Send Emails to All Your Users Or a Specific User Role (Javascript/CSS)

API & Customization Show & Tell
1

Knack doesn't like to do bulk emails to all users as you're probably aware. I understand MailChimp, or something similar, could do this however I don't have that so... here we are! Here is a guide on how to send an email to all of your users from a form using Javascript and CSS.

Note: Repeat steps 4 and 5 for each User Role group you want to email:

1) Create Your User Roles

  1. Ensure Users are set to Active in your Builder
  2. Make one, or more, User Roles from "Data" in Builder
  3. Make sure you have an "Email" field with Emails for each account

2) Connect Your User Role to an Object You'll Send the Email From

  1. In Builder, go to the Object you will be modifying with your Form.
  2. Make a Connection to the User Role group you want to send an email to.
  3. Connection settings: Each "Name of Object" connects with many "Name of User Role". Each "Name of User Role" connects with many "Name of Object".
  4. Open the Settings for your Connection and change the Format to Checkboxes (This is required for the code to work)

3) Create Your Form (If You Haven't Already)

  1. Once you've created your form...
  2. In your form, place the Connection Object for your User Roles.
  3. When previewing, you should see a Checkbox List with all users in your User Role.

4) Use This Javascript Code to Select All Users in the Checkbox List

Insert and modify the following Javascript code in your app's API & Code. Simply change any mention of view_123 to your view's specific identification number. For example, my view might be view_1095.

  • You can find your view id number in the URL of your builder view when modifying any view's settings. You want the view id number for the form you made.
/* This Code Checks All the Boxes in the Checkbox We Made For That Form Only */
$(document).on('knack-view-render.view_123', function(event, view) { 
  $('#view_123 .conn_inputs input').each(function() {
    $('#view_123 .conn_inputs input').prop('checked', true); 
  });
});

5) Use This CSS Code to Hide the Checkbox List From the User

Insert and modify the following CSS code in your app's API & Code. Simply change any mention of field_123 to your field's specific identification number below.

  • The field we are referencing is the Data field for the Connection we made inside your Object. To find it, go to your Data page in Builder. Select the Object we made the Connection on. Click Settings on our User Role Connection. Look at the URL. You should see something like field_123 except the numbers will be your field's specific identification number. Use that to replace every mention of field_123 below:
#kn-input-field_123 {
  position: absolute;
  visibility: collapse;
}

6) Setup Your Email in the Form's Settings

  1. Open your Form's Settings
  2. Go to Emails
  3. Select Action -> Send an Email
  4. Under Send To: select your User Role Connection
  5. Repeat the Javascript and CSS step for each User Role you want to email (checkboxes tend to act funny when they exceed 500 entries)

And That's It... Here's a Summary of What we Did:

  1. Created a user role connection inside the object we will be emailing from. We made it so that object can connect with many users and many users can connect with many objects. We set that field's format to checkbox (so we can use javascript to select all the checkboxes automatically).
  2. Added the data field for the connection into our form we will be emailing from.
  3. Implemented Javascript that automatically checks all the boxes in our checkbox list of users (selecting them all for email).
  4. Implemented CSS that hides that checkbox list so the Javascript is done behind the scenes without relying on user input.
  5. Optional: Repeated the Javascript and CSS sections for each User Role.
  6. Sent an email to all users.
2 Likes
2

Glad to help. A little bit of a long winded post as this was made when I first started using this app and learning javascript haha. But let me know if you run into any issues. It continues to work for me all these months later. 

3

Thanks for sharing this Robert! I believe I have a use-case for this.

4

Brilliant thanks Robert. Just what I need.
How would I restrict hiding the field to a specific view?
I’ve tried the following (and various other iterations) with no luck.
#view_631 kn-input-field_771 {
position: absolute;
visibility: collapse;
}

5

Sorted it:
#view_631 #kn-input-field_771 {
position: absolute;
visibility: collapse;
}

6

Thanks Robert, very helpful.

FYI your jQuery in step 4 can be significantly simplified, since the query you have already finds all the input values (no need for a loop):

/* This Code Checks All the Boxes in the Checkbox We Made For That Form Only */
$(document).on('knack-view-render.view_123', function(event, view) {
  $('#view_123 .conn_inputs input').prop('checked', true);
});
7

This is just great…but I don’t seem to get it to work…according to Knack support I need to create a record rule in my form and add each account…one by one…in order to create the necessary relationships with the email field in my groups…it seems like the many to many realtionship is not enough…of course this is not an option when you got hundreds of contacts that you need to add…how did you go ahead to make this work? Maybe this worked on an older version of Knack? Really keen on getting this solved