My first contact block for the Mobirise Website builder.

Project Download:

https://www.dropbox.com/s/888jvkojkc0g8f7/project.mobirise?dl=1

HTML Code Snippet:

<section class="mbr-section form1" group="Forms" data-bg-video="{{bg.type == 'video' && bg.value.url}}" mbr-class="{'mbr-parallax-background': bg.parallax}">
   <mbr-parameters>
      <!-- Block parameters controls (Blue "Gear" panel) -->
       <input type="range" inline title="Top" name="paddingTop" min="0" max="9" step="1" value="6">
      <input type="range" inline title="Bottom" name="paddingBottom" min="0" max="9" step="1" value="6">
      <input type="range" inline title="Subtitle Width" name="subtitle_width" min="0" max="100" step="1" value="65">
      <input type="checkbox" title="Show Top Section" name="showTop" checked>
      <input type="checkbox" title="Show Title" name="showTitle" checked>
      <input type="checkbox" title="Show Subtitle" name="showSubtitle" checked>
      <input type="color" title="Background Color" name="bg" value="#ffffff">
      <!-- End block parameters -->
   </mbr-parameters>
   <div class="mbr-overlay" mbr-if="overlay && bg.type!== 'color'" mbr-style="{'opacity': overlayOpacity, 'background-color': overlayColor}">
   </div>
   <div class="container">
      <div class="row justify-content-center text-center pb-lg-5" mbr-if="showTop">
         <div class="col-12 col-md-10">
            <h2 class="mbr-section-title mbr-fonts-style pb-3" mbr-theme-style="display-2">Free Consultation</h2>
            <p class="mbr-text mbr-fonts-style wrapper mx-auto pb-3" mbr-theme-style="display-7">Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life one day however a small line.</p>
         </div>
      </div>
      <div class="row justify-content-center">
         <div mbr-form class="media-container-column col-lg-8">
            <div data-form-alert hidden>Thanks for filling out the form!</div>
            <form class="mbr-form" action="gustav.emil.fors@gmail.com" method="post" name="Mobirise Form">
               <div class="row row-sm-offset">
                  <div class="col-md-4 multi-horizontal" data-for="name">
                     <div class="form-group">
                        <label mbr-text class="form-control-label mbr-fonts-style" mbr-theme-style="display-7" for="name">Name</label>
                        <input type="text" class="form-control" name="name" data-form-field="Name" required>
                     </div>
                  </div>
                  <div class="col-md-4 multi-horizontal" data-for="email">
                     <div class="form-group">
                        <label mbr-text class="form-control-label mbr-fonts-style" mbr-theme-style="display-7" for="email">Email</label>
                        <input type="email" class="form-control" name="email" data-form-field="Email" required>
                     </div>
                  </div>
                  <div class="col-md-4 multi-horizontal" data-for="phone">
                     <div class="form-group">
                        <label mbr-text class="form-control-label mbr-fonts-style" mbr-theme-style="display-7" for="phone">Phone</label>
                        <input type="tel" class="form-control" name="phone" data-form-field="Phone">
                     </div>
                  </div>
               </div>
               <div class="form-group" data-for="message">
                  <label mbr-text class="form-control-label mbr-fonts-style" mbr-theme-style="display-7" for="message">Message</label>
                  <textarea type="text" class="form-control" name="message" rows="7" data-form-field="Message"></textarea>
               </div>
               <span mbr-buttons mbr-theme-style="display-4" data-toolbar="-mbrLink,-mbrBtnAdd,-mbrBtnMove" class="input-group-btn"><a href type="submit" class="btn btn-form btn-secondary" data-app-placeholder="Type Text">Submit</a></span>
            </form>
         </div>
      </div>
   </div>
</section>

CSS Code Snippet:

padding-top: (@paddingTop * 15px);
padding-bottom: (@paddingBottom * 15px);
background-color: @bg;
.wrapper {
  width: (@subtitle_width * 1%);
  @media (max-width: 992px) {
    width: 100% !important;
  }
}
.title {
  margin-bottom: 2rem;
}
.mbr-section-subtitle {
  color: #767676;
}
a:not([href]):not([tabindex]) {
  color: #fff;
  border-radius: 3px;
}
a.btn-white:not([href]):not([tabindex]) {
  color: #333;
}
.multi-horizontal {
  flex-grow: 1;
  -webkit-flex-grow: 1;
  max-width: 100%;
}
.input-group-btn {
  display: block;
  text-align: center;
}
.hero-btn a {
  font-weight: 700;
  font-size: 0.75rem;
}
.mbr-fonts-style {
  font-weight: 400;
}
H2 {
  color: #141414;
}
p {
  color: #999999;
}