ArcHub - Contact Form Templates

Here are the contact forms we used in our demos!

You can copy the codes of the contact forms you like and add them to your site.

Form 1

Form 1 Template Code

<div class="row">
<div class="col-md-6">
<p style="margin: 0; color: rgba(0 0 0 / 0.3); font-size: 12px;">Your name</p>
[text* your-name placeholder akismet:author "Full name"]
</div>
<div class="col-md-6">
<p style="margin: 0; color: rgba(0 0 0 / 0.3); font-size: 12px;">Email address</p>
[email* your-email placeholder akismet:author_email "Email Address"]
</div>
<div class="col-md-6">
<p style="margin: 0; color: rgba(0 0 0 / 0.3); font-size: 12px;">(Optional)</p>
[tel your-phone placeholder "Phone number"]
</div>
<div class="col-md-6">
<p style="margin: 0; color: rgba(0 0 0 / 0.3); font-size: 12px;">Subject</p>
[text* your-subject placeholder "New Project"]
</div>
<div class="col-md-12">
<p style="margin: 0; color: rgba(0 0 0 / 0.3); font-size: 12px;">Your message</p>
[textarea* your-message 10x4 placeholder "Tell us about your project"]
</div>
<div class="col-md-12">
[acceptance acceptance-666 optional] I am bound by the terms of the Service I accept Privacy Policy [/acceptance]
</div>
<div class="col-md-12">
[submit "Send message"]
</div>
</div><br><br>

Form 2

Form 2 Template Code

<style>
@media (max-width:991px){.modal-b{border:1px solid #c6c6c6!important}}
.modal-b{
border:1px solid #c6c6c6;
}
.modal-bl-n{
border-left:none;
}
.modal-bb-n{
border-bottom:none;
}
.modal-p{
padding:20px 15px 15px;
}
.modal-text{
margin: 0; color: #4B4B4C; font-size: 14px;
}
</style>
<div class="row" style="margin: 0;">
<div class="col-md-6 modal-p modal-b modal-bb-n">
<p class="modal-text">Nice to meet you</p>
[text* your-name placeholder akismet:author "What's your name?"]
</div>
<div class="col-md-6 modal-p modal-b modal-bb-n modal-bl-n">
<p class="modal-text">Email address</p>
[email* your-email placeholder akismet:author_email "Enter your email address"]
</div>
<div class="col-md-6 modal-p modal-b modal-bb-n">
<p class="modal-text">Optional</p>
[tel* your-tel placeholder "Your phone number"]
</div>
<div class="col-md-6 modal-p modal-b modal-bb-n modal-bl-n">
<p class="modal-text">Subject</p>
[select* your-subject "How can I help you?" "Subject 1" "Subject 2" "Subject 3"]
</div>
<div class="col-md-6 modal-p modal-b modal-bb-n">
<p class="modal-text">Budget</p>
[select* your-budget "Your budget" "< $1000" "< $2000" "< $3000"]
</div>
<div class="col-md-6 modal-p modal-b modal-bb-n modal-bl-n">
<p class="modal-text">Interested Service</p>
[text* your-cons placeholder "Construction"]
</div>
<div class="col-md-12 modal-p modal-b">
<p class="modal-text">Your name</p>
[textarea* your-message placeholder "Tell us about your project"]
</div>
<div class="col-md-12" style="font-size: 12px; padding: 0; margin: 1.75em 0;">
[acceptance acceptance-860] I am bound by the terms of the Service I accept Privacy Policy [/acceptance]
</div>
<div class="col-md-12" style="padding: 0;">
[submit "Send Message"]
</div>
</div>

Form 3

Form 3 Template Code

[text* your-name placeholder akismet:author "Your name"]
[email* your-email placeholder akismet:author_email "Your Email Address"]
[textarea* your-message 10x4 placeholder "Your message"]
[submit "Send email"]

Form 4

Form 4 Template Code

<style>
.modal-text{
margin: 0; color: #081B22; font-size: 11px;font-weight:bold; text-transform:uppercase; letter-spacing:2px;
}
</style>
<div class="row">
<div class="col-xs-12">
<p class="modal-text">Nice to meet you</p>
[text* your-name placeholder akismet:author "What’s your name?"]
</div>
<div class="col-xs-12">
<p class="modal-text">Email address</p>
[email* your-email placeholder akismet:author_email "Enter your email address"]
</div>
<div class="col-xs-12">
<p class="modal-text">Subject</p>
[text* your-subject placeholder "How can we help you?"]
</div>
<div class="col-xs-12">
<p class="modal-text">Your message</p>
[textarea* your-message 10x4 placeholder "Tell us about your project"]
</div>
<div class="col-xs-12">
[acceptance acceptance-666 optional] I am bound by the terms of the Service I accept Privacy Policy [/acceptance]
</div>
<div class="col-xs-12">
[submit "Send message"]
</div>
</div>