You will need some CSS skills to get your form looking like the link you shared. Might be good chance to learn CSS or alternatively you may need to consider hiring someone with suitable skills.
In this case I would use something like the following:
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;
}
Added via Child Theme or use custom CSS plugin.
Please don’t just copy and paste the above code and then post saying “It doesn’t work”. What I’ve given you is a very rough guide. You will almost certainly need to change it to suit your WP theme and more importantly you will need to understand what you are doing.
See Styling Contact Form for a general explanation of styling CF7 forms using CSS.
