Support

May 16, 2013 at 5:38 am

Hello Jeanette,

Regarding your original question, it could be possible but I doubt it would be easy and would require customising the plugin, especially regarding how the data is shown in the back end dashboard, that is likely a detailed rewrite of how the plugin works.

Regarding the dual column effect, due to the way the fields are created, I could only come up with one way of doing it, via CSS. It will display the basic questions like this – http://d.pr/i/ZBzt, but I havent tested it beyond those basic questions.

The CSS is as follows but may need some tweaking to work with your setup (especially the groupon code, if you are using it)

.event_form_field {
width: 49%;
float: left;
clear: none !important;
}

#groupon_code-1 {
clear: both;
}

#additional_header {
width: 100%;
}

.event_form_submit {
clear: both;
}

That should at least get you started in the right direction.

May 16, 2013 at 11:36 am

Hi Andrew,

There are a few ways to wrangle these around with CSS:

1) Each question has its own label “for” and each input has its own “name”, and you can use these as CSS selectors. So for example the First name label and input field selectors are:

label[for=fname]
{
    /* ...definitions here... */
}
input[name=fname] {
    /* ...definitions here... */
}

2) Another way that might work for your forms is use the nth-of-type pseudo-class. Each label and input pair is wrapped in a division with the class of “event_form_field”. With the nth-of-type selector you can specify by number which division you want target. For example if you wanted to target the second selector it would be:

.event_form_field:nth-of-type(2) {
    /* ...definitions here... */
}

Since nth-of-type works much the same was as :nth-child, you can do some pretty interesting things because it allows you to select elements in groups or patterns. Here is a guide that I’ve found helpful:

http://css-tricks.com/useful-nth-child-recipies/

With your question about moving the labels below the fields, this can be done by setting them to display: inline-block so they each take up their own line, then you could use position: relative to move the label below the field. This forum thread may help:

http://stackoverflow.com/questions/3463621/css-label-text-right-below-input-element

May 17, 2013 at 4:26 am

Hey Jeanette,

YEs this stuff can take a while to get your head around, especially the nth operators. I have learned a lot just from Josh’s post above!

Playing around with that and my original code, you could try something like this

/* these arent strictly needed, but make the input fields longer */
input[name="fname"] {
width: 90% !important;
}

input[name="lname"] {
width:90% !important;
}


/*fieldset is only used by the Personal Questions, so we can target that and then target the first and second questions (first and last names)*/
fieldset:nth-of-type(1) .event_form_field:nth-of-type(1)  {
width: 50%;
float:left;
clear:none !important;
}


fieldset:nth-of-type(1) .event_form_field:nth-of-type(2)  {
width: 50%;
float:left;
clear:none !important;
}