Building a new Form

To build a new Form, head over to Forms within CMS in the left-hand menu of your Admin and click the "Add New Form" button.

You should add in each of the fields to match your BC form along with your Workflow and Autoresponder email Layouts.

Creating a Form will automatically generate a default Layout, which you can view in Code Editor, but you will be locked from editing. This is because the layout is edited by the Admin automatically, adding new fields as they are added to the Form itself.

You should create a custom layout for the Form beside the default layout. Right click on the folder with the name/id of your form to do this.

Copying over Layouts

Copy the HTML content of your Form layout from your BC site, and paste it into your custom form Layout in Code Editor.

Now you'll need to match up the Form fields with the Siteglide versions. You can use the "Insert field" dropdown along the top of Code Editor to automatically output the liquid for each field.

Example BC Layout:

<form action="/FormProcessv2.aspx?WebFormID=10090&amp;amp;OID=13344326&amp;amp;OTYPE=1&amp;amp;EID=0&amp;amp;CID=0" enctype="multipart/form-data" onsubmit="return checkWholeForm64170(this)" method="post" name="catwebformform64170">
  <div class="row">
    <div class="medium-6 columns"> <input id="FirstName" name="FirstName" placeholder="First name" type="text"> <input
        id="LastName" name="LastName" placeholder="Last name" type="text"> <input id="HomePhone" name="HomePhone"
        placeholder="Phone number" type="text"> <input placeholder="Email address" name="EmailAddress" id="EmailAddress"
        type="text"> </div>
    <div class="medium-6 columns"> <textarea placeholder="Your Message" style="height: 190px;" id="CAT_Custom_869"
        name="CAT_Custom_869"></textarea> <input value="Submit" id="catwebformbutton" type="submit"> </div>
    <div class="columns medium-12 consent" style="text-align: center; margin-top: 3%;">
      <p>By clicking submit, you consent to our <a style="color: #369;" href="/privacy-policy">privacy policy</a>.</p>
    </div>
  </div>
  <script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js"></script>
  <script type="text/javascript">
    //&amp;<![CDATA[
    var submitcount64170 = 0; function checkWholeForm64170(theForm) { var why = ""; if (theForm.FirstName) why += isEmpty(theForm.FirstName.value, "First Name"); if (theForm.LastName) why += isEmpty(theForm.LastName.value, "Last Name");  if (theForm.EmailAddress) why += checkEmail(theForm.EmailAddress.value);  if (theForm.HomePhone) why += isEmpty(theForm.HomePhone.value, "Home Phone Number");  if (theForm.CellPhone) why += isEmpty(theForm.CellPhone.value, "Cell Phone Number");  if (why != "") { alert(why);  return false; } if (submitcount64170 == 0) {  submitcount64170++; theForm.submit(); return false; } else {  alert("Form submission is in progress."); return false; } } //]]&amp;>  
  </script>
</form>

Example Siteglide Layout:

{% form -%}
  <div class="row">
    <div class="medium-6 columns">
      <div class="row mt-4">
        <div class="col">
           <label for="name">Name</label>
           <input class="form-control required" name="{{ form_builder.fields.properties.name.name }}" id="name" type="text">
        </div>
      </div>
      <div class="row mt-4 input_text">
        <div class="col">
          <label for="form_field_1_1">Phone number</label>
          <input class="form-control required" name="{{ form_builder.fields.properties.form_field_1_1.name }}" type="text">
        </div>
      </div>
      <div class="row mt-4">
        <div class="col">
          <label for="email">Email Address</label>
          <input class="form-control required" name="{{ form_builder.fields.properties.email.name }}" id="email" type="email">
        </div>
      </div>
    </div>
    <div class="medium-6 columns">
      <div class="row mt-4 textarea">
        <div class="col">
          <label for="form_field_1_3">Your Message</label>
          <textarea class="form-control required" name="{{ form_builder.fields.properties.form_field_1_3.name }}" rows="5" cols="30"></textarea>
        </div>
      </div>
      <div class="row mt-4">
        <div class="col">
          <button class="btn buttonAccent" onClick="formSubmit(this,'form_1')">Submit <i class="fas fa-spinner fa-spin no-spin"></i></button>
        </div>
      </div>
    </div>
  </div>
  <input class="form-control upload_dir" value="{{_upload_dir}}" type="hidden">
{% endform -%}

Questions

If you have any questions while migrating your Form Layouts, get in touch via our Intercom in the bottom right-hand corner of your Admin and we'll be happy to help.

Did this answer your question?