You can create the form using a plugin called contact form 7 (https://en-gb.wordpress.org/plugins/contact-form-7/).
The rest is css styling.
.form-contact .inputs-wrapper {
border: 2px solid rgba(0,0,0,0.2);
border-radius: 25px;
margin-bottom: 24px;
}
.form-contact input {
border-bottom: 2px solid rgba(0,0,0,0.2);
background: none;
border: none;
box-shadow: none;
font-family: Open Sans, "Helvetica Neue", Helvetica, Arial, sans-serif;
width: 100%;
padding: 16px;
}
You know there are plugins for this right? For example Contact Form 7
I am aware about that. But the problem is that I am unable to get it designed that way. Is there a way I can get CSS Code for that specific form so I paste it and my form looks like the same?
Yes, you can adjust the border radius to make those round corners, use a plugin to make it work, after that style it up with CSS codes.
More about corner radius see : http://www.w3schools.com/css/css3_borders.asp
@550
Sorry. I missed your comment. I tried your method but it didn’t worked out. Here’s the link:
http://ninjacreativity.com/contact-us/
As you can see the send button is round, the border is invisible at this point. You should adjust this to make it visible
This is some of the code from the website you told us about:
[Large code excerpt removed by moderator per forum rules. Please use the pastebin for all large code excerpts. It works better anyway.]
From what i understand you do know some HTML/CSS so.. Happy digging? 😉
From what i understand you know a bit about HTML/CSS
This is the css i can find:
[Large code excerpt removed by moderator per forum rules. Please use the pastebin for all large code excerpts. It works better anyway.]
You know some about html/css right?
HTML:
<form name="" action="/contact/#wpcf7-f59-p92-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="59">
<input type="hidden" name="_wpcf7_version" value="4.0.1">
<input type="hidden" name="_wpcf7_locale" value="en_US">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f59-p92-o1">
<input type="hidden" name="_wpnonce" value="155ce265d5">
</div>
<div class="inputs-wrapper">
<span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Your Name"></span><br>
<span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="Your Email"></span><br>
<span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="Your Message"></textarea></span>
</div>
<p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit"><img class="ajax-loader" src="http://pivotwp.wpengine.com/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." style="visibility: hidden;"></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form>
