To change the style of your CF7 forms to look like what you have in the image, you would need to edit the CSS style sheets used by your WordPress theme. This means that you need to be proficient in coding HTML and CSS.
See Styling Contact Form for a general explanation of styling CF7 forms using CSS.
There is a link at the bottom of the page to a comprehensive and detailed article on Styling Contact Form 7 Forms
To “put some fields next to each other” I use Ordered List elements to display multiple fields on single line.
HTML:
<ol>
<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.
