Muffin Builder Broken
Hi,
I'm using a column in Muffin Builder to contain the following HTML form code and a button shortcode:
<form class="form" id="form" enctype="application/x-www-form-urlencoded" method="post" accept-charset="UTF-8">
<h1>Contact us.</h1>
<div class="content">
<div class="intro"><p>Fill in your details below if you require further information.</p></div>
<div id="section0">
<div class="field"><label for="Firstname">First name</label><input name="Firstname" id="Firstname" required type="text"></div>
<div class="field"><label for="Lastname">Last name</label><input name="Lastname" id="Lastname" required type="text"></div>
<div class="field"><label for="Email">Email</label><input name="Email" id="Email" required type="email"></div>
</div>
[button title="Submit message" icon="icon-right-open-big" icon_position="right" link="" target="_blank" color="#394258" font_color="white" large="1" class="" download="" onclick=""]
</div>
</form>
The relevant CSS is in the Custom CSS section of the theme options and all this works OK.
However when I add the html code for a text area box (in red) into the form like this:
<form class="form" id="form" enctype="application/x-www-form-urlencoded" method="post" accept-charset="UTF-8">
<h1>Contact us</h1>
<div class="content">
<div class="intro"><p>Fill in your details below if you require further information.</p></div>
<div id="section0">
<div class="field"><label for="Firstname">First name</label><input name="Firstname" id="Firstname" required type="text"></div>
<div class="field"><label for="Lastname">Last name</label><input name="Lastname" id="Lastname" required type="text"></div>
<div class="field"><label for="Email">Email</label><input name="Email" id="Email" required type="text"></div>
<div class="field"><div class="edit-options"><div class="edit"></div><div class="delete"></div></div><label for="Subject">Subject</label><input name="Subject" id="Subject" required type="text"></div>
<div class="field"><label for="Message">Message</label><textarea name="Message" id="Message" wrap="hard"></textarea></div>
</div>
[button title="Submit message" icon="icon-right-open-big" icon_position="right" link="" target="_blank" color="#394258" font_color="white" large="1" class="" download="" onclick=""]
</div>
</form>
Then everything on the Muffin Builder page breaks after it has been saved! The preview of the page looks OK but I cannot see any of the Muffin Builder content for the page in the editor.
To retrieve the content I have to hit the back button on the browser until the original content is shown then save the page again.
The CSS I'm using is:
.form{
max-width: 100%;
min-width: 25%;
border-width: 2px;
border-color: #F18800;
border-radius: 4px;
color: #FFFFFF;
font-size: 12px;
margin: 0px;
background-color: #F18800;
padding: 20px;
}
.content{
margin: 0px;
}
.form label{
color: #FFFFFF;
font-size: 12px;
display: block;
}
.form input[type=radio], input[type=checkbox]{
margin: 10px;
width: 13px;
}
.form div{
display: block;
}
.form input, form textarea, form select{
border-width: 0px;
border-color: #666666;
border-radius: 0px;
padding: 3px;
width: 100%;
}
.form, .form h1, .form h2{
font-family: 'Open Sans', sans-serif;;
}
.form h1{
font-size: 40px;
color: #FFFFFF;
padding: 0px;
margin: 0px;
margin-bottom: 10px;
border-bottom-style: dotted;
border-bottom-color: #CCCCCC;
border-bottom-width: 0px;
border-radius: 0px;
background-color: #F18800;
}
.intro{
margin-bottom: 10px;
}
.clear{
clear: both;
}
.form textarea{
height: 50px;
width: 100%;
}
.form input[type=submit]{
width: 100%;
background-color: #CCCCCC;
color: #222222;
}
.field{
margin-bottom: 5px;
}
Thanks in advance for your help.
Comments
looks like your code is broken and wordpress don't want to save it (builder is based on wordpress API of course) or your server is limited and max_input_vars variable must be increased as current one does not save properly.
Thanks!