JSFiddle - React, Tailwind, and code Playground
by kougiland
HTML
<div class="feedback_form">
<header>
<h1>Tell me what you really think</h1>
</header>
<form id="feedback_form" action="/beta/feedback" method="post">
<p>Thanks for trying the new Vimeo. This is your chance to share your thoughts, ask us questions, and let us know about bugs. Thanks again - we couldn't do this without you!</p>
<p class="txt_sm">When describing technical issues, please be as specific as possible, and include the URL.</p>
<select name="type">
<option value="choose" disabled="disabled">Please choose one…</option>
<option value="thought">I want to share my thoughts (praise + criticism)</option>
<option value="question">I have a question</option>
<option value="bug">I found a bug</option>
</select>
<textarea name="feedback" placeholder="Write your feedback here. We really appreciate your help!"></textarea>
<input class="sendemail" type="submit" class="btn iconify_next_a" value="Send My Feedback">
<input type="hidden" id="submitted" name="token" value="true"></form>
</div>
<div class="contact-wrapper">
<h3>Hello! Why are you contacting me today?</h3>
<?php if(isset($emailSent) && $emailSent == true) { ?>
<div class="thanks">
<p>Thanks, your email was sent successfully.</p>
</div>
<?php } else { ?>
<?php the_content(); ?>
<?php if(isset($hasError) || isset($captchaError)) { ?>
<p class="error">Sorry, an error occured.<p>
<?php } ?>
<form action="<?php the_permalink(); ?>" id="contactForm" method="post">
Enter your personal details below, fill out the form and submit it .
<p class="cc">
<label for="contactName"></label>
<input class="contactdata" type="text"...
CSS
.feedback_form form input, .feedback_form form textarea {
font-size: 1em;
margin: 10px 0px 0px 0px;
padding: 8px 6px;
border: 1px solid #D4D4D8;
color: #AAA;
background: #F6F6F6;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}