- This topic has 5 replies, 2 voices, and was last updated 5 years, 11 months ago by
.
I am using the ‘coming soon’ demo content and wanting to edit the contact form 7 to have three boxes 1 for the name, 1 for mobile number, and 1 for email. However, something is not allowing each field to be a separate line. Instead, they are all on the same line bunched up(Please see attached screenshot). I am assuming this is CSS but I am unsure where to change it.
Ideally, I would like each field on a new line with the submit button on its own line as well underneath the fields.
Code for Contact Form
<div class=”sh-cf7-inline”>
[text* text-549 your-name placeholder “Enter your name”]
[tel* tel-151 your-number placeholder “Enter your mobile”]
[email* your-email placeholder “Enter your email”]
[submit “Register Interest”]
</div>Hi @FAdmin,
I hope you are well today and thank you for your question.
We can achieve this developing custom CSS code.
Could you please share me the page URL from your site where it is displaying so that i can help you to achieve it?
Best regards,
Shufflehound teamYou can achieve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
#page-container .sh-cf7-inline p { display: block; } #page-container .sh-cf7 form .wpcf7-submit { display: table; margin: 0 auto; }Thanks!
Last question how do I change the colour of the submit button for the form to – #5170ff.
Use below CSS code to change button color.
#page-container .sh-cf7 form .wpcf7-submit { background: #5170ff !important; }
