Forums

Editing Form Style

Permalink
I need to edit the core display code of a specific form (for responsiveness). I know it's not recommended to edit the display of the form and rather edit via a custom template, but I'm not sure I have a choice.

The form I've designed is located here:http://scarletsmoke.net/virt/biotechdental.com/...

Does anyone know if I can create the form with the block (just the basic inputs), then edit only this forms display (editing not only the class css styles of each input, but I need to add specific divs to create the columns.

I do not care to spend $40 on an add-on if there is a way for me to do it through the backend. I don't need to worry about the editability of the block after the edits, I just need the form to continue it's functionality with sending an email and entering the info into the database that can be accessed via the dashboard.

Thanks!
BisonSatellite
 
enlil replied on at Permalink Reply
enlil
you should be able to accomplish this by copying the view php & css files to an appropriate templates folder and edit them how you need. Then in the page, select your custom template on the form block.
BisonSatellite replied on at Permalink Reply
BisonSatellite
Yes, but since I need to group pieces of the form within div tags, how do I accomplish this in view.php when it only dictates what the form will do, but not how this form actually looks? Here's an example of the code:

<form class="cbp-mc-form">
       <div class="cbp-mc-column">
        <label for="first_name">First Name</label>
        <input type="text" id="first_name" name="first_name">
        <label for="last_name">Last Name</label>
        <input type="text" id="last_name" name="last_name">
        <label for="email">Email Address</label>
        <input type="text" id="email" name="email">
        <label for="email">Phone Number</label>
        <input type="text" id="phone" name="phone">
       </div>
       <div class="cbp-mc-column">
        <label for="phone">Company</label>
        <input type="text" id="conpany" name="company">
        <label for="address">Full Address</label>
Viewing 15 lines of 30 lines. View entire code block.
BisonSatellite replied on at Permalink Reply
BisonSatellite
For clarification, the div's that create the columns are necessary to accomplish responsiveness.
enlil replied on at Permalink Reply
enlil
all of the styling for it should be available in the view.css file. If you need to add, remove, or change any of the divs make appropriate styling changes in the css.
BisonSatellite replied on at Permalink Reply
BisonSatellite
Yes, but the I need to add div's, not just style the one's there. Between form and the first label, there is a div, that closes after the 4th input, then another div that contains two more inputs, a closing div, and a final div that contains the last two inputs, and all of the inputs are their own type. How do I edit THIS output DIRECTLY?

Does anyone know if there is any other way to edit the output?

This is not as simple as editing the view css or view.php, or else I would have done that already.

Thanks!
JohntheFish replied on at Permalink Reply
JohntheFish
A better starting point is the Form table-less layout template by @jordanlev (free in the marketplace). It provides an example table-less template and instructions for developing further templates.
andrewjaff replied on at Permalink Reply
andrewjaff
Hi you can change it. just by overriding the loadSurvey() function of MiniSurvey class. change thetable layout into div.


Thanks
Andrew
BisonSatellite replied on at Permalink Reply
BisonSatellite
I appreciate all of the responses so far, but since I'm not getting the answers I'm looking for how about this:

I need to customize my form to be EXACTLY like this one, but functional in c5:http://www.scarletsmoke.net/virt/biotechdental.com...

Does anyone know how to do this?
andrewjaff replied on at Permalink Reply
andrewjaff
As i said just override the loadSurvey() function of core form block controller and replace ul li with div, if you want some more div then can insert by conditionaly in while loop.

I am not getting whats problems exactly you are facing..
BisonSatellite replied on at Permalink Reply
BisonSatellite
" As i said just override the loadSurvey() function of core form block controller and replace ul li with div, if you want some more div then can insert by conditionaly in while loop. "

That sounds like a solution but I am by no means a PHP developer, and with my only slight-understanding knowledge of PHP, I'm not even sure where I would do that. For this to help me I'd need actual file names and directories these files would be.
andrewjaff replied on at Permalink Reply 1 Attachment
andrewjaff
I have attached the two file. paste it to root/blocks/form/
if directory not exists , create file directories.

Make changes in controller or view php file whereever you want to change.


-Andrew
BisonSatellite replied on at Permalink Reply
BisonSatellite
Thank you! This is a much more understandable answer.

My only question left, if you can help, would be how do I set the form to display specific inputs with div's in between? Right now I have the form split into 3 columns, so 3 wrapping div's. You can see what I mean now, live:http://www.biotechdental.com

Thanks again for your help.