How to make sure user atleast select one option on Cloud pages in Marketing Salesforce Cloud?

Question

I have created the SF marketing cloud page and I want to make sure user selects at least one of the checkbox. Either Will Attend or Will Not Attend. Currently, I can submit this form without selecting any of them.

Thank you in advanced!

here's the HTML Code page:

    <table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style="min-width: 100%; "><tr><td class="stylingblock-content-wrapper camarker-inner">
<form id="smartcapture-block-ntbwfkb35u" class="smartcapture-content-wrapper fuelux" novalidate="novalidate">

<style id="smartcapture-styles-ntbwfkb35u">
 #smartcapture-block-ntbwfkb35u {
  background-color:transparent;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;text-align:left;
 }
label {
  background-color: white;
  width: 130px; 
  clear: left;
  text-align: left;/*change this R to L*/
  padding-right: 10px;
  padding-left: 4px;
}

input,
label {
  float: left;
}

.Checkbox{
  clear:none;
  text-align: left; /*add this*/
}
  .RSVP {
  padding-left: 4px;
  }

 #smartcapture-block-ntbwfkb35u .smartcapture-controls {
  padding-bottom: 10px;
 }

 #smartcapture-block-ntbwfkb35u .smartcapture-controls .sc-formfield-label,
 #smartcapture-block-ntbwfkb35u .smartcapture-controls .sc-formfield-label label,
 #smartcapture-block-ntbwfkb35u .smartcapture-controls .sc-formfield-input label {
  color:#000000;font-family:Arial, Helvetica, sans-serif;font-size:16px;line-height:inherit;margin-bottom:3px;vertical-align:middle;
 }

 #smartcapture-block-ntbwfkb35u input[type="radio"],
 #smartcapture-block-ntbwfkb35u input[type="checkbox"] {
  margin: 0 0.4em 3px 0;
  vertical-align: middle;
 }

 #smartcapture-block-ntbwfkb35u input[type="text"],
 #smartcapture-block-ntbwfkb35u input[type="email"],
 #smartcapture-block-ntbwfkb35u input[type="number"] {
  width:200px;
 }

 #smartcapture-block-ntbwfkb35u .sc-button {
  background-color:#009DDC;border-color:#009DDC;border-radius:3px;border-style:solid;-webkit-border-radius:3px;-moz-border-radius:3px;color:#FFFFFF;font-family:Arial, Helvetica, sans-serif;font-size:16px;line-height:normal;padding:10px;
 }

 #smartcapture-block-ntbwfkb35u .smartcapture-submit-button-wrapper {
  padding-bottom:10px;text-align:center;
 }

 #smartcapture-block-ntbwfkb35u .date-dropdown-select-boxes input {
  display: none;
 }

 #smartcapture-block-ntbwfkb35u .date-dropdown-select-boxes .select {
  max-height: 28em;
  max-width: 6em;
  overflow: auto;
 }
</style>

 <div data-type="slot" data-key="oow901kmve"></div>
 <div class="smartcapture-submit-button-wrapper">
  <button type="submit" class="sc-button">Submit</button>
 </div>

<script id="smartcapture-script-ntbwfkb35u">
 var scFormLoaded = function () {
  window.ScForm.init({"gearID":"ntbwfkb35u","smartCaptureFormID":0,"sourceKey":"2nd meeting invitation","source":"dataExtension","triggeredSend":"","confirmationMessage":"Thank you for your submission.","buttonText":"Submit","formStyling":{"background-color":"transparent","margin-top":"0px","margin-right":"0px","margin-bottom":"0px","margin-left":"0px","padding-top":"0px","padding-right":"0px","padding-bottom":"0px","padding-left":"0px","text-align":"left"},"fieldStyling":{"width":"200px"},"buttonStyling":{"background-color":"#009DDC","border-color":"#009DDC","border-radius":"3px","border-style":"solid","-webkit-border-radius":"3px","-moz-border-radius":"3px","color":"#FFFFFF","font-family":"Arial, Helvetica, sans-serif","font-size":"16px","line-height":"normal","padding":"10px"}});
 };
 window.appDomain = window.appDomain || '<ctrl:eval>Platform.Variable.GetValue("@appDomain")||""</ctrl:eval>';
 window.contentDetail = window.contentDetail || <ctrl:eval>Platform.Variable.GetValue('@contentDetail')||{}</ctrl:eval>;
 if (!window.ScForm || !window.ScForm.init) {
  var head = document.getElementsByTagName('head')[0];
  var id = 'smartcapture-formjs-script';
  var script = document.getElementById(id);
  var domain = window.appDomain;
  var el;
  if (!script) {
   if (domain) {
    domain = '//' + domain;
   }
   el = document.createElement('script');
   el.async = true;
   el.id = id;
   el.src = domain + '/CloudPages/lib/smartcapture-formjs.js';
   el.onload = scFormLoaded;
   head.appendChild(el);
  } else {
   if (script.addEventListener) {
    script.addEventListener('load', scFormLoaded);
   } else if (script.attachEvent) {
    script.attachEvent('onload', scFormLoaded);
   }
  }
 } else {
  scFormLoaded();
 }
</script>

</form>
</td></tr></table>

Here's the code for "Will Attend" :

<div class="smartcapture-controls"><div class="sc-formfield-label"></div>
<div class="sc-formfield-input-wrapper">

 <div class="sc-formfield-input"><label>&nbsp;<!-- Just Blank--></label><label class="Checkbox"><input type="checkbox" name="Yes" data-field-type="Boolean">&nbsp;Will Attend</label></div>

</div>
</div>

Answer 1

Instead of using checkboxes, use two buttons for the submit, and then some AMPscript to get the form data and update your Data Extension.

Something like this should work.

 %%[ 
      var @EmailAddress, @FirstName, @LastName, @Company, @Status, @UpateDeRow
      set @Status = RequestParameter('EmailAddress')
      set @Status = RequestParameter('FirstName')
      set @Status = RequestParameter('LastName')
      set @Status = RequestParameter('Company')          
      set @Status = RequestParameter('Status')

      if RequestParameter("submitted") == "submitted" then
           set @updateDeRow = upsertData('Data Extension Name', 1, 'EmailAddress', @EmailAddress, 'FirstName', @FirstName, 'LastName', @LastName, 'Company', @Company, 'Status',  @Status)
      endif
 ]%%

 <!-- Form Goes Here -->
 <button type="submit" value="Will Attend" name="Status" class="button">Will Attend</button>
 <button type="submit" value="Will Not Attend" name="Status" class="button">Will Not Attend</button>
 <input id="submitted" type="hidden" name="submitted" value="submitted">

 <!-- Radio Buttons -->
 <label><input type="radio" name="Status" value="Will Attend" required>Will Attend</label>
 <label><input type="radio" name="Status" value="Will Not Attend">Will Not Attend</label>

Hope this helps!