search

VanshitaGandhi / volunteer-form

Create a large-scale volunteer registration form for a not-for-profit organization.
0 stars 0 forks source link

Volunteer form #1

Closed VanshitaGandhi closed 4 years ago

VanshitaGandhi commented 4 years ago

Issue in : 1)Removing the line in front of the heading 2)Bringing the radio buttons in the same line @muxlowc

VanshitaGandhi commented 4 years ago

input, select, textarea, input[type=“radio”], input[type=“checkbox”] { border-color: #6E8C62; }

Do I just copy this code or it has to be modified? @muxlowc

VanshitaGandhi commented 4 years ago
Screenshot 2020-03-19 at 3 55 58 PM

@muxlowc

VanshitaGandhi commented 4 years ago

Issues: 3) How to increase the width of the textbox (textarea) 4) How to make the hr transparent (less opaque) @muxlowc

muxlowc commented 4 years ago

@VanshitaGandhi Sorry, it looks like you may have fixed a few of these already:

1) Do you mean the two lines by the address section? You can actually remove your hr tags (the fieldset tag creates a line by itself) - you can also remove your pad-t classes on any fieldsets, as this is what's making the line not be centred 2) Add the "inline-block" class to the divs surrounding your radio input/labels 2.2) yes, you should be able to just copy paste that code for the colors 2.3) You need to put a placeholder for your <option>""</option> so instead of "" you can put something like "Select a province" 3) Textarea - i think you figured this out, it looks good to me 4) just remove your HR tags, you dont need them

Also, wrap your form inside of a div and then put a wrapper class on it (and same for the h1/p)

<header class="pad-t pad-b push-2">
    <div class="wrapper">
      <h1 class="bold push-1-2">Apply to be a tree planter</h1>
      <p class="mega bold push-1-4">Trees are one of the world’s most precious renewable resources—we need your help to renew the ecosystem.</p>
    </div>
  </header>

  <div class="wrapper push-2">
  <form class="gutter-1-4" method="POST" action="https://formspree.io/vanshitagandhi98@gmail.com">

    <fieldset class="pad-t">
      <legend class="bold push giga">Personal details</legend>
      <div class="grid">
muxlowc commented 4 years ago

@VanshitaGandhi ignore some of what I said above about the HR tags (I need more coffee this morning!)

<div class="gutter-1-2">
    <hr class="push-2">
</div>

hr { border-color: #70ad55; opacity: .3; }

fieldset { border: 0; }

VanshitaGandhi commented 4 years ago

Markbot still displays the error message after using the placeholder in the code for option tag in
select tag

@muxlowc