Single Row Email Form

  • Resolved joshdraha

    (@joshdraha)


    9 years, 10 months ago

    I’m trying to get 3 input fields and a submit button in 1 row in a contact form but I can’t for the life of me figure out what is wrong with the coding.

    My website is: https://northstarproviders.com/registration/

    The first field should be: NAME, the second: EMAIL, the third: PHONE NUMBER, and the last field should be: SUBMIT>

    The code I have in place right now in Contact Form 7 is:

    <div class="form-inline form-register form-register-small">
	<div class="form-group">
		  [text* name class:form-control class:fullname placeholder "Name"]
	</div>

	<div class="form-group">
		[email* email class:form-control class:email placeholder "Email"]
	</div>

     <div class="form-group">
		  [text* phone class:form-control class:fullname placeholder "Phone"]
	</div>

	<div class="form-group submit-wrap">
		[submit  class:btn class:btn-primary class:btn-md "Submit"]
	</div>
</div>

    Any help would be greatly appreciated.

    https://www.ads-software.com/plugins/contact-form-7/

Viewing 6 replies - 1 through 6 (of 6 total)

  • Same here. Have you realized how to work it out?

    Thread Starter joshdraha

    (@joshdraha)

    In the CSS change the percentages to:

    .form-register-small .form-group .wpcf7-form-control.fullname { width:25%; }
.form-register-small .form-group .wpcf7-form-control.email { width:25%; }
.form-register-small .form-group .wpcf7-form-control.password { width:25%; }

    I use Ordered List elements to display multiple fields on single line.

    HTML:

    <ol class="singleline">
<li> <label for="cf7-phone">Phone</label> [text cf7-phone 15/]</li>
<li> <label for="cf7-mobile">Mobile</label> [text cf7-mobile 15/]</li>
</ol>

    Added to Form section of CF7 interface. Labels are added for improved accessability.

    CSS:

    .wpcf7-form .singleline ol {
list-style: none;
margin: 0;
}

.wpcf7-form .singleline li{
display: inline-block;
float: left;
margin-right: 10px;
padding-right: 10px;
}

    Add via Child Theme or use custom CSS plugin.?

    .form-register-small .form-group .wpcf7-form-control.fullname { width:25%; }
    .form-register-small .form-group .wpcf7-form-control.email { width:25%; }
    .form-register-small .form-group .wpcf7-form-control.password { width:25%; }

    Hi @joshdraha. Thanks for the reply. Besides, your code like shown quoted, doesn’t align the fields in the same line. Am I missing something on html?

    For @buzztone, thank you very much. Your code actually works, but the left indent for the fields are not what I need, because they aren’t aligned with the left margin of the rest of the form. I guess the reason we are putting everything inside a list.

    Best Regards to both of you.

    The best way I found to solve this is as follows:

    1 – CSS:
    Find these on your CSS:
    .wpcf7-form-control-wrap{ display:block !important; }
    .wpcf7-form-control{
    display: block;
    width: 100%; }

    Change to this:
    .wpcf7-form-control-wrap{ display:inline-block !important; }

    .wpcf7-form-control{
    display: inline-block;
    width: 100%; }
    2 – WP:
    Simple put the slugs in the same line, like this:
    <p>Telefone:
    [tel tel-561 class:tel_ddd] [tel tel-155 class:tel_phone]</p>

    And, Voillá!

    Best Regards.

    Hi djijoecustodio!

    I just did what you said and it’s the best solution i’ve found for this, except that the submit button is at the bottom of the form, creating a third line and using the whole widht.

    Visually, it looks like this:

    [Name ] [E-mail ] [Telephone ]
    [Select one ] [Select one ]
    [Submit button uses the whole with of the form]

    But I want it to look like this (2 lines):

    [Name ] [E-mail ] [Telephone ]
    [Select one ] [Select one ] [Submit]

    Any idea to change submit button size?

    Thanks!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Single Row Email Form’ is closed to new replies.