Merge two forms into one Form Handler

Question

I need a "Contact" form with "Business Name", "Contact Name", and "Email" to display when the page is loaded. Then, after the user adds input and hits "Add More", the form will expand to include the fields from a separate "Quote" form AND an email will be sent to me with the information from the "Contact" form.

Then, after the user adds input to the fields in the "Quote" form, I need the information from both of those forms to be submitted and handled by the page POSTing to itself, while sending and email to me with the combined information from the "Contact" and "Quote" forms AND sending a thank you email to the user.

If there were any errors, a 3rd "Quote Form Handler" which includes the fields from both forms would be re-displayed, maintaining the valid input from the "Contact" and "Quote" forms and showing which fields are required.

Is this possible? How would I go about it?

I have tried using AJAX. I've tried to setTimeout.


```````````````````````````````````````````````````````````



     method="post">
        
            
            Looking For A Quote
            ? 
        
        

    
        Business Name:
        
        Contact Name:
        
        Email Address: 
        
        

    
        
            
        
    
    





    
         method="post">
            
                
                Looking For A Quote
                ? 
            
            


            Business Name:
            
            Contact Name:
            
            Email Address: 
            
            Business Type: 
            
        Address Line 1: 
        
        Address Line 2: (Optional)
         
        City: 
        
        State:  
        
        Zip Code: 
        
        Estimated Square Feet: 
        
          
        

            
                
                
              
        
    



">
    
         
        


        Please re-enter the information below. 

 * required field
        
            
            Looking For A Quote
            ? 
        


  
        Business Name:
        *  
        
        Contact Name:
        * 
        
        Email Address: 
        * 
        
        Business Type:
        *   
        
        Address Line 1: 
        * 
        
        Address Line 2:
         
        City:
        * 
        
        State:
        *     
        
        Zip Code:
        * 
        
        Estimated Square Feet: 
        * 
        
        

        
            
            
        
    

0 || $errorCount<0) {
    redisplayForm($bizName, $bizType, $address1, $address2, $city, 
    $state, $zip, $sqft, $cName, $email, $bizNameErr, $bizTypeErr,
    $address1Err, $cityErr, $stateErr, $zipErr, $sqftErr, $cNameErr, $emailErr );

    $bizNameErr = $bizTypeErr = $address1Err = $address2Err = $cityErr = $stateErr
    = $zipErr = $sqftErr = $cNameErr = $emailErr = "";

    $bizName = $bizType = $address1 = $address2 = $city = $state
    = $zip = $sqft = $cName = $email = "";
// If there are no errors, an email will be sent to Conversion Worx with the user's input.
} else {
    $To = "myemail"; 
    $Subject = "Quote Form Results";
    $Message = "Business Name: " . $bizName . "
" 
    . "Business Type: " . $bizType . "
"
    . "Address Line 1: " . $address1 . "
"
    . "Address Line 2: " . $address2 . "
"
    . "City: " . $city . "
"
    . "State: " . $state . "
"
    . "Zip Code: " . $zip . "
"
    . "Estimated Square Feet: " . $sqft . "
"
    . "Contact Name: " . $cName . "
"
    . "Email Address: " . $email;
    $result = mail($To, $Subject, $Message);
}
// If email to Conversion Worx is sent succesfully, send thank you email to user.
if (isset($result)) {
    $To = $email;
    $Subject = "Virtual Tour Quote Request";
    $Headers = 'From: myemail' . "
" . 
        'Reply-To: myemail' . "
" . 
        'X-Mailer: PHP/' . phpversion();
    $Message = $cName . ",";
    $Message .= "
" . "
" . "Thank you for your interest in our 3D 360° Virtual Tours!";
    $Message .= "
" . "
" . "Your information has been submitted. ";
    $Message .= "A Conversion Worx represenative will be contacting you shortly to arrange a quote via phone or on-site visit.";
    $Message .= "
" . "
" . "We look forward to working with you! ";
    $Message .= "
" . "
" . "
" . "Sincerely,";
    $Message .= "
" . "
" . "The Conversion Worx Team";
    $result = mail($To, $Subject, $Message, $Headers);



}
 ?>

cssyphus · Accepted Answer

It looks like you know what you're doing code-wise, so I'll give you the overview.

First, there is no need to use the

constructs - you can do all this with DIVs (and inputs, buttons, etc) and AJAX. See this for more.

Next, you can use javascript/jQuery to present DIV structures that contain different bits of information to the user. Present the data to the user and use css height:150vh;overflow:hidden; along with a More button, like this:

$('#mybutt').click(function(){
    $('#sam').removeClass('shrunk');
    $('#mybutt').hide();
    $('#nxtbutt').show();
});

*{position:relative;}
div{margin:50px;width:350px;border:1px solid orange;background:bisque;}



.shrunk{height:120px;overflow:hidden;}
#nxtbutt{position:absolute;bottom:0;right:0;display:none;}




    Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text.

Then, when user clicks nxtbutt you can hide that DIV, and perhaps fade-in another one:

$('#nxtbutt').click(function(){
    $('#bob').fadeOut();
    $('#george').fadeIn();
});

When user has clicked the last button... you can collect all the info and ajax it to the PHP side. On the PHP side, do what you need to do and return some data to the DOM just by using PHP's echo() statement.

The data coming back from PHP will be received in the .done() function - and remember, that's a function so you might have scope issues accessing other variables. So, you can use little hacks like saving data into hidden input fields if needed:

.done(function(recd){
    $('body').append('');
});

You can also have hidden divs that can act like buttons, and you can use those to trigger other events:

.done(function(recd){
    if(recd == "peter"){
        $('#gollee').val('dosummmat');
        $('#hiddenDIV3').click();
    }
});
$(document).on('click', '#hiddenDIV3', function(){
    let tmp = $('#gollee').val();
    alert(tmp);
});

References:

AJAX and Forms

Merge two forms into one Form Handler

Answers (1)

Related Questions