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.

<style>
/* BEGIN CSS RESET */
        box-sizing: border-box;
        font-size: 18px;
        }
        *, *:before, *:after {
        box-sizing: inherit;
        }
        body, h1, h2, h3, h4, h5, h6, p, ol, ul {
        margin: 0;
        padding: 0;
        font-weight: normal;
        }
        ol, ul {
        list-style: none;
        }
        img {
        width: 100%;
        height: auto;
        }
/*END CSS RESET*/   

/* BEGIN FORM */
    .form-embed {
        padding: 24px;
        background: grey;
        border-radius: 8px;
    }

    label {
    font-size: 20px;
    color:#00ccff;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    }

    input, select {
        height: 48px;
        width: 100%;
        background: white;
        border: 1px solid rgba(0,0,0,0.1);
        outline: none;
        border-radius: 4px;
        padding-left: 16px;
        padding-right: 16px;
        display: block;
        -ms-box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box; 
        box-sizing:border-box;
    }

    input:hover {
        border: 1px solid rgba(0,0,0,0.16);
    }

    input[type=button], input[type=submit]{
      background-color: #1E90FF;
      border: none;
      width: 25%;
      color: white;
      padding: 16px 32px;
      text-decoration: none;
      margin: 4px 2px;
      cursor: pointer;
      border-radius: 12px;
      text-align: center;
      display:inline-block;
    }

    .buttons {
     text-align: center;
    }

    .bodyText {
    margin-bottom: 25px;
    }

#Contact_Form{
    width: 100%;
}

.hiddenForm {
    width: 100%;
    display: none;
}
.error {
    color: #FF0000;
}

/* END FORM */

</style>
```````````````````````````````````````````````````````````
<script>


$(document).ready(function(){
    $("#formButton").click(function(){
        $(".hiddenForm").show();
        $("#Contact_Form").hide();
        $(".hide-button").hide();

        event.preventDefault(); //prevent default action
        var post_url = $(this).attr("ajax.php"); //get form action url
        var request_method = $(this).attr("POST"); //get form GET/POST method
        var form_data = $('#Contact_Form').serialize(); //Encode form elements for submission

        $.ajax({
            url : post_url,
            type: request_method,
            data : form_data
        }).done(function(response){ 
            $("#server-results").html(response);
        });
    });

    $("#submitButton").click(function(event){

        //$(".hiddenForm").show();
        //$("#Quote_Form").hide();
        //$("#Contact_Form").hide();
        $("#Quote_Form").submit();

        //$("#Contact_Form").submit();

        //setTimeout(function(){ document.getElementById("Contact_Form").submit();}, 3000);  
    });

    /*$("#submitButton").click(function(){
        $("#Contact_Form").submit();
        $("#Quote_Form").submit();
    });
    */



});

</script>

<div class="form-embed">
    <form id="Contact_Form" name="Contact_Form" target="_blank" action=<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?> method="post">
        <div class="bodyText"><p style="text-align: center;">
            <span style="font-family: 'times new roman', 
            times; font-size: 18px; color: #00ccff;">
            <strong><span style="font-size: 24px;"><em>Looking For A Quote</em>
            </span>?&nbsp;</strong></span>
        </div>
        <br><br>    
        <label for="bizName" class="control-label">Business Name:</label>
        <input required maxlength="200" type="text" class="form-control" placeholder="Enter Business Name" name="bizName" id="bizName"  />
        <label for="cName" class="control-label">Contact Name:</label>
        <input required maxlength="200" type="text" class="form-control" placeholder="Enter Contact Name" name="cName" id="cName"  />
        <label for="email" class="control-label">Email Address: </label>
        <input required maxlength="200" type="email" class="form-control" placeholder="Enter Email Address" name="email" id="email"  />
        <br>
    <div class="buttons">
        <div class="hide-button">
            <input id="formButton" class="btn btn-success add-more" type="button" value="Add More" />
        </div>
    </div>
    </form>





    <div class="hiddenForm">
        <form id="Quote_Form" name="Quote_Form" target="_blank" action=<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?> method="post">
            <div class="bodyText"><p style="text-align: center;">
                <span style="font-family: 'times new roman', 
                times; font-size: 18px; color: #00ccff;">
                <strong><span style="font-size: 24px;"><em>Looking For A Quote</em>
                </span>?&nbsp;</strong></span>
            </div>
            <br><br>
            <label for="bizName" class="control-label">Business Name:</label>
            <input required maxlength="200" type="text" class="form-control" value="<?php echo $bizName; ?>" placeholder="Enter Business Name" name="bizName" id="bizName"  />
            <label for="cName" class="control-label">Contact Name:</label>
            <input required maxlength="200" type="text" class="form-control" value="<?php echo $cName; ?>" placeholder="Enter Contact Name" name="cName" id="cName" />
            <label for="email" class="control-label">Email Address: </label>
            <input required maxlength="200" type="email" class="form-control" value="<?php echo $email; ?>" placeholder="Enter Email Address" name="email" id="email"  />
            <label for="bizType">Business Type: </label>
            <select name="bizType"> 
            <option value="">Choose an option...</option>
            <option value="Restaurant">Restaurant</option>
            <option value="Bar or Pub">Bar or Pub</option>
            <option value="Brewery">Brewery</option>
            <option value="Wedding Venue">Wedding Venue</option>
            <option value="Salon or Spa">Salon or Spa</option>
            <option value="Event or Party Space">Event or Party Space</option>
            <option value="Funeral Home">Funeral Home</option>
            <option value="Retail">Retail</option>
            <option value="Museum or Gallery">Museum or Gallery</option>
            <option value="Industrial Facility">Industrial Facility</option>
            <option value="Medical Facility">Medical Facility</option>
            <option value="Commercial Property">Commercial Property</option>
            <option value="Fitness Facility / Gym">Fitness Facility / Gym</option>
            <option value="Sports or Recreational Facility ">Sports or Recreational Facility </option>
            <option value="Other">Other</option>
        </select>
        <label for="address1">Address Line 1: </label>
        <input type="text" name="address1" id="address1"
         size="40" placeholder="Street and number, P.O. box, c/o">
        <label for="address2">Address Line 2: (Optional)</label>
        <input type="text" name="address2" id="address2"
         size="40" placeholder = "Apartment, suite, unit, building, floor, ect."> 
        <label for="city" class="control-label">City: </label>
        <input maxlength="200" type="text" class="form-control" placeholder="Enter City" name="city" id="city" />
        <label for="state">State: </label> 
        <select name="state">
            <option value="">Choose an option...</option>
            <option value="AL">Alabama (AL)</option>
            <option value="AK">Alaska (AK)</option>
            <option value="AZ">Arizona (AZ)</option>
            <option value="AR">Arkansas (AR)</option>
            <option value="CA">California (CA)</option>
            <option value="CO">Colorado (CO)</option>
            <option value="CT">Connecticut (CT)</option>
            <option value="DE">Delaware (DE)</option>
            <option value="DC">District Of Columbia (DC)</option>
            <option value="FL">Florida (FL)</option>
            <option value="GA">Georgia (GA)</option>
            <option value="HI">Hawaii (HI)</option>
            <option value="ID">Idaho (ID)</option>
            <option value="IL">Illinois (IL)</option>
            <option value="IN">Indiana (IN)</option>
            <option value="IA">Iowa (IA)</option>
            <option value="KS">Kansas (KS)</option>
            <option value="KY">Kentucky (KY)</option>
            <option value="LA">Louisiana (LA)</option>
            <option value="ME">Maine (ME)</option>
            <option value="MD">Maryland (MD)</option>
            <option value="MA">Massachusetts (MA)</option>
            <option value="MI">Michigan (MI)</option>
            <option value="MN">Minnesota (MN)</option>
            <option value="MS">Mississippi (MS)</option>
            <option value="MO">Missouri (MO)</option>
            <option value="MT">Montana (MT)</option>
            <option value="NE">Nebraska (NE)</option>
            <option value="NV">Nevada (NV)</option>
            <option value="NH">New Hampshire (NH)</option>
            <option value="NJ">New Jersey (NJ)</option>
            <option value="NM">New Mexico (NM)</option>
            <option value="NY">New York (NY)</option>
            <option value="NC">North Carolina (NC)</option>
            <option value="ND">North Dakota (ND)</option>
            <option value="OH">Ohio (OH)</option>
            <option value="OK">Oklahoma (OK)</option>
            <option value="OR">Oregon (OR)</option>
            <option value="PA">Pennsylvania (PA)</option>
            <option value="RI">Rhode Island (RI)</option>
            <option value="SC">South Carolina (SC)</option>
            <option value="SD">South Dakota (SD)</option>
            <option value="TN">Tennessee (TN)</option>
            <option value="TX">Texas (TX)</option>
            <option value="UT">Utah (UT)</option>
            <option value="VT">Vermont (VT)</option>
            <option value="VA">Virginia (VA)</option>
            <option value="WA">Washington (WA)</option>
            <option value="WV">West Virginia (WV)</option>
            <option value="WI">Wisconsin (WI)</option>
            <option value="WY">Wyoming (WY)</option>
        </select>
        <label for="zip" class="control-label">Zip Code: </label>
        <input type="text" class="form-control" 
        pattern="[0-9]{5}" maxlength="5" size="5" 
        placeholder="Enter Zip Code" name="zip" id="zip" />
        <label for="sqft">Estimated Square Feet: </label>
        <select name="sqft">
            <option value="">Choose an option...</option>
            <option value="4,000 or less">4,000 sqft or less</option>
            <option value="5,000 to 9,000">5,000 sqft to 9,000 sqft</option>
            <option value="10,000 to 14,000">10,000 sqft to 14,000 sqft</option>
            <option value="15,000 to 20,000">15,000 sqft to 20,000 sqft</option>
            <option value="20,000 or more">20,000 sqft or more</option>
        </select>
        &nbsp;&nbsp;
        <br>
            <div class="buttons">
                <!--<input id="submitButton" type="button" onclick="submitForms()" value="Submit the form"/>-->
                <input id="submitButton" class="btn btn-success" type="submit" value="submit the form" />
            </div>  
        </form>
    </div>
</div>

<?php


$errorCount = "";

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

$bizName = $bizType = $address1 = $address2 = $city = $state
= $zip = $sqft = $cName = $email = "";
// Check to make sure the required fields from the Quote Form are not empty
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  if (empty($_POST["bizName"])) {
    $bizNameErr = "Business name is required";
    ++$errorCount;
  } else {
    $bizName = test_input($_POST["bizName"]);
  } 
  if (empty($_POST["cName"])) {
    $cNameErr = "Contact Name is required";
    ++$errorCount;
  } else {
    $cName = test_input($_POST["cName"]);
  }
  if (empty($_POST["email"])) {
    $emailErr = "Email is required";
    ++$errorCount;
  } else {
    $email = test_input($_POST["email"]);
  }
  if (empty($_POST["bizType"])) {
    $bizTypeErr = "Business Type is required";
    ++$errorCount;
  } else {
    $bizType = test_input($_POST["bizType"]);
  }
  if (empty($_POST["address1"])) {
    $address1Err = "Address Line 1 is required";
    ++$errorCount;
  } else {
    $address1 = test_input($_POST["address1"]);
  }
   if (!empty($_POST["address2"])) {
    $address2 = test_input($_POST["address2"]);
  }
  if (empty($_POST["city"])) {
    $cityErr = "City is required";
    ++$errorCount;
  } else {
    $city = test_input($_POST["city"]);
  }
  if (empty($_POST["state"])) {
    $stateErr = "State is required";
    ++$errorCount;
  } else {
    $state = test_input($_POST["state"]);
  }
  if (empty($_POST["zip"])) {
    $zipErr = "Zip Code is required";
    ++$errorCount;
  } else {
    $zip = test_input($_POST["zip"]);
  }
  if (empty($_POST["sqft"])) {
    $sqftErr = "Square Feet is required";
    ++$errorCount;
  } else {
    $sqft = test_input($_POST["sqft"]);
  }   
}
// Form validation
function test_input($data) {
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;
}

// This function, when called, redisplays the Quote Form Handler
function redisplayForm($bizName, $bizType, $address1, $address2, $city, 
$state, $zip, $sqft, $cName, $email, $bizNameErr, $bizTypeErr,
$address1Err, $cityErr, $stateErr, $zipErr, $sqftErr, $cNameErr, $emailErr ) {
?>
<form name="Quote_Form" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
    <div class="form-embed">
        <span class="error"> <?php
// Determining that the user input was sent successfully and setting a resultMsg variable accordingly
        if (isset($result)) {
            $resultMsg = "Your infomation was sent successfully.";
        } else {
            $resultMsg = "There was a problem sending your information.";
        }
        echo $resultMsg; ?>
        </span><br><br>
        <p><span class="error">Please re-enter the information below. <br><br> * required field</span></p>
        <div class="bodyText"><p style="text-align: center;">
            <span style="font-family: 'times new roman', times; font-size: 18px; color: #00ccff;">
            <strong><span style="font-size: 24px;"><em>Looking For A Quote</em>
            </span>?&nbsp;</strong></span></p>
        </div><br><br>  
        <label for="bizName" class="control-label">Business Name:
        <span class="error">* <?php echo $bizNameErr;?> </span></label>
        <input required maxlength="200" type="text" class="form-control" value="<?php echo $bizName; ?>" placeholder="Enter Business Name" name="bizName" id="bizName"  />
        <label for="cName" class="control-label">Contact Name:
        <span class="error">* <?php echo $cNameErr;?></span></label>
        <input required maxlength="200" type="text" class="form-control" value="<?php echo $cName; ?>" placeholder="Enter Contact Name" name="cName" id="cName" />
        <label for="email" class="control-label">Email Address: 
        <span class="error">* <?php echo $emailErr;?></span></label>
        <input required maxlength="200" type="email" class="form-control" value="<?php echo $email; ?>" placeholder="Enter Email Address" name="email" id="email"  />
        <label for="bizType" class="control-label">Business Type:
        <span class="error">* <?php echo $bizTypeErr;?></span></label>  
        <select required name="bizType">
            <?php 
                if(empty($_POST["bizType"])){ ?>
                    <option value="<?php echo $bizType; ?>" disabled selected hidden><?php echo "Choose business type...";
                }
                else { ?>
                    <option value="<?php echo $bizType; ?>"><?php echo $bizType;?> </option><?php 
                } 
            ?>
            <option value="Restaurant">Restaurant</option>
            <option value="Bar or Pub">Bar or Pub</option>
            <option value="Brewery">Brewery</option>
            <option value="Wedding Venue">Wedding Venue</option>
            <option value="Salon or Spa">Salon or Spa</option>
            <option value="Event or Party Space">Event or Party Space</option>
            <option value="Funeral Home">Funeral Home</option>
            <option value="Retail">Retail</option>
            <option value="Museum or Gallery">Museum or Gallery</option>
            <option value="Industrial Facility">Industrial Facility</option>
            <option value="Medical Facility">Medical Facility</option>
            <option value="Commercial Property">Commercial Property</option>
            <option value="Fitness Facility / Gym">Fitness Facility / Gym</option>
            <option value="Sports or Recreational Facility ">Sports or Recreational Facility </option>
            <option value="Other">Other</option>
        </select>
        <label for="address1" class="control-label">Address Line 1: 
        <span class="error">* <?php echo $address1Err;?></span></label>
        <input required type="text" name="address1" id="address1"
        size="40" value="<?php echo $address1; ?>" placeholder="Street and number, P.O. box, c/o">
        <label for="address2" class="control-label">Address Line 2:
        <input type="text" name="address2" id="address2"
        size="40" value="<?php echo $address2; ?>" placeholder = "Apartment, suite, unit, building, floor, ect."> 
        <label for="city" class="control-label">City:
        <span class="error">* <?php echo $cityErr;?></span></label>
        <input required type="text" class="form-control" value="<?php echo $city; ?>" placeholder="Enter City" name="city" id="city" />
        <label for="state" class="control-label">State:
        <span class="error">* <?php echo $stateErr;?></span></label>    
        <select required name="state">
            <?php 
                if(empty($_POST["state"])){ ?>
                    <option value="<?php echo $state; ?>" disabled selected hidden><?php echo "Choose state...";
                }
                else { ?>
                    <option value="<?php echo $state; ?>"><?php echo $state;?> </option><?php 
                } 
            ?>
            <option value="AL">Alabama (AL)</option>
            <option value="AK">Alaska (AK)</option>
            <option value="AZ">Arizona (AZ)</option>
            <option value="AR">Arkansas (AR)</option>
            <option value="CA">California (CA)</option>
            <option value="CO">Colorado (CO)</option>
            <option value="CT">Connecticut (CT)</option>
            <option value="DE">Delaware (DE)</option>
            <option value="DC">District Of Columbia (DC)</option>
            <option value="FL">Florida (FL)</option>
            <option value="GA">Georgia (GA)</option>
            <option value="HI">Hawaii (HI)</option>
            <option value="ID">Idaho (ID)</option>
            <option value="IL">Illinois (IL)</option>
            <option value="IN">Indiana (IN)</option>
            <option value="IA">Iowa (IA)</option>
            <option value="KS">Kansas (KS)</option>
            <option value="KY">Kentucky (KY)</option>
            <option value="LA">Louisiana (LA)</option>
            <option value="ME">Maine (ME)</option>
            <option value="MD">Maryland (MD)</option>
            <option value="MA">Massachusetts (MA)</option>
            <option value="MI">Michigan (MI)</option>
            <option value="MN">Minnesota (MN)</option>
            <option value="MS">Mississippi (MS)</option>
            <option value="MO">Missouri (MO)</option>
            <option value="MT">Montana (MT)</option>
            <option value="NE">Nebraska (NE)</option>
            <option value="NV">Nevada (NV)</option>
            <option value="NH">New Hampshire (NH)</option>
            <option value="NJ">New Jersey (NJ)</option>
            <option value="NM">New Mexico (NM)</option>
            <option value="NY">New York (NY)</option>
            <option value="NC">North Carolina (NC)</option>
            <option value="ND">North Dakota (ND)</option>
            <option value="OH">Ohio (OH)</option>
            <option value="OK">Oklahoma (OK)</option>
            <option value="OR">Oregon (OR)</option>
            <option value="PA">Pennsylvania (PA)</option>
            <option value="RI">Rhode Island (RI)</option>
            <option value="SC">South Carolina (SC)</option>
            <option value="SD">South Dakota (SD)</option>
            <option value="TN">Tennessee (TN)</option>
            <option value="TX">Texas (TX)</option>
            <option value="UT">Utah (UT)</option>
            <option value="VT">Vermont (VT)</option>
            <option value="VA">Virginia (VA)</option>
            <option value="WA">Washington (WA)</option>
            <option value="WV">West Virginia (WV)</option>
            <option value="WI">Wisconsin (WI)</option>
            <option value="WY">Wyoming (WY)</option>
        </select>
        <label for="zip" class="control-label">Zip Code:
        <span class="error">* <?php echo $zipErr;?></span></label>
        <input required type="text" class="form-control" 
        pattern="[0-9]{5}" maxlength="5" size="5" 
        value="<?php echo $zip; ?>" placeholder="Enter Zip Code" name="zip" id="zip" />
        <label for="sqft" class="control-label">Estimated Square Feet: 
        <span class="error">* <?php echo $sqftErr;?></span></label>
        <select required name="sqft" >
            <?php 
                if(empty($_POST["sqft"])){ ?>
                    <option value="<?php echo $sqft; ?>" disabled selected hidden><?php echo "Choose square footage...";
                }
                else { ?>
                    <option value="<?php echo $sqft; ?>"><?php echo $sqft;?> </option><?php 
                } 
            ?>
            <option value="4,000 or less">4,000 sqft or less</option>
            <option value="5,000 to 9,000">5,000 sqft to 9,000 sqft</option>
            <option value="10,000 to 14,000">10,000 sqft to 14,000 sqft</option>
            <option value="15,000 to 20,000">15,000 sqft to 20,000 sqft</option>
            <option value="20,000 or more">20,000 sqft or more</option>
        </select>
        <br>
        <div class="buttons">
            <!--<input type="submit" name="Submit" value="Send Form"  /> -->
            <input id="submitButton" class="btn btn-success" type="submit" value="submit the form" />
        </div>
    </div>
</form>
<?php
}

// Error checking. If there are errors, call the redisplayForm function to redisplay the Quote Form Handler.
if ($errorCount>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 . "\n" 
    . "Business Type: " . $bizType . "\n"
    . "Address Line 1: " . $address1 . "\n"
    . "Address Line 2: " . $address2 . "\n"
    . "City: " . $city . "\n"
    . "State: " . $state . "\n"
    . "Zip Code: " . $zip . "\n"
    . "Estimated Square Feet: " . $sqft . "\n"
    . "Contact Name: " . $cName . "\n"
    . "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' . "\r\n" . 
        'Reply-To: myemail' . "\r\n" . 
        'X-Mailer: PHP/' . phpversion();
    $Message = $cName . ",";
    $Message .= "\n" . "\n" . "Thank you for your interest in our 3D 360° Virtual Tours!";
    $Message .= "\n" . "\n" . "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 .= "\n" . "\n" . "We look forward to working with you! ";
    $Message .= "\n" . "\n" . "\n" . "Sincerely,";
    $Message .= "\n" . "\n" . "The Conversion Worx Team";
    $result = mail($To, $Subject, $Message, $Headers);



}
 ?>

Answer 1

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 <form> 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;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id="bob">
    <p id="sam" class="shrunk">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. </p>
    <button id="mybutt">More</button>
    <button id="nxtbutt">Next</button>
</div>

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('<input id="gollee" type="hidden" value="' +recd+ '" />');
});

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

More on AJAX and Forms