JotForm and CMS combined

Hi,

I’m making a course signup for a climbing gym. There will be a lot of different courses and I would like the customer to choose the course he wants to attend. Then when the gym gets the email it shows the course name and the date of the course.

As of today you can make a webflow form or imbed a jotform/typeform inside every course/event. But I can’t seem to automatically get the name and date of the course sent with the email. Without the customer writes it down themself in the form.

So every form is the same, the name of the form cant be the name of the event and so on.

BUT, I have the source code for the form, maybe that can help. I have tried making a imbed and the form works, but when I add the CMS to the code, nothing changes in the emails. But I might be doing it wrong. Is it some part of the code thats not supposed to be in the embed but in the inside head tag or before body tag?

   <script src="https://cdn.jotfor.ms/static/prototype.forms.js" type="text/javascript"></script>
<script src="https://cdn.jotfor.ms/static/jotform.forms.js?3.3.14906" type="text/javascript"></script>
<script type="text/javascript">
   JotForm.init(function(){
	JotForm.clearFieldOnHide="disable";
	JotForm.onSubmissionError="jumpToFirstError";
   });
</script>
<link href="https://cdn.jotfor.ms/static/formCss.css?3.3.14906" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="https://cdn.jotfor.ms/css/styles/nova.css?3.3.14906" />
<link type="text/css" media="print" rel="stylesheet" href="https://cdn.jotfor.ms/css/printForm.css?3.3.14906" />
<link type="text/css" rel="stylesheet" href="https://cdn.jotfor.ms/themes/CSS/566a91c2977cdfcd478b4567.css?"/>
<style type="text/css">
    .form-label-left{
        width:150px !important;
    }
    .form-line{
        padding-top:12px;
        padding-bottom:12px;
    }
    .form-label-right{
        width:150px !important;
    }
    .form-all{
        width:690px;
        color:#555 !important;
        font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, sans-serif;
        font-size:14px;
    }
    .form-radio-item label, .form-checkbox-item label, .form-grading-label, .form-header{
        color: #555;
    }

</style>

<form class="jotform-form" action="https://submit.jotformeu.com/submit/62600565948361/" method="post" name="form_62600565948361" id="62600565948361" accept-charset="utf-8">
  <input type="hidden" name="formID" value="62600565948361" />
  <div class="form-all">
    <ul class="form-section page-section">
      <li id="cid_1" class="form-input-wide" data-type="control_head">
        <div class="form-header-group">
          <div class="header-text httal htvam">
            <h2 id="header_1" class="form-header">
              **I WOULD PUT THE NAME OF COURCE HER WITH CMS!!**
            </h2>
          </div>
        </div>
      </li>
      <li class="form-line" data-type="control_radio" id="id_5">
        <label class="form-label form-label-left form-label-auto" id="label_5" for="input_5"> **I WOULD ADD THE DATE OF THE COURSE HERE WITH CMS!!!** </label>
        <div id="cid_5" class="form-input jf-required">
          <div class="form-single-column">
            <span class="form-radio-item" style="clear:left;">
              <span class="dragger-item">
              </span>
              <input type="radio" class="form-radio" id="input_5_0" name="q5_date" value="DATE" />
              <label id="label_input_5_0" for="input_5_0">**I WOULD ADD THE DATE OF THE COURSE HERE WITH CMS!!!** </label>
            </span>
          </div>
        </div>
      </li>
      <li class="form-line" data-type="control_fullname" id="id_3">
        <label class="form-label form-label-left form-label-auto" id="label_3" for="input_3"> Name </label>
        <div id="cid_3" class="form-input jf-required">
          <span class="form-sub-label-container" style="vertical-align: top">
            <input class="form-textbox" type="text" size="10" name="q3_name[first]" id="first_3" />
            <label class="form-sub-label" for="first_3" id="sublabel_first" style="min-height: 13px;"> First Name </label>
          </span>
          <span class="form-sub-label-container" style="vertical-align: top">
            <input class="form-textbox" type="text" size="15" name="q3_name[last]" id="last_3" />
            <label class="form-sub-label" for="last_3" id="sublabel_last" style="min-height: 13px;"> Last Name </label>
          </span>
        </div>
      </li>
      <li class="form-line" data-type="control_email" id="id_4">
        <label class="form-label form-label-left form-label-auto" id="label_4" for="input_4"> E-mail </label>
        <div id="cid_4" class="form-input jf-required">
          <input type="email" class=" form-textbox validate[Email]" id="input_4" name="q4_email" size="30" value="" />
        </div>
      </li>
      <li class="form-line" data-type="control_button" id="id_2">
        <div id="cid_2" class="form-input-wide">
          <div style="margin-left:156px" class="form-buttons-wrapper">
            <button id="input_2" type="submit" class="form-submit-button">
              Submit
            </button>
          </div>
        </div>
      </li>
      <li style="display:none">
        Should be Empty:
        <input type="text" name="website" value="" />
      </li>
    </ul>
  </div>
  <input type="hidden" id="simple_spc" name="simple_spc" value="62600565948361" />
  <script type="text/javascript">
  document.getElementById("si" + "mple" + "_spc").value = "62600565948361-62600565948361";
  </script>
</form>
<script type="text/javascript">JotForm.ownerView=true;</script>

Any idea how to solve this?

According to the JotForm forums, you can pre-fill existing fields by including it in the src URL.

<script type="text/javascript" src="http://form.jotform.us/jsform/FORM_ID?course=AwesomeCourse&courseDate=09-17-16"></script>

This only works for fields that already exist in the form. By default, the fields would still be editable. You can set specific fields to be read-only, but I’m not sure if the pre-fill would work that way (something to test).

It might be possible to use Webflow variables, but you’d somehow have to make sure the parsed variables would be URL safe. Maybe @PixelGeek would have some better insight into this?

Thanx @kragit :slight_smile:

Just updated my post with the some information. The thing is that nothing happens on the reponse email when I change the name of the course and the date of the course. Ut just sais NAME and DATE.

Is some part of the code going in the body or header tag? And just some as an embed on the page?

I’ve tried this but dont seem to work

Looks like you’ve got the dynamic embeds figured out, which is good. The default output from those dynamic fields likely aren’t ‘URL safe’ which would cause the form embed not to work when used that way.

I’m not sure what the best way to make the output URL safe, or even if you can.

What you might consider though, is using the dynamic fields with the full code for the JotForm form embed, as the output wouldn’t need to be URL safe there. Setting read-only or hidden fields with the value of the event name and date.

Thank you! But still doesn’t work though :confused:

I can put the jotform sections to hidden and to read-only. Tried it but no luck.

Will see if someone have a great idea.

If anyone wants to see the sharelink its HERE

Press the links in top left corner. Thanks:)

This topic was automatically closed after 60 days. New replies are no longer allowed.