-2

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.

Marketing Cloud

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>
2
  • 3
    You need to use radio buttons instead. However this question is more suited for Stackoverflow, as it is purely HTML specific and not as such Salesforce related Sep 16, 2019 at 19:14
  • @LukasLunow do you know that this is HTML based and not being built through some kind of UI in Marketing Cloud? Calo, can you share the code for the page? If it is just HTML then radio buttons will do the job nicely, if not, I suspect there's a way to use them instead however the page is generated.
    – Matt Lacey
    Sep 16, 2019 at 23:40

1 Answer 1

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!

6
  • Kyle, Is there a way I can work with the two Radio buttons instead of two Submit buttons? I already have one Submit Button on the page. And where do you add this code?
    – calo
    Sep 17, 2019 at 20:23
  • These would replace the submit button you’re currently using. Can you share the code you have so far?
    – Kyle Szabo
    Sep 17, 2019 at 20:50
  • Kyle, I posted the code in the main post. Unless you are looking for any specific?
    – calo
    Sep 17, 2019 at 20:54
  • Edit the first input for the radio button and make it required. I updated my answer to include this as an option. Note, Smartcapture will only add new data. If a record already exists with the same primary key, the form will not submit.
    – Kyle Szabo
    Sep 17, 2019 at 21:11
  • Thanks Kyle. But little confused here. <!---Radio Buttons---> would also go in Submit button?
    – calo
    Sep 17, 2019 at 21:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.