Well, there’s a couple things going on here. The first is that it looks like your theme is mangling some of the VFB styling. I suggest contacting the author of the theme to help you there.
The next thing is something you can solve. It looks like you have set each field to have a Field Layout of ‘Left Two Thirds.’ And this is a misunderstanding of how that option works. Watch this video to learn exactly how you use it.
Thanks Matthew, I added the VFB in other WP and roles smooth.
Got to be the template. 🙁
Anyway thanks again!
Hello again Matthew –
The author of the Theme cant help me out…
I would like to use this plugin as it adapts to the necessities of the company.
What do you advice me doing next?
I have settings all to Left half and medium size…
Editing Plugin will be of any help?
Regards
Looks like you took the form down. If you put it back up, I can see what CSS needs to be corrected.
Hi again, is back up again.
http://worldbookingdj.com/dj-booking/
Thank You
Is it a private page? It’s saying page not found.
I´m so sorry, have been doing adaptions.
Here is inserted the VFB plugin: http://worldbookingdj.com/events/
Thank you
Okay, the two biggest problems are your theme’s styling of labels and the text shadow applied to everything.
Here are the label styles in style.css 1961:
label {
display: inline-block;
height: 30px;
line-height: 30px;
margin-right: 4%;
margin-top: 10px;
text-align: right;
vertical-align: top;
width: 15%;
}
Here is the text shadow in style.css line 38:
body, .dark body {
background: url("images/bg.jpg") repeat scroll 0 0 #181818;
text-shadow: 1px 1px #0D0D0D;
}
You are gonna want to read up on this tutorial before moving on.
Fixing the text shadow is a lot easier than the label. All you need to do is add a rule to your vfb-custom-css.css file:
.visual-form-builder {
text-shadow: none;
}
The label is a bit trickier because it’s a global style. The way that I’d do it is by adding a class to the label and then editing the output on your other contact form to include that class.
Change the CSS:
label.booking {
display: inline-block;
height: 30px;
line-height: 30px;
margin-right: 4%;
margin-top: 10px;
text-align: right;
vertical-align: top;
width: 15%;
}
Change the output on non-VFB forms:
<label for="inputemail" class="booking">Your email</label>
