This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

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

Open 15 replies premiumthemetheme-vantage
Eli Langley
10 years ago · Last reply by Andrew Misplon 10 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.

Need fast email support? Get SiteOrigin Premium

Replies

15
  1. Eli Langley Private 10 years, 7 months ago

    This is a private message.

  2. Andrew Misplon Staff 10 years, 7 months ago

    Hi Elise

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

  3. Andrew Misplon Staff 10 years, 7 months ago

    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. Eli Langley 10 years, 7 months ago

    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. Andrew Misplon Staff 10 years, 7 months ago

    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. Eli Langley 10 years, 7 months ago

    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. Andrew Misplon Staff 10 years, 7 months ago

    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. Eli Langley Private 10 years, 7 months ago

    This is a private message.

  9. Eli Langley 10 years, 7 months ago

    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. Andrew Misplon Staff 10 years, 7 months ago

    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. Eli Langley 10 years, 7 months ago

    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. Andrew Misplon Staff 10 years, 7 months ago

    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. Andrew Misplon Staff 10 years, 7 months ago

    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. Eli Langley 10 years, 7 months ago

    Thank you.

  15. Andrew Misplon Staff 10 years, 7 months ago

    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.

Have a different question or issue?

Start New Thread