Home>Support>How to put 3 fields in a row in contact form 7

How to put 3 fields in a row in contact form 7

By Eli Langley, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

Hi I’ve been searching online for the coding on how to make 3 drop down fields on a contact form to go in a row. I’d like these 3 all on one row.
Here is the code I have now.

Nights
[select Nights “7” “14” “21”]
Adults
[select Adults “1” “2” “3” “4”]
Children
[select Children “1” “2” “3” “4”]

URL: http://217.199.187.65/tregowanstives.co.uk/

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 2 months ago Private Message - Eli Langley

    This is a private message.

  2. 9 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Hi Elise

    Thanks for reaching out. Let me take a look and come back to you on this in a bit.

  3. 9 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    You could perhaps do this using tables:

    <table>
<tr>
<td>[select Nights "7" "14" "21"]</td>
<td>[select Adults "1" "2" "3" "4"]</td>
<td>[select Children "1" "2" "3" "4"]</td>
</tr>
</table>

    If you can let me know the rest of the form we could help with the complete HTML.

  4. 9 years, 2 months ago Eli Langley

    Thanks, that kind of worked but it hid the headings Nights / Adults / Children.

    The whole contact form code is

    Your Name (required)
    [text* your-name]

    Your Email (required)
    [email* your-email]

    Telephone
    [text your-telephone]

    Arrival date
    [date* date-209]

    [checkbox Selectanapartment “Apartment 1” “Apartment 2” “Apartment 3”]

    [select Nights “7” “14” “21”]
    [select Adults “1” “2” “3” “4”]
    [select Children “1” “2” “3” “4”]

    Your Message
    [textarea your-message]

    [submit “Send”]

  5. 9 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Let’s try the following:

    <table>

	<tr>
		<td>Your Name (required)</td>
		<td> </td>
		<td> </td>
	</tr>

	<tr>
		<td>[text* your-name]</td>
		<td> </td>
		<td> </td>
	</tr>

	<tr>
		<td>Your Email (required)</td>
		<td> </td>
		<td> </td>
	</tr>		

	<tr>
		<td>[email* your-email]</td>
		<td> </td>
		<td> </td>
	</tr>

	<tr>
		<td>Telephone</td>
		<td> </td>
		<td> </td>
	</tr>

	<tr>
		<td>[text your-telephone]</td>
		<td> </td>
		<td> </td>
	</tr>	

	<tr>
		<td>Arrival date</td>
		<td> </td>
		<td> </td>
	</tr>

	<tr>
		<td>[date* date-209]</td>
		<td> </td>
		<td> </td>
	</tr>	

	<tr>
		<td>[checkbox Selectanapartment "Apartment 1" "Apartment 2" "Apartment 3"]</td>
		<td> </td>
		<td> </td>
	</tr>	

	<tr>
		<td>Nights</td>
		<td>Adults</td>
		<td>Children</td>
	</tr>

	<tr>
		<td>[select Nights "7" "14" "21"]</td>
		<td>[select Adults "1" "2" "3" "4"]</td>
		<td>[select Children “1” “2” “3” “4”]</td>	
	</tr>

	<tr>
		<td>Your Message</td>
		<td> </td>	
		<td> </td>	
	</tr>

	<tr>
		<td>[textarea your-message]</td>
		<td> </td>	
		<td> </td>	
	</tr>	

	<tr>
		<td>[submit "Send"]</td>
		<td> </td>	
		<td> </td>		
	</tr>	

</table>
  6. 9 years, 2 months ago Eli Langley

    Thanks but that didn’t work as it only showed the ‘Nights’ – not the adults & children. It also spaced it out too much and showed table outlines & gaps.

  7. 9 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Once the structure is there we can fix the little layout issues. Please, can I view this. I wasn’t able to login with the provided details. Can you confirm a link? Thanks.

  8. 9 years, 2 months ago Private Message - Eli Langley

    This is a private message.

  9. 9 years, 2 months ago Eli Langley

    Sent thanks – it’s ‘Contact form all 3’ that Im working on.

    Also I’m trying to get it to send to different email address depending on whether they choose ‘Apartment 1, 2 or 3’ so you’ll see I put in the code:
    [checkbox Selectanapartment “Apartment 1|[email protected]” “Apartment 2|[email protected]” “Apartment 3|[email protected]”]

    This did work except that it didn’t tell them which apartment they had chosen. The email came back to the correct email address from the testing but the content said: Apartment: [email protected] when it should have said Apartment: apartment 1

  10. 9 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    All fixed now layout wise.

    I’m not quite sure why the email would come back like that. I tried testing now but the form doesn’t seem to send. Please, could you take a look.

  11. 9 years, 2 months ago Eli Langley

    Thank you, all working & looks good. Although it’s all very spread out, do you know how to make it so that there aren’t such big gaps between each – ie between ‘Name’ and box etc.

    Now I just got to figure out how to get it to send to different email addresses, depending on which apartment they choose. Ive got it partly working in that if I choose apartment 1 it goes to the right address & if I choose apartment 2 or 3 it goes to the right address, but if I choose apartment 1, 2 and 3 I want it to go to both emails. Any ideas. Here’s my code:
    I’ve used: >[checkbox* apartment “Apartment 1|Apartment1” “Apartment 2|Apartment2” “Apartment 3|Apartment3”]
    and entered [apartment] in the Mail ‘To’ part. It works except even if I tick all 3

  12. 9 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Form looks correct now. I’ve add CSS. For reference, we put Contact Form 7 in a table and then added the following Custom CSS:

    .entry-content .wpcf7 table {
  border: none;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 14px;
  line-height: normal;
  width: 100%;
}

.entry-content .wpcf7 table tr {
  display: flex;
  align-items: stretch; 
}

.entry-content .wpcf7 table td {
  border: none;
  line-height: normal;
  padding-bottom: 0;
  text-align: left;
}

.entry-content .wpcf7 table td span {
  display: block;
  margin-bottom: 5px;
  overflow: auto;
}

span.wpcf7-list-item {
  display: inline-block !important;
  margin-right: 0.5em;
  margin-left: 0;
}

span.wpcf7-list-item-label {
  display: inline-block !important;
  vertical-align: top;
}

span.wpcf7-form-control-wrap span {
  margin-bottom: 0 !important;
}
  13. 9 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Sorry, not sure re: sending all three apartments to all email addresses. Another idea might be to use Gmail or whatever your service is and setup filters to forward emails to different parties based on the subject or other contents.

  14. 9 years, 2 months ago Eli Langley

    Thank you.

  15. 9 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    For sure. Glad we could help.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More