You are currently viewing How to create inline form with a drop-down | Contact Form 7 tutorial

How to create inline form with a drop-down | Contact Form 7 tutorial

So far you have already heard about contact forms. Every website needs it. Contact form is a place on the contact page where visitors can send some queries for the business owner or some questions connected to services, appointments, and so on. In other words via contact form clients or ordinary visitors can contact you.

Besides contact forms, there are subscription forms. For example, with them, you can build a subscriber list and link it with services like MailChimp or Mailerlite.

In this tutorial, I’m going to create an inline contact form with a drop-down with the Contact Form 7 free plugin. Let’s imagine that our client is a law office. One of the pages will have a contact form where a future client can send a query to make an appointment. The length of an appointment in my case will be 30, 60, or 90 minutes. You can set other values as well. Furthermore, you can use this for doctor appointments or something else.

With that said, let’s get down to the business, shall we?

Setup environment

Setup environment first by installing the Contact Form 7 plugin from the WordPress repository. This is one of the most used plugins, also free. Don’t forget to activate it. From your dashboard click on “Contact” in the sidebar, then create a new form.

Adding HTML code inside the Contact form 7

Give it the name first for the sake of this tutorial this is an “inline form with dropdown 2”. Delete all the code, and past it main. The first division with class “custom-form” wraps the other four divisions, three for fields and one for the submit button. The main idea is to flex-box properties on the main division to affect child division’s inside. Let’s go further, every field has its own division with a specific class: name, email, and services. Also, the button has it too. Outside of the main div with class “custom-form” is a paragraph of custom text.

<div class="custom-form">
  <div class="name">
    <label> Your name <span class="astrisk">*</span> </label>
    [text* your-name] 
  </div>
  <div class="email">
    <label> Your email <span class="astrisk">*</span></label>
    [email* your-email] 
  </div>
  <div class="services">
    <label> Choose service <span class="astrisk">*</span>      
    </label>
    [select* menu-994 "30 minutes" "60 minutes" "90 minutes"]
  </div>
  <div class="button-sumbit">
    [submit "Submit"]
  </div>
</div>
<p class="custom-text">Fields with <span class="astrisk">*</span> are required.</p>

Adding CSS for styling

In the beginning, I have added a left and right padding for all child divisions. Then, we have a flex-box properties for main division (display: flex; justify-content: center; align-items: center;). Don’t forget to add “flex-wrap: wrap;” otherwise responsiveness doesn’t work.

Next, I have added margin-top for fields with class “wpcf7-text” and “wpcf7-select”. Don’t forget to target the main division because if you have multiple forms on your website rules will be applied to all of them. Instead, we want changes only on this form. Those classes you can find with the inspect tools which every web browser has.

After that, divisions with classes “name” and “email” contain the exact input fields. I gave them a width of 300px. Almost the same goes for the drop-down field, only 280px in width. If you want to target this field you need to type “custom-form .menu-994 select”. Still, if you have more than one drop-down “menu-994” will be different. Keep that in mind.

You can follow my YouTube channel. Subscribe now, I’m literally about to hit one thousand subscribers. If you feel that this is for you help me to get there.

Next, a few properties I have assigned for the button in the fourth child division. Those are margin-top, width, and background color. Don’t forget to add class “wpcf7-submit” and class of the main div before that. Beneath that, we have a hover state with opacity for our button.

Also, I have excluded the ajax-loader and changed the border for output response. In our HTML code, I suppose you already saw span with class “asterisk” in labels for each field. The color for that is “#e3872d”. The same goes for the paragraph at the bottom. Furthermore, that paragraph has a class “custom-text” and properties for it are text-align: center; font-size: 12px; margin-top: 15px !important; .

.custom-form div {
	padding: 0 10px;
}
/*Main Division*/
.custom-form {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100% !important;
	flex-wrap: wrap;
}
.custom-form .wpcf7-text,
.custom-form .wpcf7-select {
	margin-top: 10px;
}
.custom-form .name {
	width: 300px;
}
.custom-form .email {
	width: 300px;	
}
.custom-form .menu-994 select {	
	width: 280px;
	margin-top: 8px;
	padding: 8px 0 5px 5px;
	border-radius: 3px;
}
.custom-form .wpcf7-submit {
	margin-top: 35px;
	width: 240px;
	background-color: #e3872d;
}
.custom-form .wpcf7-submit:hover {
	opacity: 0.8;	
	background-color: #e3872d;	
}
.custom-form .ajax-loader {
	display: none;
}
.wpcf7-response-output {
	border: none;
	font-weight: bold;
}
.astrisk {
	color: #e3872d;	
}
.custom-text {
	text-align: center;
	font-size: 12px; 
	margin-top: 15px !important;
}
.wpcf7-response-output {
	border-color: transparent !important;
	border-radius: 3px;	
}
/*Media queries*/
@media (max-width: 1271px) {
	.custom-form .name,
	.custom-form .email,
	.custom-form .services {
	   margin-top: -5px;
}
}
@media (max-width: 1011px) {
	.custom-form .wpcf7-submit {	
	width: 280px;
}
	.custom-form .services {
	   margin-top: 10px;
}
	.custom-form .wpcf7-submit {
	margin-top: 45px;	
}
}
@media (max-width: 663px) {
	.custom-form .name {
	margin-bottom: 20px;
}
	.custom-form .email {
		margin-bottom: 10px;
	}
}

For the end, we have media queries for different screen sizes. Check the code for yourself. After filming this tutorial, by the way, you can watch it on our channel, I saw room for a little more tweaking. So you can do it by yourself now when you know the basics from the video and this article. Maybe, later on, I will make that for you.

Nikola Nikolić

I'm more than 6 years in love with WordPress. I'm designing and creating websites using a vast number of Page builders like (Gutenberg, Elementor, Themify). I like to code from scratch with HTML, CSS, and JS. Now I'm learning custom WordPress themes. Additionally, I'm enjoying spending my free time reading epic fantasy books and modeling in Blender open-source software.