MachForm Community Forums » MachForm 4

1. sunriseal
   Member

   Is there a way to add a border around the JavaScript form?

   Thanks in advance!

   Al

   Posted 8 years ago #

2. mbs14a
   Member

   Can you not simply adjust this in theme Editor?

   Posted 8 years ago #

3. sunriseal
   Member

   The answer is yes, BUT when you use the recommended JavaScript form code, which I am, the documentation says this: "As this code is intended to integrate the form into your existing web page seamlessly, the form’s background, border, and logo header won’t be displayed."

   I am just wondering if there is a workaround....

   Posted 8 years ago #

4. AMurray
   Pro Member

   I'm not sure there is a work-around since it is working as it was designed to - the form's theme won't display when using the embed code - I think that's the same with the Iframe code or any of the embed methods.

   You could use the direct link; on your website and make it open in a pop-up box (light-box, modal etc).

   Posted 8 years ago #

5. sunriseal
   Member

   AMurray, appreciate the reply. I am aware of the design limitations but was hoping someone may have been able to circumvent those limitations.

   With that said, your suggestion may very well be something I should look into. Had not thought of that!

   Again, thanks!

   Posted 8 years ago #
6. 

   yuniar

   Actually, you can do so by using custom CSS code within your theme. To add border, simply add this code into your theme Custom CSS code section:

   .embed #form_container{
           border: 2px solid red;
   }

   ---

   MachForm Founder

   Posted 8 years ago #

7. sunriseal
   Member

   Yuniar,

   Sorry for the delay in responding....
   Thank you for the code.
   The code works, but only partially.
   The right vertical bar is not being created! (the code creates a 3-sided box)

   Al

   Posted 8 years ago #

8. williamansley
   Member

   @sunriseal: Try changing the code to what is given below and see if that helps.

   .embed #form_container{
   border: 2px solid red !important;
   }

   Posted 8 years ago #

9. sunriseal
   Member

   @williamansley: I tried your suggested code change, but that did not help... same results

   Posted 8 years ago #

10. williamansley
    Member

    @sunriseal: I'm sorry I didn't help. I didn't have time to try it myself first. Hopefully Yuniar will have the solution.

    Posted 8 years ago #

11. sunriseal
    Member

    @williamansley: No apologies necessary... your response was appreciated!

    Posted 8 years ago #

12. sunriseal
    Member

    As noted above, the code that Yuniar gave me does not display the right side vertical line of the border

    .embed #form_container{
    border: 2px solid red;
    }

    It appears as if the form width is wiping out the right-vertical line.
    If I add a width parameter to the CSS code:
    .embed #form_container{
    border: 2px solid red;
    width: 799px;
    }

    the border is competed (using 800px does not work)

    Not sure why border alone does not work, but I will leave that to Yuniar to explain as soon as he is able to!

    Posted 8 years ago #

13. sunriseal
    Member

    After direct contact with the support folks, this issue has been resolved!

    The CSS code to place a border around the form has been modified to read:

    .embed #form_container{
    border: 2px solid red;
    width:99% !important;
    }

    Posted 8 years ago #

14. williamansley
    Member

    @sunriseal: Thanks so much for taking the time to post this. I don't need to do this now, but I may at some point and perhaps it will help someone else right away.

    Posted 8 years ago #

15. sunriseal
    Member

    You are most welcome... glad to be able to share!

    Posted 8 years ago #

RSS feed for this topic

Reply

You must log in to post.