Working on a simple submit form
(https://formsubmit.co/) in a Streamlit
app and sending it using Ajax
. The form is a simple Bootstrap contact form
.
My problem is when I click the send button
, the form disappears and I get instead the response:
Before:
After:

I didn’t ask about the response, I would like to keep the form visible and deal with the response later!
I tried to insert display:block;
in the style attribute of the div containing the form, but it doesn’t work!
I am new to Streamlit
, can anyone guide me where I am doing wrong?
My code:
form_from_html = "html/myForm_1.html"
with open(form_from_html, 'r') as f:
html_form = f.read()
st.title("TEST:")
js_string = """
<script language="javascript">
const form = $(#contact-form).serialize();
$.ajax({
dataType: 'json',
accepts: 'application/json',
data: form,
});
</script>
"""
html(html_form + js_string, height=600, width=490)
st.title("END")
EDIT:
I found that {"success":"true","message":"The form was submitted successfully."}
is an html iframe
due to html(html_form + js_string, height=600, width=490)
(see my code).
I tried to set value hidden
to the tag attribute hidden
without success!