AMPSCRIPT: Hide HTML Form after clicking on Submit Button

Question

I am looking for a solution to hide my html form contents and only display the "Thank You for your submission" text in the same landing page after the submit button is clicked.

My code will perform the following operations:

1. Retrieve sales cloud object field records
2. Pre-populate the sales cloud fields in the html form (e.g. Name, Email) based on ContactId.
3. In addition to those pre-populated fields, the HTML form will have radio buttons for user to select "Attending" or "Not Attending" and lastly a "Submit" button.
4. Capture the responses from user, pass it back to sales cloud and show the "Thank you for your submission" text in the landing page.

Can someone show me another simple example on how the form can be hidden? I tried using html script as below, but the form is still not hidden after the submit button is clicked.

<script>
          function showHideShipInfo(){
            if(document.getElementbyId('submit1').submit){
              document.getElementById('formfieldsetid').style.display='none';
            }
            else {
              document.getElementById('formfieldsetid').style.display='block';
            }
          }

Note: my html code for the submit button is as follows:

input type ="submit" value="Submit" id=submit1 onclick="showHideShipInfo()"

Answer 1

It is actually much simpler than you are thinking. You just need to have the form submit to itself (your current URL) and then have a hidden field of something like <input type="hidden" name="submit" value="1" /> then have AMPScript on the page like follows:

%%[
     SET @Submit = RequestParameter('Submit')
     IF @Submit != 1 THEN
]%%
       <!-- FORM HTML GOES HERE -->
%%[ ELSE ]%%
        <!-- THANK YOU HTML GOES HERE -->
%%[ ENDIF ]%%

You can then use your AMPScript to insert into Sales Cloud info and/or POST to your original collection page.