How to get text on the same line as input fields?

You will probably need to start customising your theme’s CSS – possibly via a child theme or a custom CSS plugin.

Okay cool, thanks for your reply! don’t suppose anyone knows what code I may need to add into the CSS to specify that I want it all on one line? Sorry the coding is all a bit mind blowing to me!

Many thanks for any help offered.

Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.

RE: how to get the text ie name, address on the same line as the input box?

If you are following the sample form setup by default in the plugin, you would to remove the <line break> characters.

DEFAULT:

<p>Your Name (required)<br />
    [text* your-name] </p>
...
<p>[submit "Send"]</p>

ON SAME LINE:

<p>Your Name (required)
    [text* your-name] </p>
....
<p>[submit "Send"]</p>

Done in Form section of CF7 interface.

To personally go a little further and add <label> tags for improved accessability.

WITH LABEL:

<p><label for="your-name">Your Name (required)&nbsp</label> [text* your-name] </p>
<p><label for="your-email">Your Email (required)&nbsp</label> [email* your-email] </p>
....
<p>[submit "Send"]</p>

Added to Form section of CF7 interface.

RE: amend the overall layout

To change the style of your CF7 forms you would need to edit the CSS style sheets used by your WordPress theme.

See Styling Contact Form for a general explanation of styling CF7 forms using CSS. If you are not familiar with CSS, this page also includes some links to where you can learn CSS.

The most common and preferred method is to create a Child Theme and make any necessary additions to the CSS in the child themes style.css only, rather than directly in the themes styles.css. That way you don’t loose your changes when you update the theme.

Use Firebug or Chrome Dev Tools to examine the HTML and CSS of your CF7 form in detail. Once you understand how the HTML and CSS is configured in your CF7 form, you should be able to see the CSS changes you need to change the appearance of the form to suit your requirements.

Also good idea to target CSS classes & ids used within your CF7 forms only, so that your CSS changes don’t inadvertantly effect other elements on your website.

If you are uncomfortable editing CSS style sheets you may prefer to use a custom CSS plugin like My Custom CSS.

Great thank you so much for your advice, I will try it all out now!

i removed the page break between first and last name but they still appear in different lines

https://bubbletrouble.ae/?page_id=2

You should use a table to have a nice layout :

`<table border=”0″>
<tr>
<td>Name :</td>
<td> [text Form1_name]</td>
</tr>
<tr>
<td>Email :</td>
<td>[email Form1_email]</td>
</tr>
</table>

@o.moreau – Nowadays using HTML Tables to control form appearance is widely considered to be an ineffective, outdated and inappropriate solution. Instead use Firebug to find suitable CSS changes.

At the simplest level; what the guy said about removing the <br> tag.

Also be aware that <p> tags will start a new line also, so remove those if need be.

Of course you know when entering text through WordPress CMS hitting enter applies a break in the markup so make sure your label and field are on the same line, use   if required.

That will get your label and field positioned on the same line.

Then apply your markup and styling to suit.

Thanks.