Pop up form height is reduced after form submission.

Afreen · May 16, 2013

I have a pop-up form for 'Enquiry' page. I have completed the validation part of that form. When I submit the form, my form's size is reduced from 500px to 160px. I dont know why???

Previously, when I was doing the same pop-up form, all the fields were one after the other and at that time the form was fine even after submission.

But, now I have made changes and divided the whole form in two divs - left and right, enclosed in another main div. And then the problem started.

Can anyone help me out for?????

Jessica · May 16, 2013

You posted this in PHP Application Frameworks, with no mention of what framework you're using, and no code.

So, no, we probably can't help too much.

Afreen · May 18, 2013

I am using Codeigniter framework. This is my pop-up form code (contactform-code.php):

<div id="fg_box_Title">Enquiry Form</div>

<div id="fg_box_Close"><a href="javascript:fg_hideform('fg_formContainer','fg_backgroundpopup');">Close(X)</a></div>

</div>

<? //echo base_url();?>

<div>

<input type='hidden' name='<?php echo $formproc->GetFormIDInputName(); ?>' value='<?php echo $formproc->GetFormIDInputValue(); ?>'/>

<input type='text' class='spmhidip' name='<?php echo $formproc->GetSpamTrapInputName(); ?>' />

Please fill in your information below and Stan Howard will contact you as soon as possible to book your event.<br/>

Or call (877) 627-3320<br/><br/>

<font color="red">*</font> required fields

</div>

</div>

<label for='email' ><font color="red">*</font>Email Address :</label><br/>

</div>

<label for='phone' ><font color="red">*</font>Phone :</label><br/>

</div>

<label for='event_date' ><font color="red">*</font>Event Date :</label><br/>

</div>

<label for='event_time' ><font color="red">*</font>Event Time :</label><br/>

</div>

<input type="checkbox" name="flexible_date" id="flexible_date"/> <label for='flexible_date' >Dates are flexible </label><br/>

</div>

<label for='event_type' ><font color="red">*</font>Event Type :</label><br/>

<option value="">Please Select</option>

<option value="Birthday">Birthday</option>

<option value="Corporate Events">Corporate Events</option>

<option value="Social Events">Social Events</option>

<option value="Wedding Ceremony">Wedding Ceremony</option>

</select><br/>

</div>

<label for='no_of_guests' ><font color="red">*</font>Estimated number of guests :</label><br/>

</div>

<label for='details' >Additional Details</label><br/>

</div>

</div>

</div>

</form>

</div>

<!-- client-side Form Validations:

Uses the excellent form validation script from JavaScript-coder.com-->

// <![CDATA[

var frmvalidator = new Validator("contactus");

frmvalidator.EnableOnPageErrorDisplay();

frmvalidator.EnableMsgsTogether();

frmvalidator.addValidation("name","req","Please provide your name");

frmvalidator.addValidation("email","req","Please provide your email address");

frmvalidator.addValidation("email","email","Please provide a valid email address");

frmvalidator.addValidation("phone","req","Please provide your phone number");

frmvalidator.addValidation("event_date","req","Please provide your event date");

frmvalidator.addValidation("event_time","req","Please provide your event time");

frmvalidator.addValidation("event_type","req","Please provide your event type");

frmvalidator.addValidation("no_of_guests","req","Please provide total number of guests");

frmvalidator.addValidation("details","maxlen=2048","The additional detail is too long!(more than 2KB!)");

document.forms['contactus'].refresh_container=function()

{

var formpopup = document.getElementById('fg_formContainer');

var innerdiv = document.getElementById('fg_form_InnerContainer');

var b = innerdiv.offsetHeight+30+30;

formpopup.style.height = b+"px";

}

document.forms['contactus'].form_val_onsubmit = document.forms['contactus'].onsubmit;

document.forms['contactus'].onsubmit=function()

{

if(!this.form_val_onsubmit())

{

this.refresh_container();

return false;

}

return true;

}

function fg_submit_form()

{

//alert('submiting form');

var containerobj = document.getElementById('fg_form_InnerContainer');

var sourceobj = document.getElementById('fg_submit_success_message');

var error_div = document.getElementById('fg_server_errors');

var formobj = document.forms['contactus']

var submitter = new FG_FormSubmitter("popup-contactform.php",containerobj,sourceobj,error_div,formobj);

var frm = document.forms['contactus'];

submitter.submit_form(frm);

}

// ]]>

</script>

<h2>Thanks!</h2>

<p>

Thanks for contacting us. We will get in touch with you soon!

<p>

<a href="javascript:fg_hideform('fg_formContainer','fg_backgroundpopup');">Close this window</a>

<p>

</p>

</div>

The pop-up form is called in the main file over here:

<? include('popup-contactform.php');?>

<img src="<? echo base_url();?>images/make.png" border="0" />

</a>

</div>

include('contactform-code.php');

</body>

The popup-contactform.php id here:

<?php

/*

Contact Form from HTML Form Guide

This program is free software published under the

terms of the GNU Lesser General Public License.

See this page for more info:

http://www.html-form-guide.com/contact-form/simple-modal-popup-contact-form.html

*/

//$this->load->view('fgcontactform')

include('fgcontactform.php');

$formproc = new FGContactForm();

//1.Add your email address here.

//You can add more than one receipients.

$formproc->AddRecipient('tests@html-form-guide.com'); //<<---Put your email address here

//2. For better security. Get a random string from this link: http://tinyurl.com/randstr

// and put it here

$formproc->SetFormRandomKey('dz0sbNoc7mZPgXa');

if(isset($_POST['submitted']))

{

if($formproc->ProcessForm())

{

echo "success";

}

else

{

echo $formproc->GetErrorMessage();

}

?>

The styles which I am using is:

#fg_formContainer

{

height:500px;

width:550px;

background:#FFFFFF;

border:1px solid #000;

padding:0;

position:absolute;

z-index:999;

cursor:default;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

-khtml-border-radius: 10px;

border-radius: 10px;

display:none;

}

#contactus .spmhidip

{

display:none;

width:10px;

height:3px;

}

#fg_container_header

{

height:30px;

background:#587a01;

border-top-right-radius:10px;

-moz-border-radius-topright:10px;

-webkit-border-top-right-radius:10px;

-khtml-border-top-right-radius: 10px;

border-top-left-radius:10px;

-moz-border-radius-topleft:10px;

-webkit-border-top-left-radius:10px;

-khtml-border-top-left-radius: 10px;

}

#fg_container_header a

{

color:#fff;

font-family:Verdana,Arial;

font-size:10pt;

font-weight:bold;

}

#fg_box_Title

{

float:left;

width:180px;

margin:5px;

margin-left:10px;

color:#fff;

font-family:"Delicious Smallcaps";

font-size:15pt;

font-weight:bold;

}

#fg_box_Close

{

float:right;

width:80px;

margin:5px;

font-family:"Delicious Smallcaps";

text-decoration:none;

}

#fg_form_InnerContainer

{

margin:15px;

}

#fg_form_InnerContainer h2

{

font-family : Arial, sans-serif;

font-size: 14pt;

font-weight:bold;

color:#333;

}

#fg_form_InnerContainer p

{

font-family : Arial, sans-serif;

font-size: 12pt;

color:#333;

}

#fg_backgroundpopup

{

position: fixed;

top:0;

left:0;

bottom:0;

right:0;

background:#000000;

opacity: .3;

-moz-opacity: .3;

filter: alpha(opacity=30);

border:1px solid #cecece;

z-index:1;

display:none;

}

#fg_submit_success_message

{

display:none;

padding:15px;

}

#contactus input[type=submit]

{

width:100px;

height:30px;

padding-left:0px;

}

#contactus textarea

{

height:120px;

width:240px;

}

#contactus input[type=text]:focus,textarea:focus

{

color : #009;

border : 1px solid #990000;

background-color : #ffff99;

font-weight:bold;

}

#contactus .container

{

margin-top:8px;

margin-bottom: 10px;

}

#contactus .error

{

font-family: Verdana, Arial, sans-serif;

font-size: 0.7em;

color: #900;

background-color : #ffff00;

}

</style>

Edited May 18, 2013 by Afreen

Afreen · June 3, 2013

Solved it by myself, but forgot to reply here:

In the contactform-code.php, in the javascript part it is wriiten:

document.forms['contactus'].refresh_container=function()

{

var formpopup = document.getElementById('fg_formContainer');

var innerdiv = document.getElementById('fg_form_InnerContainer');

var b = innerdiv.offsetHeight+30+30;

formpopup.style.height = b+"px";

}

instead of the last line i added

formpopup.style.height = "auto":

And the problem is solved.

Sign In

Pop up form height is reduced after form submission.

Recommended Posts

Afreen

Link to comment

Share on other sites

Jessica

Link to comment

Share on other sites

Afreen

Link to comment

Share on other sites

Afreen

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information