CODEWITHSUNDEEP
htmlcssdrupal
Rainier laan
Rainier laan

Reputation: 1130

Separate form with css

I need to separate a form into 2 pieces. 3 fields on one site and the other field and submit button on the other. I gave them all one class called "contactform" exept for the button. I'm working with drupal, that means that i can ONLY work with the CSS. So i cant add any other HTML tag a class other then the inputfields.

What i have

What i'm trying to achieve

The only code i can provide is the HTML code inside "Inspect element", which i cant post here so i'll post in in a comment below

I hope you guys can help me out with this and thank you in advance!

This is what i can give you. Its a whole mess of code but there's nothing more i can do: 

  <form class="webform-client-form webform-client-form-14" action="/drupal/contact-0" method="post" id="webform-client-form-14" accept-charset="UTF-8"><div><div class="form-item webform-component webform-component-textfield webform-component--naam form-group form-item form-item-submitted-naam form-type-textfield form-group"><input required="required" placeholder="Uw naam" class="contactform form-control form-text required" type="text" id="edit-submitted-naam" name="submitted[naam]" value="" size="50" maxlength="40" /> <label class="control-label element-invisible" for="edit-submitted-naam">Naam <span class="form-required" title="This field is required.">*</span></label>
</div><div class="form-item webform-component webform-component-email webform-component--email form-group form-item form-item-submitted-email form-type-webform-email form-group"><input required="required" class="email contactform form-control form-text form-email required" placeholder="Uw emailadres" type="email" id="edit-submitted-email" name="submitted[email]" size="50" /> <label class="control-label element-invisible" for="edit-submitted-email">Email <span class="form-required" title="This field is required.">*</span></label>
</div><div class="form-item webform-component webform-component-textfield webform-component--onderwerp form-group form-item form-item-submitted-onderwerp form-type-textfield form-group"><input required="required" placeholder="Uw onderwerp" class="contactform form-control form-text required" type="text" id="edit-submitted-onderwerp" name="submitted[onderwerp]" value="" size="50" maxlength="255" /> <label class="control-label element-invisible" for="edit-submitted-onderwerp">Onderwerp <span class="form-required" title="This field is required.">*</span></label>
</div><div class="form-item webform-component webform-component-textarea webform-component--bericht form-group form-item form-item-submitted-bericht form-type-textarea form-group"><div class="form-textarea-wrapper"><textarea required="required" placeholder="Uw bericht" class="contactform2 form-control form-textarea required" id="edit-submitted-bericht" name="submitted[bericht]" cols="50" rows="5"></textarea></div> <label class="control-label element-invisible" for="edit-submitted-bericht">Bericht <span class="form-required" title="This field is required.">*</span></label>
</div><input type="hidden" name="details[sid]" />
<input type="hidden" name="details[page_num]" value="1" />
<input type="hidden" name="details[page_count]" value="1" />
<input type="hidden" name="details[finished]" value="0" />
<input type="hidden" name="form_build_id" value="form-4vEZg04Y8Zevfr2GC6ONWVw8UI_4vxf3AL8NRrCFWtg" />
<input type="hidden" name="form_token" value="gNUgTXDR4TC0WhrHOwB7IaYOMOR6Nxz01qjuvrsVPPQ" />
<input type="hidden" name="form_id" value="webform_client_form_14" />
<div class="form-actions"><button class="webform-submit button-primary btn btn-primary form-submit" type="submit" name="op" value="Submit">Submit</button>
</div></div></form>
</section>

The CSS 

.webform-client-form-14 {
 float: left;
 width: 45%;
 margin-top: 20px;
 margin-bottom: 30px;
}

.contactform {
 border-radius: 0;
 border: none;
}

Upvotes: 0

Views: 2231

Answers (2)

Arinthros
Arinthros

Reputation: 168

The issue is that you set the whole form to 45% width, but we only want elements within it to be 45% width. Without being able to add wrappers to the html, you will need to target each input group one-by-one with either the :nth-child(n) css selector or the field group's custom class, eg: .webform-component--bericht.

Example:

.webform-client-form-14 .form-item:nth-child(1) { 
  width:45%;
  display:block;
  float:left;
}

Upvotes: 2

Guy Sudai
Guy Sudai

Reputation: 227

try giving the text area display: block;

Upvotes: 0

Related Questions