Skip to main content

I’m trying to accomplish something similar to the EmailInterests example documented here.

Basically I have a profile property called “preferences” which contains a list of strings.  Users can visit my hosted page and select their preferences.

<form action="" method="POST">
  <input type="hidden" name="$fields" value="preferences" />
  <input type="hidden" name="$list_fields" value="preferences" />

  <input type="email" name="$email" value="{{ person.email|default:'' }}" />

  <label>
    <input type="checkbox" name="preferences" value="pref_1" {% if 'pref_1' in person.preferences %}checked="checked"{% endif %} />
    Pref 1
  </label>

  <label>
    <input type="checkbox" name="preferences" value="pref_2" {% if 'pref_2' in person.preferences %}checked="checked"{% endif %} />
    Pref 2
  </label>

  <button type="submit">
    Update preferences
  </button>
</form>

This mostly works as expected.  Selecting just “Pref 1” makes “preferences pref_1” appear on the profile.  Selecting “Pref 1” and “Pref 2” makes “preferences pref_1, pref_2” appear.

The problem is if you uncheck both boxes, the profile doesn’t change.  I would expect it to erase the value of “preferences” but it leaves whatever value was already there.

Does anyone know of a way to solve this?

Found a workaround for this, posting for posterity.

Create a separate form with some hidden inputs and just one visible button.

<form action="" method="POST">
  <input type="hidden" name="$fields" value="preferences" />
  <input type="hidden" name="$email" value="{{ person.email|default:'' }}" />
  <input type="hidden" name="preferences" value="[]" />
  <button type="submit">Clear preferences</button>
</form>

The trick is having a hidden input called “preferences” with “t]” as the value, and not having the “$list_fields” input (or at least not having “preferences” in its value).  That way the empty brackets get put directly on the profile, and are interpreted as an empty list as expected.

One downside is there are two forms on this page, but with a little styling, the “Clear preferences” button can just look like another option next to the “Update preferences” button.

Hey @ben-larson Great to see your solution. 

Another tip I’d like to provide to accomplish the same goal a little more elegantly:

In the hidden input tag for the list field you’re updating, you can add in logic to look for not only if the user has the field value on their profile, but also if the user has checked or unchecked the box while they’ve been on the hosted page with this: 

<input type="checkbox" name="EmailInterests" value="Promotions" {% if 'Promotions' in person.EmailInterests or 'Promotions' in request.POST.EmailInterests %}checked="checked"{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />

Specifically, the pieces in bold. 

For your reference, I pulled that snippet from our docs here https://help.klaviyo.com/hc/en-us/articles/115005077067

 

Best,

Ingrid

HI Ben,

If you still need help to fix that issue with the same checkboxes you have. You can contact me on dev.asimsaeed@gmail.com. I’ll customize the code for you and achieve the results that you would like to do. 

Thanks,

Asim Saeed

Hi @ben-larson, 

 

Thanks for sharing your question with the Community!

 

Unfortunately, I am very sorry, but we cannot help you as this is a custom-coded Preference Page and Klaviyo doesn’t support troubleshooting custom code! I suggest reaching out to developer to help you fix this issue or reaching out to one of our Klaviyo Partners to help you further! 

 

Thank you for being a part of our Community!

-Taylor 

Hi @ben-larson, 

 

So happy to see you found a solution! Thank you for posting this for the benefit of other users in the Community!

 

Best,

Taylor 

Reply


Terms & Conditions