Contact Form

rolandgabor · April 2015

How do i create a contact form like this??

http://themes.muffingroup.com/be/loans/

Albert · April 2015

Those kind of forms can be created within Contact From 7 plugin. In this case we used below code:

<div class="column one">
[tel* number placeholder "Leave your telephone number"]
</div>
<div class="column one-second">
[text* first-name placeholder "First name"]
</div>
<div class="column one-second">
[text* last-name placeholder "Last name"]
</div>
<div class="column one" style="text-align: right;">
[submit "Apply now"]
</div>

rolandgabor · April 2015

thank you

Will the blue background with rounded edges will be showing up as well?

would you please explain the structure of how the contact form fields are placed on a background?

Albert · April 2015

If you imported Be|Loans demo properly then you will get the same look as demo. But only if you imported demo of course.

rolandgabor · April 2015

I did not import that demo. But i do like the contact form.

Im sure it can be recreated.

If you could tell me how i would appreciate it

Albert · April 2015

For this demo we used below code:

<div class="column one">
[tel* number placeholder "Leave your telephone number"]
</div>
<div class="column one-second">
[text* first-name placeholder "First name"]
</div>
<div class="column one-second">
[text* last-name placeholder "Last name"]
</div>
<div class="column one" style="text-align: right;">
[submit "Apply now"]
</div>

rolandgabor · April 2015

these are form fields only. Am i right or am i crazy?

Its the overall look that i like with the blue background as well.

Albert · April 2015

This is the code we used to create form. But to put this form on page with the rest, we used "Column" item and inside we used this:

<div style="background: url(http://themes.muffingroup.com/be/loans/wp-content/uploads/2014/10/home_loans_form_bg.png) no-repeat top right; padding: 30px;" class="clearfix">
<h3 style="color: #fff;">Leave your number and we will call you back</h3>
<h5 style="color: #8bd2ff; margin-bottom: 25px">Get up to $5000* within 10 minutes**</h5>
[contact-form-7 id="8" title="Contact form"]
</div>

rolandgabor · April 2015

Thank You

Albert · April 2015

You're welcome

Contact Form

Comments