Free Trial Sign Up Page Template

This HTML & CSS template helps you to create a “Free Trial Sign-up” page on your website. It comes with a background image, a title, a description, a form with input fields for first name, last name, email, and password, a submit button, and terms of service.

You can utilize this code for your website’s sign-up page to offer a visually appealing and user-friendly experience. The template ensures responsiveness across devices. Moreover, you can customize the signup form with additional CSS according to your website’s design.

How to Create a Free Trial Sign-Up Page

1. First, create the HTML structure for the signup page as follows. Customize the title, description, and form fields to align with your website’s branding. Replace demo text and images with your own content. Furthermore, add an action URL to your form where you want to collect signup data on your server.

<div class="container">
  <div class="right-section">
    <div class="right-section-wrapper">
      <h1 class="title">
        Learn to code by watching others
      </h1>
      <h3 class="description">
        See how experienced developers solve problems in real-time. Watching tutorials is great, but understanding how developers think is invaluable.
      </h3>
    </div>
  </div>

  <div class="left-section">
    <div class="left-section-wrapper">
      <div class="disclaimer">

        <span class="disclaimer-highlight">
          Try it free for 7 days!
        </span>
        <span class="disclaimer-text">
          *$20/month thereafter.
        </span>
      </div>
      <div class="form">
        <form autocomplete="off" action="#your-url">
          <input type="text" class="first-name" placeholder="First Name" autocomplete="off" />
          <input type="text" class="last-name" placeholder="Last Name" />
          <input type="email" class="email" placeholder="Email Address" />
          <input type="password" class="password" placeholder="Password" />
          <button class="form-btn">
            <span class="form-btn-text">CLAIM YOUR FREE TRIAL</span>
          </button>
          <p class="terms">
            By clicking the button, you are agreeing to our
            <span class="terms-highlight">
              Terms and Services
            </span>
          </p>
        </form>
      </div>
    </div>
  </div>
</div>

2. Now, add the following CSS code to your project. Modify the CSS rules to match your site’s color scheme or layout preferences. Tweak the styling parameters to achieve a cohesive look and feel.

@import url(https://fonts.googleapis.com/css?family=Poppins:400, 500, 600, 700);

*,
*::before,
*::after {
  box-sizing: border-box !important;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Poppins", sans-serif;
  height: 100vh;
  width: 100vw;
  background-image: url("https://github.com/panda-satyabrata/hosting-images/blob/main/singup_form_bg_codepen.png?raw=true") !important;
/*   background-repeat: no-repeat; */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.container {
  display: flex;
  flex-direction: row;
/*   flex-wrap: nowrap; */
}

.right-section {
  flex: 1 1 50%;
}

.left-section {
  flex: 1 1 50%;
}

.right-section-wrapper {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 10% 0 20%;
  color: #fff;
}

.title {
  font-size: 48px;
  font-weight: 700;
  padding-bottom: 32px;
}

.description {
  font-weight: 500;
  padding-bottom: 30px;
}

.left-section-wrapper {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.disclaimer {
  background-color: rgb(96, 85, 165);
  width: 80%;
  padding: 10px;
  text-align: center;
  color: white;
  align-content: center;
  border-radius: 8px;
  box-shadow: 0px 5px rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
}

.disclaimer-text {
  font-size: 12px;
  font-weight: 400;
}

.disclaimer-highlight {
  font-weight: 700;
  font-size: 12px;
}

.form {
  background: #fff;
  display: flex;
  width: 80%;
  flex-direction: column;
  padding-top: 32px;
  border-radius: 8px;
  box-shadow: 0px 5px rgba(0, 0, 0, 0.2);
}

.form input {
  width: 80%;
  padding: 16px 25px 16px 25px;
  margin-bottom: 20px;
  margin-left: 10%;
  margin-left: 10%;
  align-self: center;
  border: 1px solid rgb(185, 182, 211);
  border-radius: 6px;
  font-weight: 600;
  color: #000000;
}

.form input:focus {
  border: 1px solid black;
}

.form button {
  width: 80%;
  padding: 16px 25px 16px 25px;
  margin-bottom: 20px;
  margin-left: 10%;
  margin-left: 10%;
  align-self: center;
  border-radius: 6px;
  color: white;
  background: rgb(56, 204, 140);
  border: none;
}

.form-btn:focus {
  cursor: pointer;
}

.form p {
  width: 80%;
  font-size: 10px;
  padding: 0 25px 16px 25px;
  text-align: center;
  margin-bottom: 20px;
  margin-left: 10%;
  margin-left: 10%;
}

.terms {
  color: rgb(185, 182, 211);
}

.terms-highlight {
  color: rgb(255, 122, 122);
  font-weight: 600;
}

@media screen and (max-width: 900px) {
  .disclaimer {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
  }

  .form {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    flex-direction: column;
  }

  .form input {
    width: 80%;
    padding: 16px;
    margin-left: 10%;
    margin-left: 10%;
    align-self: center;
  }

  .form button {
    width: 80%;
    padding: 16px;
    margin-left: 10%;
    margin-left: 10%;
    align-self: center;
  }

  .form p {
    width: 80%;
    margin-left: 10%;
    margin-left: 10%;
  }
}

@media screen and (max-width: 600px) {
  body {
    background-image: url("https://github.com/panda-satyabrata/hosting-images/blob/main/singup_form_bg_mobile_codepen.png?raw=true");
  }

  .container {
    flex-direction: column;
  }

  .right-section-wrapper {
    height: 60vh;
    padding: 0 10% 0 10%;
  }

  .title {
    font-size: 42px;
    padding-top: 40px;
    padding-bottom: 32px;
  }

  .description {
    padding-bottom: 0px;
  }

  .left-section-wrapper {
    height: 65vh;
  }

  .disclaimer {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
  }

  .form {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 60px;
    flex-direction: column;
  }

  .form input {
    width: 80%;
    padding: 16px;
    margin-left: 10%;
    margin-left: 10%;
    align-self: center;
  }

  .form button {
    width: 80%;
    padding: 16px;
    margin-left: 10%;
    margin-left: 10%;
    align-self: center;
  }

  .form p {
    width: 80%;
    margin-left: 10%;
    margin-left: 10%;
  }
}

@media screen and (max-width: 400px) {
  .right-section-wrapper {
    height: 75vh;
  }
  
    .title {
    padding-top: 20px;
  }
}

That’s all! hopefully, you have successfully integrated this “Free Trial Sign-up” page template on your website. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.