An engaging “Call To Action” (CTA) section is vital for increasing conversions, whether you’re offering a free trial, discounts, or services. In this article, we’ll explore how to design an attractive, functional CTA section similar to the one displayed in the image. We’ll provide you with a complete coding solution and explanations.
Key Features of the Design:
- Eye-catching Headline: The title grabs attention with an offer: “Get your first meal for free!”
- Concise and Persuasive Copy: The text explains the value of the offer in a few lines.
- Simple Input Fields: Clear labels for the name, email, and a dropdown to gather information about how users found the service.
- Prominent Button: A bold “Sign up now” button encourages action.
- Visual Appeal: A vibrant color scheme and an inviting image complement the text.
Step-by-Step Coding Solution
Here’s how to implement this CTA section using HTML and CSS.
HTML Code
code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CTA Section</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section class="cta-section">
<div class="cta-content">
<h1>Get your first meal for free!</h1>
<p>Healthy, tasty, and hassle-free meals are waiting for you. Start eating well today. You can cancel or pause anytime. And the first meal is on us!</p>
<form class="cta-form">
<label for="full-name">Full Name</label>
<input type="text" id="full-name" name="full-name" placeholder="John Smith" required>
<label for="email">Email address</label>
<input type="email" id="email" name="email" placeholder="me@example.com" required>
<label for="referral">Where did you hear from us?</label>
<select id="referral" name="referral" required>
<option value="" disabled selected>Please choose one option:</option>
<option value="social-media">Social Media</option>
<option value="friends">Friends</option>
<option value="ads">Advertisements</option>
<option value="other">Other</option>
</select>
<button type="submit">Sign up now</button>
</form>
</div>
<div class="cta-image">
<img src="meal-image.jpg" alt="Enjoying a meal">
</div>
</section>
</body>
</html>
CSS Code
code/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
}
.cta-section {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #ffa500; /* Vibrant orange color */
color: #fff;
}
.cta-content {
max-width: 50%;
}
.cta-content h1 {
font-size: 2rem;
margin-bottom: 10px;
}
.cta-content p {
font-size: 1rem;
margin-bottom: 20px;
line-height: 1.5;
}
.cta-form {
display: flex;
flex-direction: column;
gap: 10px;
}
.cta-form label {
font-weight: bold;
}
.cta-form input,
.cta-form select {
padding: 10px;
font-size: 1rem;
border: none;
border-radius: 5px;
}
.cta-form button {
padding: 10px;
font-size: 1rem;
color: #ffa500;
background-color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
}
.cta-form button:hover {
background-color: #ffcc66;
}
.cta-image img {
max-width: 100%;
border-radius: 10px;
}
Explanation of the Code:
- HTML Structure:
- The
sectionelement wraps the entire CTA block. - Inside the section, two
divelements separate the text content (cta-content) from the image (cta-image). - The form collects user inputs: full name, email, and referral source.
- The
- CSS Styling:
- The flexbox layout ensures the text and image are aligned side by side.
- Vibrant orange is used for the background (
#ffa500), making the section pop. - The button styling contrasts with the background to draw attention.
- Responsive input fields and a dropdown ensure ease of use.
Completed “Call To Action”
By implementing the above code, you can create a visually appealing, functional, and effective CTA section for your website. Remember, the goal of any CTA is to make it as easy as possible for users to take the desired action—in this case, signing up for a free meal.