Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
" Regarding your visit to our church

This survey is conducted to find out why you visit our church."

How to get the above two lines to be in center position?
Your code so far

<!-- file: index.html -->
<!DOCTYPE HTML>
<head>
  <title>Church Survey Form</title>
  <meta charset="utf-8"/>
  <link href="styles.css" rel="stylesheet" />
</head>

  <body> 
     <h1 id="title"> Regarding your visit to our church</h1>
    <p id="description"> This survey is comducted to find out why you visit our church.</p>
    <form action="http:newcreation.org.sg" id="survey-form" method="post"> 
      <fieldset>
<label for="name">Your Name: <input id="name" type="text" required placeholder="Your Name:"/></label>
<label for="email">Your E-mail: <input id="email" type="email"  placeholder="Your Email" required /></label>
<label for="number"> Your Age: <input id="number" type="number" min="12" max="120" required placeholder="Your Age"/></label>

      </fieldset>
<fieldset>
 <label id="name-label" for "church"> Your church Name:<input id="church" type="text" /></label>
 <label id="email-label" for "cmail">Your Church Email:<input id="cmail" type="text"/></label>
<label id="number-label" for="cnum"> Your Church Number: <input id="cnum" type="number" /></label>
</fieldset>

<fieldset><label for="dropdown">How do you come to visit us?<select id="dropdown">
  <option value="">select one</option>
  <option value="1">Through Friends</option>
  <option value="2">Visit Myself</option>
 </select></label>
Will you visit again? <label for="Yes"> Yes <input type="radio" name="Yes No" value="Yes"/></label for="No"> No<input type="radio" name="Yes No" value="No" /> </label> 
</fieldset>
<fieldset>
  Where do you come from?
 <label for="Singapore"> Singapore<input type="checkbox" value="Singapore" checked />Singapore</label>
  <label for="Others"> Others<input type="checkbox" value="checkbox" />Others</label>
</fieldset>
<fieldset>
<label for="comments">Any other comments: <textarea id="comments" rows="3" cols="10"></textarea>

</fieldset>

<input id="submit" type="submit" name="Submit" />


    </form>

/* file: styles.css */
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
  color: #f5f6f7;
}

label {
  display: block;
  margin: 0.5rem 0;
}
form {
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding-bottom: 2em;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

you’d have to use the attribute selector to stylize/center it using text-align:center;

h1 {
  text-align: center;
}

#description {
  text-align: center;
}
3

Thx, how to get the survey to send to an email address instead of a html address?

4

Maybe I don’t quite understand your question. The form is HTML, and information is displayed on a webpage and submitted to a server. To get the survey sent to an email address, you’d need to use PHP wouldn’t you?

What specific ‘User Story’ are you having trouble with?

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.