Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

Crafting a Request a Demo Landing Page with Video

In this article, Solodev shows you how to create a landing page that displays a demo video after form submission.

Standard landing pages have marketing copy and a graphic on one side and a long form on the other side of the page. Filling out this form usually sends you some kind of marketing collateral, requests further information, or in our case, requests a demo. Giving a product demo every time someone fills out your landing page may not be logistically feasible so perhaps it's time to think outside of the box.

By creating a demo video you can streamline your sales process, save money, and automate your lead generation initiatives. But where does the demo video go? You still want to capture prospect and lead information so just placing it on your website won't do. That's where this landing page design comes in. Not only does this design and functionality streamline your sales process, you still collect lead data, and you can give thousands of demos a minute without having to pool any internal resources to do so. Enjoy.

Below is the HTML, CSS, and JavaScript required.

Step 1 - video-demo-lp.html

Copy and paste the code below into video-demo-lp.html

<section class="container">
  <div class="row">
    <div class="col-md-7">
      <h2 class="no-margin-top h1 center-small">See Solodev in action.</h2>
      <p class="bottom-pad">Solodev is an industry-leading web experience software solution that empowers organizations with total design freedom.</p>
      <div class="text-center overlaycontainer vimeo-video widescreen bottom-buffer">
        <div class="overlay">
          <p>COMPLETE THE FORM TO VIEW DEMO</p>
        </div>
        <div class="mboxDefault" style="visibility: visible; display: block; user-select: auto;">
          <iframe src="https://player.vimeo.com/video/205597179" width="500" height="281" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
        </div>
      </div>
    </div>
    <div class="col-md-5">
      <div class="form-stacked shade-brand">
        <div data-track-position="requestademomasterform">
          <div class="master_form_container">
            <form action="/" accept-charset="UTF-8" name="demo-request" class="validate-form" id="demo-request-form" novalidate="novalidate">
              <div class="master_form inline-form">
                <h3 class="no-margin">Fill out the form to get instant access to an exclusive video demo.</h3>
                <div class="row">
                <!--First Name-->
                  <div class="form-group col-sm-6">
                    <label for="first_name" class="control-label">First Name</label>
                    <input id="first_name" class="required form-control noSpace" title="Please enter your first name" placeholder="First Name" name="first_name" type="text" value="" aria-required="true">
                  </div>
                  <!--Last Name-->
                  <div class="form-group col-sm-6">
                    <label for="last_name" class="control-label">Last Name</label>
                    <input id="last_name" class="required form-control noSpace" title="Please enter your last name" placeholder="Last Name" name="last_name" type="text" value="" aria-required="true">
                  </div>
                </div>
                <div class="row">
                  <!--Business Email-->
                  <div class="form-group col-sm-6">
                    <label for="email" class="control-label">Business Email</label>
                    <input id="email" class="email required form-control" title="Please enter a valid email" placeholder="Business Email" autocomplete="off" name="email" type="email" value="" aria-required="true">
                  </div>
                  <!--Phone-->
                  <div class="form-group col-sm-6">
                    <label for="phone" class="control-label">Phone</label>
                    <input id="phone" class="phone required form-control" title="Please enter a valid phone number" placeholder="Phone" name="phone" type="tel" value="" aria-required="true">
                  </div>
                </div>
                <div class="row">
                <!--Company-->
                  <div class="form-group col-sm-6">
                    <label for="company" class="control-label">Company</label>
                    <input id="company" class="required form-control" title="Please enter a valid company" placeholder="Company" autocomplete="off" name="company" type="text" value="" aria-required="true">
                  </div>
                  <div class="form-group col-sm-6">
                    <label for="title" class="control-label">Title</label>
                    <input id="title" class="required form-control" title="Please enter a valid job title" placeholder="Title" autocomplete="off" name="title" type="text" value="" aria-required="true">
                  </div>
                </div>
                <div class="row">
                  <div class="form-group col-sm-6">
                  <label for="department" class="control-label">Department</label>
                  <select id="department" title="Please enter a valid department" class="required form-control" name="department" aria-required="true">
                    <option value="" selected="selected">Department</option>
                    <option value="CEO/C-Suite">CEO</option>
                    <option value="Customer Service and Support">Customer Service</option>
                    <option value="Engineering/Product Development">Product Development</option>
                    <option value="Finance">Finance</option>
                    <option value="HR">HR</option>
                    <option value="IT">IT</option>
                    <option value="Marketing">Marketing</option>
                    <option value="Operations">Operations</option>
                    <option value="Sales and Business Development">Business Development</option>
                    <option value="Other">Other</option>
                  </select>
                </div>
                <div class="form-group col-sm-12">
                  <label class="show auto-demo-checkbox"><input id="autoDemoCheckbox" checked="checked" name="custom_demo_request" type="checkbox" value="1">&nbsp;&nbsp; Customize your demo. </label>
                </div>
                <div class="form-group col-sm-6 top-buffer mainformsubmit">
                  <div class="mboxDefault" style="visibility: visible; display: block; user-select: auto;">
                    <button class="btn btn-primary" id="masterformsubmit" href="/">Watch Now</button>
                  </div>
                </div>
              </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Step 2 - video-demo-lp.css

Download the CSS below and include it in your web page

video-demo-lp.css

Step 3 - Add the includes below to your web page

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="video-demo-lp.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

In this tutorial we showed you how to craft the next generation of demo request landing pages! Take the design and make it your own!

Download from Github

Share on Facebook Tweet It

Matthieu McClintock
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev