Hey guys, I need help making information taking boxs for my website and where to put them.
I want it to be something like what I have below but will need a few drop down menus and normal boxs. Any help? thanks.
{% form 'contact' %}
{% if form.posted_successfully? %}
<div class="successForm feedback">
<p>Thanks for contacting us! We'll get back to you as soon as possible.</p>
</div>
{% endif %}
{% if form.errors %}
<div class="errorForm feedback">
<!-- {{ form.errors.size }} or {{ form.errors | size }} -->
<p>Oops, sorry. We were unable to submit your inquiry because it contained {{ form.errors | size | pluralize: 'an error', 'a few errors' }}. Please correct the following and submit again:</p>
{% for field in form.errors %}
<p>The {{ field | capitalize | replace: 'Body', 'Message' }} field {{ form.errors.messages[field] }}.</p>
{% endfor %}
</div>
{% endif %}
<div id="contactFormWrapper">
<p>
<label>Your Name:</label><br/>
<input type="text" id="contactFormName" name="contact[name]" placeholder="John Doe" />
</p>
<p>
<label>Email:</label><br/>
<input type="email" id="contactFormEmail" name="contact" placeholder="[email protected]" />
</p>
<p>
<label>Phone Number:</label><br/>
<input type="telephone" id="contactFormTelephone" name="contact[phone]" placeholder="555-555-1234" />
</p>
<p>
<label>Message:</label><br/>
<textarea rows="15" cols="75" id="contactFormMessage" name="contact[body]" placeholder="Your Message"></textarea>
</p>
<p>
<input type="submit" id="contactFormSubmit" value="SEND" />
</p>
</div><!-- contactWrapper -->
{% endform %}
<style>
.contact-form {margin:1em 0}
.feedback {padding:0.5em 0.7em;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px}
.feedback p {padding:0.5em 0 !important;margin:0 !important}
.successForm {background:#BDE0A8;color:green}
.errorForm {background:#EEBDBD;color:red}
</style>
I want it to be something like what I have below but will need a few drop down menus and normal boxs. Any help? thanks.
{% form 'contact' %}
{% if form.posted_successfully? %}
<div class="successForm feedback">
<p>Thanks for contacting us! We'll get back to you as soon as possible.</p>
</div>
{% endif %}
{% if form.errors %}
<div class="errorForm feedback">
<!-- {{ form.errors.size }} or {{ form.errors | size }} -->
<p>Oops, sorry. We were unable to submit your inquiry because it contained {{ form.errors | size | pluralize: 'an error', 'a few errors' }}. Please correct the following and submit again:</p>
{% for field in form.errors %}
<p>The {{ field | capitalize | replace: 'Body', 'Message' }} field {{ form.errors.messages[field] }}.</p>
{% endfor %}
</div>
{% endif %}
<div id="contactFormWrapper">
<p>
<label>Your Name:</label><br/>
<input type="text" id="contactFormName" name="contact[name]" placeholder="John Doe" />
</p>
<p>
<label>Email:</label><br/>
<input type="email" id="contactFormEmail" name="contact" placeholder="[email protected]" />
</p>
<p>
<label>Phone Number:</label><br/>
<input type="telephone" id="contactFormTelephone" name="contact[phone]" placeholder="555-555-1234" />
</p>
<p>
<label>Message:</label><br/>
<textarea rows="15" cols="75" id="contactFormMessage" name="contact[body]" placeholder="Your Message"></textarea>
</p>
<p>
<input type="submit" id="contactFormSubmit" value="SEND" />
</p>
</div><!-- contactWrapper -->
{% endform %}
<style>
.contact-form {margin:1em 0}
.feedback {padding:0.5em 0.7em;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px}
.feedback p {padding:0.5em 0 !important;margin:0 !important}
.successForm {background:#BDE0A8;color:green}
.errorForm {background:#EEBDBD;color:red}
</style>
